In a previous posthttps://publishing-project.rivendellweb.net/new-gutenberg-features-block-and-global-configuration/ I briefly discussed how to configure blocks and themes using JSON files. The emphasis of that post was on theme configuration and briefly mentioned block.json in passing as a way to configure individual blocks. This post will dive deeper into block.json as a block configuration tool and how to use the configuration data in the code of the plugin we create. bash npx @wordpress/create-block notice \ --namespace rivendellweb The command will produce the following scaffolding in the notice directory. It will also install @wordpress/scripts as part of the installation process. I've removed the content of nodemodules...
This is a place to document issues I'm finding as I build my theme. A lot of these issues may be caused by my lack of experience with Gutenberg and the way the full site editor works. I will file issues about these items in the Gutenberg repo where I feel it's necessary. Adjusting Expectations One of the things I'm not sure works as intended or that I'm not understanding correctly is how the full site editor works. If I'm understanding this correctly, the changes on the editor should be reflected in the corresponding file I'm editing and vice-versa, right?...
Gutenberg gives you the tools to do pagination visually but, unfortunately, I haven't found a way to customize the pagination tool so that it works the way I want to. There are two different types of pagination in a WordPress-based blog: One for index and archive pages and one for individual posts. Index Page Navigation The pagination layout I ended up using on my site looks like this: html There are some issues with the default navigation. If there is no previous or next post, the remaining content will move. I would rather is remain static and the space be...
Gutenberg presents an interesting way to create and use design systems and present them to the user. I use the following definition of a design system: > A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. > > Design Systems 101https://www.nngroup.com/articles/design-systems-101/ — Nielsen Norman Group I wrote a series of posts on the topic of using Gutenberg as a design system and variations of those design items. Gutenberg as a design system Part 1https://publishing-project.rivendellweb.net/gutenberg-as-a-design-system-part-1/ Part 2https://publishing-project.rivendellweb.net/gutenberg-as-design-systems-part-2/ Part 3https://publishing-project.rivendellweb.net/gutenberg-as-design-systems-part-3/ This post is a review and further exploration of Gutenberg-based design...
@wordpress/create-block create-block for short is a Node package that provides the officially supported way to create blocks. The basic structure the script provides is as follows: tree . ├── build │ ├── block.json │ ├── index.asset.php │ ├── index.css │ ├── index.css.map │ ├── index.js │ ├── index.js.map │ ├── style-index.css │ └── style-index.css.map ├── nodemodules ├── demo-block.php ├── package-lock.json ├── package.json ├── readme.txt └── src ├── block.json ├── edit.js ├── editor.scss ├── index.js ├── save.js └── style.scss The script also installs the @wordpress/scripts package, which is a set of tools to make working with WordPress easier. You can run...
Often we want to create a block with multiple child blocks. For example, block quotes may have lists and other elements nested inside them. Container blocks like the columns blocks also support templates. This is achieved by assigning a nested template to the block. This PHP example creates a block with two items, one of them with additional nested children: A root level paragraph with a placeholder A columns block that will contain one or more children A column An image A column A paragraph php 'Add a root-level paragraph', , array 'core/columns', array, array array 'core/column', array, array array...
Block Styles allow alternative styles to be applied to existing blocks whether they are defined in core or via third-party plugins. They add a className attribute matching the style name to the block’s wrapper.The attribute applies alternative styles for the block if the style is selected. The example registers a narrow-paragraph style for the core/paragraph block. When the user selects the narrow-paragraph style from the styles selector, an is-style-narrow-paragraph className attribute will be added to the block’s wrapper. js wp.blocks.registerBlockStyle 'core/paragraph', { "name": "narrow-paragraph", "label": "Narrow Paragraph", } By adding isDefault: true you can mark the registered block style as...
When working with Gutenberg template parts and templates we have two options: Create them in the full site editor Create them manually using the appropriate markup This post will cover the latter option and will serve as an overview of the markup we need to use to create the templates. Gutenberg template markup is written inside HTML comment tags. This example shows a basic Gutenberg element and its attributes: html The components of the element are: The WordPress prefix, wp: The name of the element, query-title And any attributes as value pairs inside curly brackets, {"type":"archive} The attributes are dependent...
Gutenberg provides additional ways to configure blocks and themes using JSON files one for block levels and one for global theme settings. We'll look at each of these in more detail block.json as a block configuration point The block.json file is both a configuration point what it is and how it works and a way to make the metadata in the JSON file available to both PHP and Javascript. The code below provides metadata for a block that creates a message box for info, warning, and danger notices. json { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "rivendellweb/notice", "title": "Notice", "category": "text",...
One issue that I always found problematic with Gutenberg blocks is that it loads all assets all the time regardless of whether we use them in our projects or not. As of WordPress 5.8, we can work around this to only load the blocks that are used. We define our block as normal. When creating a block we can define separate scripts and stiles for the front and back end using code like the one below: php 'rivendellweb-test-block-script', 'editorstyle' => 'rivendellweb-test-block-editor-style', 'style' => 'rivendellweb-test-block-style', 'script' => 'rivendellweb-test-block-frontend' ; If you then also specify a filter that will only load the...
