Most content management systems utilised a WYSIWYG (What you see is what you get) text based editor to create content within a website. This was the same for standard installations of WordPress, up until December 2018, which saw the introduction of Gutenberg blocks.
Gutenberg is a block building editor tool that allows a user to construct custom layouts and content in a no-code backend. Allowing for ultimate flexibility and speed when creating new templates for landing pages, blog posts, or custom content types.
What is a Block-Based System?
Blocks offer users a no-code solution to creating layout and content for a page. Therefore these blocks are like building pieces for your content. They can represent anything from text, images, and videos, to buttons, columns, and widgets.
Think of each block as a separate content or layout element that can be added, moved, or customised independently. Blocks can also be nested within each other, further adding to the dynamism of a page’s layout.
Creating Custom Blocks
Developers can create their own custom blocks to fit specific needs that may not be available within WordPress. Such as custom carousels, RSS feeds, pinned animations etc.
By adding custom blocks, a WordPress based site leverages the full value of a custom site, with the ease of block based layouts.
“A WordPress based site leverages the full value of a custom site, with the ease of block based layouts.”
Reusable Patterns
Complex layouts can become difficult or tedious to replicate in every instance of a new page. Gutenberg’s solution to this is allowing the creation of patterns. A pattern is a collection or recipe of blocks that can be applied to any new page that calls on it. This means that once you create a block pattern (e.g., a specific layout or design), you can save it and use it across multiple pages without recreating it every time.
There are two types of patterns. Synced, or unsynced.
Synced patterns are handy when we have a common or global content section we would like to include on multiple pages. When a pattern is synced, any change to that pattern on any page it exists, will replicate that edit across the website – no matter the amount of iterations. An unsynced pattern behaves more like a template, where a content layout is applied, and then edited individually to suit the overhaul context of the page. Any edits to an unsynced pattern have no effect on other iterations of it throughout the website.
Styling Blocks
Blocks can be styled using CSS or SCSS (Sassy CSS). WordPress offers an editor.css file, which allows developers to define how the blocks look in the editor, ensuring that they match the look of the live site.
Full-Site Editing (FSE)
Gutenberg goes beyond content editing and introduces Full-Site Editing (FSE). This feature allows developers to build entire themes using blocks, including headers, footers, sidebars, and more. Block-based themes use a file called theme.json to manage global styles, ensuring a consistent design across the entire site.
Performance: Deferred Scripting
WordPress themes typically bundle all required scripts and styles into 1 or 2 files, which can add unnecessary strain to the loading and display of a web page. Gutenberg allows a developer to specify styles and scripts required for a block, only when a block is in use. This ultimately means that resources are not overburdened when trying to load in scripts or styles that aren’t in use for the current page.
Inherently Responsive Design
When using Gutenberg’s layout blocks to build a page, responsiveness is naturally integrated. Well-structured layouts that effectively leverage columns and rows inherit adaptive rules designed for various screen sizes. This allows developers to fine-tune the viewing experience effortlessly, ensuring seamless usability across devices.
Developer Ecosystem
Gutenberg enjoys strong support from the WordPress community, with leading plugins like WooCommerce offering custom blocks tailored for seamless integration into page layouts. This not only enhances user-friendly customisation but also ensures stability. By leveraging tools like Advanced Custom Fields, developers can create intuitive, no-code solutions that empower clients to manage their content effortlessly.
Advantages of Gutenberg
Drag-and-Drop Design: Anyone can easily create visually rich pages by dragging and dropping images, templates and more without any coding knowledge.
Modular Design: Gutenberg encourages creating reusable blocks, making your content flexible and versatile.
Customisation: Developers can build custom blocks and extend WordPress’s capabilities, offering tailored solutions to clients.
Gutenberg changes how users can build websites using WordPress and offers a powerful and flexible system that’s easy to use. Blocks allow developers and content creators to work faster and more creatively. Whether crafting simple pages or designing full-block-based themes, Gutenberg’s cutting-edge tools make website design and management smoother than ever.
