The WordPress block editor, developed as the Gutenberg plugin and incorporated as the core editor last December, has received mixed reviews and continues to have accessibility issues which makes it unsuitable for some users.
But the editor does bring opportunities to make some tasks much easier. The editor comes with a range of blocks for the styling and layout of page content, such as gallery blocks and columns. In addition, you can install third party blocks and even get custom blocks developed for your specific requirements.
To illustrate this, here’s a run-through of a system we developed for displaying a grid of logos in Posts and Pages.
Unlike image galleries, where images are all cropped to the same shape, logos need to be uncropped, and aligned centrally both vertically and horizontally.
We started by creating a Custom Post Type for logos so they can be added as posts, in a similar way to normal Posts but with inputs for Title, Image and Link. They can also be given categories, eg, Members and Supporters.
Logos can then be displayed on any page or post within your site and will automatically update in line with any deletions, additions or category changes made to Logo posts.
Once you’ve added a Logo Block to the content area of the Editor the sidebar will display the various settings for the block.
The content area shows what will be display on your web page, while the sidebar settings control this output.
The settings provided by the block are:
Title: optionally add a heading for the block
Category: tick boxes to select one or more categories
Multiple categories filter: if more than one category is selected, this option allows you to define whether logos to be displayed are those in any of the selected categories or only logos that are in all the selected categories
Order using: this sets whether the logo display order will be based on the Logo Title, or the date the logo was added
Display order: this allows you to reverse the display order; wanting to list from Z – A is unlikely, but if ordering by date, you may want the logos listed newest first rather than the default oldest first.
Columns: allows you to set the maximum number of columns (2, 3, 4, 6 or 8) in the logo grid – the number of columns will reduce on narrower screen widths.
In addition, the Block toolbar offers Wide and Full Width options, which – if supported by your theme and the page layout being used and screen width – will display the block at widths beyond that of the standard width of the page content.
The WYSIWYG display of blocks in the editor means that you see the logos (or the title if an entry doesn’t have a logo) laid out as they will appear on the web page (though the number of columns may change when viewed at narrow screen widths). Changing any of the settings in the sidebar will automatically be reflected in the editor.
In addition to the options and output detailed here, it is possible to get customisations made to this system for your specific requirements.