jbQ Media

Web Design, SEO Services and Media Production | Yonkers | Westchester | NY

(917) 861-1242
  • Home
  • About
    • Why Us
    • Jon Burr | Site Designer
    • Our Rates
    • Contact
    • Our Location
    • News via Twitter
  • Our Services
  • Photography
  • Articles
  • Reviews
  • Website Portfolio Gallery
You are here: Home / Tutorials / Converting Wordpress Widgets for use in the Block Editor

Converting WordPress Widgets for use in the Block Editor

March 6, 2021 By Jon Burr

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.

Graphic of the code from our old html widget

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.

Graphic shows selecting column block
Selecting a column block
Graphic showing column options
Pick your layout
Graphic showing raw column blocks in Editor
Raw column blocks with no content
Graphic showing adding Blocks to columns
Adding Nested Blocks to columns
Graphic showing layout without content.
Layout without content… 3 columns with lists in each (could be anything, actually)

3. Switch to the code editor mode, select your desired block markup, and copy it:

Graphic showing WP Editor's Options switcher
Click the dots to open the options column
Graphic showing how to select the Code Editor
… and switch to the Code Editor view.
Graphic showing the editor in Code mode
Copy the code block for pasting into your offline code editor.

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.

Graphic showing which code to replace
The layout code from the Block editor, with a representative region to be replaced by old code
Graphic showing new layout code marked up for replacement with old widget code
Bracketed content will be replaced by all the list items from the old code, where appropriate
Graphic showing which old code to paste
Which old code to paste…

5. Copy code from the old layout into your block layout code.

Graphic showing combined code from the new Layout and the old content
Block Layout markup with old content inserted.

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:

Graphic showing the result in the WordPress Editor
It worked!
Graphic showing the result in Preview
Showing the result in Preview mode.

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.

Related Posts:

  • Creating a Glossary for a WordPress Site with ChatGPT AI We created a custom glossary for a WordPress music arranging…
  • Why SEO is Better than Paid Google Ads Search engine optimization (SEO) and paid Google ads (PPC) are…
  • How to Change the Styling of a Column in the WordPress Block… To add or change the background color of a column…

Filed Under: Tutorials, Website Design, Wordpress Tagged With: Block Editor, Widgets

Site Search

Our Services

  • WordPress
  • SEO
  • Strategy
  • Consulting
  • Website Design
  • Useful Tools
  • Tutorials
  • Editorial

Contact us now! :)

Why delay? Initial consultation is on the house!

call (917) 861-1242

    Your First Name (required)

    Your Last Name (required)

    Your Email (required)

    (please double-check it!)

    Subject

    Contact from jbQ Media Website

    Your Message

    *required


    Subscribe me your mailing list

    Human?*

    • Production
    • WordPress Sites
    • Strategy
    • SEO
    • Websites
    • Editorial
    • Contact
    • Terms of Service
    • Cookie policy

    © 2014 jbQ Media

    Google+
    Manage Cookie Consent
    We use cookies to optimize our website and our service.
    Functional cookies Always active
    The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
    Preferences
    The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
    Statistics
    The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
    Marketing
    The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
    Manage options Manage services Manage vendors Read more about these purposes
    View preferences
    {title} {title} {title}