Is it worth it to convert old Elementor articles to Gutenberg?

[bernard]

I'm working on a new setup for my product reviews, which will be only ACF + Gutenberg.

I have several hundred Elementor articles though. They all get crappy speed scores and it's not really possible to fix because Elementor subtracts like 30 points just on install.

I actually tried deferring some of the javascript, but that messed it up and probably cost me quite a bit until I figured it out a week later. Tried contacting support who said they couldn't tell me which javascript files could be deferred safely and that's basically the straw, because Elementor clearly doesn't give a fuck about pagespeed.

Using WP-Rocket I can barely squeeze into the 50s with Elementor, just barely.

My question is probably: How important is page speed now in the algorithm vs the time spent copy pasting into Gutenberg?

I will definitely switch the top 10-20 earning pages into Gutenberg in any case, because they're being held back from being slow I think. I am the only one with such paltry speed scores in the top 20 basically.

Would I want to do it for less earning pages though? And where is the cutoff in time vs earnings?

Any thoughts?

 

[Ryuzaki]

It sounds like you know what to do and you know the answers to your questions, you just don't want to do it.

I feel your pain. When Gutenberg finally released in the core Wordpress, I decided to be an early adopter for once in my life and learn it and learn how to make custom blocks, etc. And part of that was converting a 300 page site over to Gutenberg, including making all the custom blocks (I love ACF for it). It took quite a while, but I felt it was important for the future sales (which has come and gone).

So not only do I think it's important to get up to the new standardized tech, but to get away from technical debt (Elementor).

I did it for every page and felt it was worth it for every page. No, I didn't bother measuring the total effect, but every page matters or I wouldn't have published it. And I want a unified experience across my sites, even in the backend. I want all of my sites on the same tech across the board, not even just within one site.

This is one of those times I take a deep breath, sigh it out, bust open a spreadsheet and get organized, see how big the workload is, figure out how much time it takes me to convert the average article, and decide how many per day I'll be doing until it's done. For the easy, basic articles you could probably hire a VA to do it if you're willing to allow for some mistakes or will do serious quality assurance. I wouldn't want backlinks appearing and entire paragraphs disappearing, etc.

 

[bernard]

Thanks for the advice @Ryuzaki.

Yes, it pays to be a first adopter and organized in general.

It has to be done, so it must be done. I might overestimate how much needs to be done, but I do think it will be at least 30 hours or so for the important pages and the ones that are info content, I can definitely find someone to do.

I'm doing a full revamp of my setup here and it should make it much easier to outsource and juggle multiple ad networks for the same product etc.

I think I will do custom ACF blocks that get filled and ordered individually in the Gutenberg editor, but I also considered a Multi-Product ACF block that could be reordered or even blocks that get populated from the Edit Post screen.

What do you think will be the best approach here of those 3? If we're talking typical product review listicles?

 

[Ryuzaki]

@bernard, I wouldn't do anything with template edits and custom fields that get filled in outside of the editor. It doesn't matter what it is to me. If it belongs in the post content, I want it done as a block.

I did giant comparison tables as blocks and more. You know with ACF you can have the "preview mode" that shows what the custom block will look like and then you click into "edit mode". I don't care how complicated the "edit mode" side of things is. I'll fill it out, flip it over to "preview mode" and it's done. I've done a block with like 20 different fields to fill out. It's all the same to me once the data is in it.

I think you can do the multi-product block with a "repeater" if you want to be able to reorder them. I'm not entirely sure I understand the specifics of what you mean in some of your post, which is why I'm describing my philosophy: I want it all done as blocks, and not custom fields at the bottom of the "edit post" screen like where you find the Yoast custom fields and all that.

 

[bernard]

I agree in principle.

What I meant by Multi-Block is that we're talking about "Listicles" of the type:

• Best product for purpose

For each "best product for purpose" we have one product with images, gallery, pros/cons, features etc. Straight forward, you can make one product, one ACF block.

However, on larger product review listicles, you have:

• Best product for x
• Best product for y
• Best product for z

and each of those has associated products. So.. the idea was to create one Repeater product block, where each product is a row and each block is a listicle, complete with Title and Intro.

However, I think this might complicate things more than it helps. I'm thinking from the point of VAs here. They'd probably not want to drag/drop/add too much in the actual Gutenberg editor and would probably prefer copy-paste into the ACF block sidebar.

Does that make sense?

In any case, one product one block, seems to make the most sense, considering as you mention, you have the ACF block preview function.

 

[bernard]

@Ryuzaki if you use Comparison Tables at the top of your affiliate articles, did you make your own or did you use a widget/plugin?

I'm thinking about using this opportunity to test a bunch of different styles, vertical and horizontal, table and more class featured product style.

Any comments on using Gutenberg for this kind of thing?

 

[Ryuzaki]

In any case, one product one block, seems to make the most sense, considering as you mention, you have the ACF block preview function.

I agree. If you need 3 products for a section I’d just use 3 blocks rather than a repeater. I feel like it leaves more possibilities open and creates less of a mess if you want to change something later.

if you use Comparison Tables at the top of your affiliate articles, did you make your own or did you use a widget/plugin?

I made a giant one that had 3 product titles, images, pros text, cons text, buttons, affiliate links, and so forth. It had jQuery hover states, like 4 media query widths for mobile responsiveness with CSS, table headers turned sideways and other cute design things… and it was all one custom block. It must have had 15-20 fields to fill out, but at the end of the day it was one block. I did it myself minus using ACF’s PHP block building.

You could create several styles but at the end of the day, probably 50%+ of your traffic, if not 70% will be mobile anyways, which means they’ll all mostly get some vertically stacked table anyways due to the viewport width. You would be split-testing the minority of desktop traffic with dirty numbers unless you clean out mobile users after. I’m not sure if I’d spend my time here or just chasing more traffic instead.

 

[bernard]

@Ryuzaki That sounds how I do with Elementor already. I think it converts pretty well, but I obviously don't know what other methods look like.

I know many larger affiliate sites use more table like setups and The Wirecutter often uses a list.

My intuition is that people don't need 5 different options, but 3 products are enough (best, best value, best budget). Then I add subheaders for more specific things like "best environmentally friendly" etc.

You're right about mobile as well.

A different question, can you get the ACF field entries to show up below the main content in the editor? Because when I did a custom block it became very cramped in the sidebar and basically useless.

 

[Ryuzaki]

A different question, can you get the ACF field entries to show up below the main content in the editor? Because when I did a custom block it became very cramped in the sidebar and basically useless.

I don't believe so. I think that spot below the editor is for fields that are in templates rather than in blocks. But you don't have to use the sidebar to enter data into all the block fields. You can flip between preview mode, which renders the CSS and everything, and edit mode, which puts all the fields right there in the editor, giving you much more width to work with in the fields.

 

[bernard]

I don't believe so. I think that spot below the editor is for fields that are in templates rather than in blocks. But you don't have to use the sidebar to enter data into all the block fields. You can flip between preview mode, which renders the CSS and everything, and edit mode, which puts all the fields right there in the editor, giving you much more width to work with in the fields.

Sweet, I didn't realize that, this changes everything.

I used a repeater field for main content with a dropdown select control, so that you can choose Text Editor, Quote, Image, Button etc. In that way, you're not limited to one set of template for a product review, but can build it as you go. It actually works too.

I will have to eventually test and see which method both I and VAs would prefer. I have been just using grouped blocks and copy/paste them, which also works fine enough. With that method I would need some custom blocks if I want to keep my current functionality from Elementor like quotes with a pic and such.

 

[bernard]

Slowly but surely, I approach replacing Elementor and gaining good page speeds.

Creating this ACF block was actually not at all difficult. Excited to think about what kind of possiblities will open up here.

 

[bernard]

That's it!

I've converted most of my Elementor elements to Gutenberg blocks.

If you're on the fence about moving to ACF blocks with Gutenberg I would encourage you to just get it done, because it's honestly not difficult and it's easy and intuitive.

I'm very excited to see how much faster it will load.

 

[scottb]

I'm currently looking to do something similar to what you guys describe with Wordpress and either Elementor or Gutenberg. I created spreadsheets with detailed specs and functionality for products in my niche and want to create one template which will display the products that can do it. So they will target long tail keywords, and I can go in later to add to them and optimize them more. Ex - best camera that can record HD video.

I'll probably do something similar with a comparison table at the top and if its possible a couple paragraphs about each product where I'd like to mention the main features or specs dynamically. I'll add to it manually but want to post something simple at first so I can see what starts getting traction to prioritize.

I was debating between upgrading to Elementor Pro, find an alternative, or use Gutenberg? Id' rather not start relying more on Elementor either since I'd like to simplify and get away from a separate page builder.

Is it hard to create blocks like these in Gutenberg? I can manipulate code some when needed, but can't write it from scratch. I found a plugin for Gutenberg, Stackable which might be easier for me but I would wonder how it will affect performance. Do you use the free or paid version of ACF? Are there any other plugins required to make it work? Any advice or good resources would be greatly appreciated. Thanks

 

[Ryuzaki]

Do you use the free or paid version of ACF?

I use the paid version, grandfathered in from when it was a one-time fee. It's still worth the annual fee if it's the backbone to an entire site you build.

Is it hard to create blocks like these in Gutenberg? I can manipulate code some when needed, but can't write it from scratch.

You'll struggle. To build a complex Gutenberg block, you'll need to know HTML & CSS very well including media queries. It's non-negotiable. To do it normally you'll need to know Javascript as well, or to do it with Advanced Custom Fields you'll need to know PHP. If you can't do these things from scratch, you're going to have a very hard time making this work, unfortunately.

The other option is to download these plugins with a bunch of blocks in them, or wait for the Block Depository (like the Theme and Plugin ones) that Wordpress intends to release where you can download one block at a time from other users uploading them. This will include bloat too as you'll end up enqueuing new CSS and JS (if needed) files. Something like Autoptimize (a plugin that will concatenate all the enqueued files in the right order and minify them) might help with this. It's worth testing, though it can be slower to do this with HTTP/2 than it is to leave the files separated.

 

[scottb]

Thanks, at least I know not to waste time creating something custom. I just noticed that Ninjatables pro can integrate with ACF. I'm going to test it out using Ninjatables plus Elementor pro on a staging site. No issues with either of them so far, but I do use Flying Press. Without that they would probably do poorly on speed/CWV. I think I'll be able to do everything I'm looking for with it and also not have it impact speed.