WordPress is going through the biggest changes in two decades. Completely changed themes. It is still good to know the older process. Complex and custom still uses Php.
The plugin development chapters are still a good place to learn the basics of modern JS and Block types.
New theme folder in the “themes” folder and just like the traditional way the “style.css” file still a thing. Add a theme name in block comment. The “index.php” file still a thing although we leave completely blank.
Create a new “templates” folder. In “/templates/index.html” file. Go ahead and activate the theme.
In “/templates/index.html” file we don’t add any html (this will break the theme).
What do we add are “wp-style” html comments and blocks.
<!-- wp:paragraph -->
<p>Hey There...</p>
<!-- /wp:paragraph -->How do we do edit the new theme in the full site editing way? Go to Admin > Appearance > Editor. Add and heading under the paragraph text from the editor and you will not see the “/templates/index.html” file update.
You can see the post in “Adminer” (Database if using local by flywheel). if you find the most recent post you will see the headline is added.
Can copy/paste or from the editor, export a zip file with the generated code.
What is in this file is a safe home base you can revert back to. Admin>Templates>Clear customizations.
But what if you don’t want to write your code in this file.
Seemingly same template names just as html files so you can add “single.html” and “single-whateverPostType” in the templates folder.
Add data from the database from the editor. Example, site name using “/post-title” block. We can use blocks like “/post-title” and “/query-loop” block to show the 5 most recent blog posts.
The list view sidebar is helpful to manage nested blocks.
Does the query loop block mean we never have to write Php again? This block is incredibly basic and cannot build more powerful queries with it. No relationships or meta values. An example: Event date compared to today’s date. Php is not against the law in full site editing. It won’t be any faster if you don’t use Php. WP still uses Php behind the scenes. We will create our own custom block types ourselves.
If take a look at the default 2022 theme it doesn’t use any custom php but the theme is very basic and uses no customization. Only default core blocks.
This approach is using WP as more of a design tool than a content management system.
What is a theme in this new era?
A closer look at default 2022 theme.
Nothing wrong with this approach. Using WP as a page builder using core blocks will be wonderful for some people. But no guidance/teacher really needed on how to create these types of themes. Open the editor and get started. No complexity of any variety in these types of themes.
Majority of code in the 2022 themes is in the includes folder in “patterns/html” file. What are block pattern? They are presets for blocks. Think of them as a tab trigger snippet in your code editor. The code shows they are just different configurations of core WordPress blocks.
The problem with patterns
No reference to the pattern, 700 posts and pages use a pattern there is no way for a developer to make changes and have it affect all instances.
Common Concerns
Don’t want to be 100% married to core WP blocks.
Don’t want to be 100% married to the WP style system. maybe you want to use bootstrap or Tailwind CSS or use SASS and use your own CSS.
Need custom queries that the basic query-loop block doesn’t support (custom meta, complex relationships)
Maintainability. Would rather separation of data and design instead of those being mixed.
Brad will rebuild the fictional-university site but admits the simplistic design could be recreated with core blocks.
Get the admin side of the block squared away.
A choice on which way to develop custom blocks. If you are going to distribute your theme to a lot of people then you do not want to code your blocks in your theme but instead make your blocks available as a plugin. If the theme will be custom to one site, or a “bespoke” single client theme, then code up your custom blocks in the theme.
We will take the later approach for the sake of simplicity. See the other chapters and leverage those concepts if you need the plugin route.
Create an “our-blocks” folder and inside a “banner.js” file
wp.blocks.registerBlockType("ourblocktheme/banner", {
title: "Banner",
edit: EditComponent,
save: SaveComponent
})
function EditComponent() {...}
function SaveComponent() {...}Open the “fictional-university-theme” in a second VSCode window.
Copy/Paste/Tweak. Convert PHP to JS.
Create an “images” folder.
Set up the transpilation of code.
Move over the “function.php” and “package.json” files.
Modify the start script in the “package.json” file
"start": "wp-scripts start src/index.js our-blocks/banner.js"In the “functions.php” file
function bannerBlock() {
wp_register_script('bannerBlockScript', get_stylesheet_directry_uri() . '/build/banner.js', array('wp-blocks', 'wp-editor'))
register_block_type("ourblocktheme/banner", array(
'editor_script' => 'bannerBlockScript'
))
}
add_action("init", "bannerBlock");But this is missing our styling but this is a quick fix. Add theme support to the function that is calling similar functions. One global CSS file. Will not apply to the editor itself.
We can now add an instance of our banner block but we want to be able to edit the text with maximum flexibility.
How to set up a block to have nested blocks? Inner Blocks.
//banner.js
import {InnerBlocks} from @wordpress/block-editorLeverage the <InnerBlocks/> component in the “EditComponent” Function.
In the “SaveComponent” function, leverage <InnerBlocks.Content/>
We can now add core blocks and save. Sweet!
We can also restrict which block types are allowed by adding an “allowedBlocks” prop.
Create a new custom block we can nest inside.
Going to create a lot of custom blocks so create a reusable php class.
class JSXBlock {
function __construct($name) {
$this->name = $name;
add_action('init', [$this, 'onInit']);
}
function onInit() {...}
}
new JSXBlock('banner')
new JSXBlock('genericheading')Create a new “genericheading.js” file and copy some code form “banner.js” file. Add to “start” script in “package.json” file.
Ca convert register block type to use import syntax.
In “genericheading.js” file.
Add attributes to “registerblocktype”
Use component WP provides called “richtext” by importing and using in JSX as a component.
You can adjust the toolbar. Super Cool!
Import “BlockControls” and to ad buttons to the toolbar, import “ToolbarGroup” and “ToolbarButton” as well.