In part 1https://publishing-project.rivendellweb.net/?p=790075&preview=true we discussed how to build variations for specific components. We'll now see how we can create templates ready for the user to fill and either use as-is or modify it when needed. Block Templates The first type of template is at the block level. This allows the creation of complex blocks without having to do much on the PHP side. We first import our tools like normal, the i18n utilities, registerBlockType and InnerBlockshttps://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocksREADME.md js import { } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { InnerBlocks } from '@wordpress/block-editor'; We then define our template in...
One of the things I've found the most intriguing about Gutenberg is the ability to create variations of a given element and build the basic components of design systems. From there we can also build what Brad Frost calls molecules, compositions of one or more elements that are used together. This post will explore how to create variations of existing blocks and how to create composite blocks for our end users. The examples below will only work when Gutenberg is in visual mode and will not work in the classic editor or when Gutenberg is in HTML mode. Block Variations...
There are many other things we can do with blocks and things to explore. But for right now we'll move into enhancing the blocks we've built and add some flare to them. Making the editor match the front end Before we look at some enhancements for the blocks, let's make sure that the editor matches the front end content. The match will not be 100%; The way I've set up my theme is different than the way blocks are styled in Gutenberg, but it's close enough to make it not look very dissimilar. The following commands are included in an...
Internationalization We'll take a break from building actual blocks and talk about internationalization or i18n. Taking good care of i18n when you build your plugin will allow you or someone else to translate the text of your plugin so it's easier to use in languages other than the one it was written on It works very close to how the PHP i18n functions work and I believe this is deliberate, just different enough to take the Javascript needs into account. First, we import the necessary functions. Most of the time it'll just be but there are others. js import {...
We've only worked with static content so far. But the idea behind Gutenberg is to let you work with your own content. This section will also introduce the RichText block components as opposed to the plain text elements we've been working with. Editable Blocks The first part of this process is to create an editable block where we can enter arbitrary data that will be saved when we save or publish the post. IN addition to i18n and blocks imports we import the RichText component from the block-editor package. This will do the heavy load in the code below. js...
Whether we like it or use it, the Gutenberg editor is here to stay. While I don't use it for my own content and have developed themes that rely on the classic editor plugins, I realize that any WordPress shop moving forward needs to at least be aware of how to build blocks. It's unlikely that the Classic Editor plugin or other means to disable Gutenberg will remain available past 2022 when the Classic Editor plugin is supposed to stop being fully supported. So this post will cover the creation of Gutenberg blocks and some basic setup in both PHP...
I've been working on a new WordPress theme for a few weeks. Now I'm at the point where I can start worrying about the last finishing touches before I can start dogfooding it. One of the things left in the to-do list is internationalizing the theme. Making sure that it's translated to Spanish and that it is ready for people who want to translate it to other languages to do so. In this post, we'll concentrate on theme i18n internationalization for a theme. Gutenberg and blocks will be discussed in a separate post. Translating Themes For the translations to work,...
Resource hints are a relationship used to indicates that a given origin or resource should be acted upon before they are loaded. Doing this in WordPress is more complicated. While we could add the resources directly to the templates it would require changing the templates whenever we change fonts or any detail of the type of resource hint. The code below is taken from the Twenty Seventeenhttps://wordpress.org/support/article/twenty-seventeen/ theme and with some modifications will work on any theme running on recent versions of WordPress. It requires enqueuing the fonts generated through twentyseventeenfontsurl, which is outside the scope of this post but...
There are times when our applications need to reference information such as languages, regions, scripts, and currencies. Some of these may be easier and some may be hard but either way, we shouldn't hardcode them into the apps themselves, this makes them brittle and harder to localize. Rather than download a fresh copy of the locale data every time there is a change, we can leverage the versions available in JavaScript runtimes. The Intl.DisplayNames API gives JavaScript developers direct access to those translations, allowing applications to more easily display localized names. The following example creates four constants reflecting the languages,...
This is my first attempt in a while to create a fully customized WordPress theme without using Genesis or other theme frameworks. The idea is to use modern web technologies like CSS Grid, Variable Fonts and others to experiment with what it takes to add these technologies to a WordPress theme using Underscoreshttps://underscores.me/ as the starter theme. It is also a playground for working with progressive enhancement, responsive design and how to accommodate multiple screen sizes in the same WordPress theme. Some aspects that I think are important to highlight and also some areas where further work is needed. Variable...
