Do Plugin actions work in Frontend?

[zelamedia]

Hello all, I’m totally new here so I wanted to ask if I have any unknown plugin for example a simple plugin that renders a table on the frontend and I have above the table a button where a modal pops up and I can add data to the table, will this action also work on the React frontend of Frontity? If no why and what are the steps to make wp plugin actions work? Or is Frontity only for showing text to the users?

Thanks

[SantosGuillamot]

Not sure if I understood the use case correctly, but the plugin won’t work out of the box. You would need to adapt the functionality to Frontity, but it’s totally possible and it shouldn’t be difficult. Frontity is not just for showing text to users, you can include actions so you change the state of the app, it’s like working with React. You have tons of possibilities and you could replicate the plugin you mentioned.

If you give us a more detailed explanation of your use case we can guide you better through the implementation.

[zelamedia]

For example I use rhe premium plugin wpDataTables, what are the first steps to make it work with Frontity?

[Pablo]

Can you provide a link to a post where you are using it? The first thing would be to check if the plugin is compatible with the REST API and how it is inserting the table inside content.

[luisherranz]

I took a look at wpDataTables.

I know this is probably not what you want to hear, and I’m sure wpDataTables is a great plugin (it looks like!), but I think wpDataTables is a good example of a front-end plugin which wouldn’t make sense to make it work with Frontity.

This plugin is doing 31 requests of JS and CSS files that sum up to 1.3Mb. The page takes 10 seconds to load in a “Fast 3G/x6 slowdown” environment.

In order to make this work with Frontity, you could just add all those resources to your site, along with jQuery. And it would work.

But this is precisely the way of making websites we are trying to avoid with Frontity in the first place!

There is a new way of creating websites which is way more optimized and our mission at Frontity is to provide the WordPress community with the tools to be able to hook into this new world.

This plugin could work great, but the authors of wpDataTables would have to write again its logic in React/Frontity, using CSS-in-JS and proper code-splitting. The plugin load would then be minimal: My guess is that it could be only 50Kbs or even less! (Frontity core, which includes React is ~80Kbs).

That’s because Frontity is prepared to optimize all the asset handling with:

• Code-splitting: Only the JS code of the components that render type of table present in the screen is loaded.
• CSS-in-JS: Only the CSS of the components that render the type of table present in the screen is loaded.

And that’s the way of creating websites we will try to promote.

I know Frontity is probably still too small to attract the attention of that type of developers. We are still in the very beginning, but we will do our best to make Frontity as widespread as possible.

All this doesn’t mean that Frontity cannot work with ANY front-end plugin. That is not true. wpDataTables is just an example of something too complex to be ported by an external developer. But there are a lot of plugins that make total sense to port and:

• We will work in the port of some of them ourselves.
• We will help other members of the community to port them (like the Contact Form 7 case by @imranhsayed).
• We will guide the plugin creators to port them to Frontity.

Besides, we think there’s going to be a migration of this type of front-end plugins to Gutenberg blocks and those will be easier to adapt to Frontity, as Gutenberg blocks already use React and the REST API natively.

---

I hope I made myself clear and I’m sorry if this is a disappointment. But I feel like we will be breaking our mission if we would just tell you to add all those assets required by the plugin to your site. And we won’t be doing any good to you either… as your lighthouse score will plummet.

[imranhsayed]

Well explained. I am sure it will bring a lot of clarity of how we do things in Frontity. Thank you @luisherranz

[luisherranz]

what are the steps to make wp plugin actions work?

I’m sorry, I missed this specific question.

The WP front-end plugins usually involve these elements:

• Some HTML content in the content field of the post/page.
• Some CSS assets loaded in the front-end.
• Some JS assets loaded in the front-end, usually dependent on jQuery.

In Frontity, you still have the HTML content, but you don’t have the CSS and JS assets.

In most cases, the steps to make it work with Frontity are going to be:

• Detect the presence of the HTML of that plugin in the post content using an html2react processor.
• Substitute one or more parts of that HTML for your own React components.
• Add the styling of the CSS assets to the React components using CSS-in-JS.
• Add the logic of the JS assets to the React components, using Frontity state to store the state and actions to mutate it.

If the port needs settings, you can add those to the state and change them in your frontity.settings.js file.

[zelamedia]

Thank you so much for explaination, I decided to do the exact same thing wpDataTable does in React, then I use ACF on wp side.