Before the advent of the WordPress Block Editor, designers were forced to use page layout plugins or themes, or in the case of Genesis users, Widgetized Archive pages, adding widget areas to these pages to create layouts, or environments such as Elementor, Content Views, Toolset and others to add powerful layout functionality.
With the advent of the Block Editor in WordPress 5, Blocks have become the new standard for the creation of page architecture. Developers with legacy sites may be confronted with the necessity to update old layouts into Blocks, making it easier for clients to edit their content and maintain their websites.
For the purposes of this article, we’re converting an old html widget displaying columns of lists. The principles apply for most content issues – create the layout first, then insert the elements needed from the old page or widget.
Do this in 6 steps –
1. Capture Old Content
Open the Widgets or Content Blocks or Modules used to create the existing layout, view the elements in html mode, and copy the code into a text (code) editor document, making notes or comments as necessary to keep track of the content. Save it.
2. In WordPress, create the new layout structure for the desired page
Create a new Page if necessary, or edit on page if it uses an Archive Page template that can convert to a Default (or any other) template,
Add empty blocks in the WordPress Block editor while in Visual mode, making sure to add all the nested blocks you might need.
3. Switch to the code editor mode, select your desired block markup, and copy it:
4. Create a new document in a text (code) editor and paste in the Blocks markup from your WordPress page.
Identify the places in the markup where the actual content will go. Add bracketed reference notes if needed, adding new line feeds to the code to make the locations easy to see.
5. Copy code from the old layout into your block layout code.
6. Copy it, and paste it into your WordPress page
…then switch to the Visual Editor to see what you’ve done. It might take a couple of tries to clean up your code, but WordPress will give you good guidance on where to look for errors.
Our effort was successful right out of the box:
After you’ve got your elements assembled on the page, you can use the editor to add a custom class to any and all elements (there’s a field in the right sidebar under “advanced”) for styling.
And that’s it. Let us know if you need help with it.