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...
As part of the Full Site Editing FSEhttps://developer.wordpress.org/block-editor/getting-started/full-site-editing/ experience, templates and page templates give you a way to prepackage blocks similar to what variations do and full-page templates for the theme. Templates and page templates currently require the Gutenberg pluginhttps://wordpress.org/plugins/gutenberg/ and will not run in WordPress Core right now, that will change sometime during the 5.9 development cycle. To understand the block template and block template parts work let's look at the structure of a block-based theme. text . ├── LICENSE ├── README.md ├── assets │ ├── css │ ├── images │ └── js ├── block-template-parts │ ├── footer.html │...
Now that WordPress 5.9 is close to release, we can revisit the Gutenberg full site editing experience since more of it will be baked into core rather than the Gutenberg plugin. I'm not a fan of full site editing just like I'm not completely sold on Gutenberg as an editor even after a few years. But, since the market is moving in this direction, I believe that developers should be aware of Gutenberg and the FSE to provide guidance on the optimal approach to the client's project. I've been reading and researching the latest improvements to the FSE experience and...
The other side of the argument is that we've let the web become boring. We've lost the whimsical designs from the early days. Examples like the Space Jam website, from 1996, show what earlier websites looked like: !Space Jam website, circa 1996https://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/space-jam-website As much as some of us hated it, tables for layout had their use : Dave Ellis' All Websites Look The Samehttp://www.novolume.co.uk/blog/all-websites-look-the-same/ and Sarah Drasner's In Defense of a Fussy Websitehttps://css-tricks.com/in-defense-of-a-fussy-website/ ask two different but related topics: the sameness of our websites and the need for some level of whimsy on the websites we build. It doesn't have...
Doing web development used to be simple. All we needed was a text editor and either good knowledge of HTML, CSS, and Javascript or bookmarks on your browser pointing to Eric Meyer’s CSS resources on the CWRU server and links to the best tutorials you could find about CSS and Javascript with the differences for each browser and how to branch the code to accommodate each browser’s idiosyncracies. Those days are long gone. Reading David Rupert’s The tangled webs we weavehttps://daverupert.com/2020/09/tangled-webs/ reflected some of my own struggles when working with existing projects. But even when working on our projects, starting...
I've told myself for a while that I would learn how to write and use tests for front-end code. Most of the code and tutorials I've seen are written for backend code. But using tools like Playwrighthttps://playwright.dev/ together with Mochahttps://mochajs.org/ and the Chaihttps://www.chaijs.com/ assertion library we can build very robust testing for front end code that works in multiple browsers. Background: Playwright Playwright is Microsoft's browser testing and automation library. It allows you to control a browser: Chrome, Firefox, or Safari WebKit and perform operations as if you were working on the browser directly. Because we support multiple browsers we...
In Do you know where your third parties are going?https://publishing-project.rivendellweb.net/do-you-know-where-your-third-parties-are-going/ we discussed part of the problem: How to measure the additional impact these scripts have on our site's performance when they add more scripts that may block rendering? This post will cover some additional concerns I have with third-party scripts. We need to evaluate third-party libraries for use in our applications. This doesn't mean to only look at the code and decide which one you like best but it also means to test the code in your application and see which library or script works best in your specific situation....
The idea of a performance budget is to set the performance goals for the site. What is a performance budget? There are multiple definitions of what's a performance budget. According to Performance budgets 101https://web.dev/performance-budgets-101/: > A performance budget is a set of limits imposed on metrics that affect site performance. This could be the total size of a page, the time it takes to load on a mobile network, or even the number of HTTP requests that are sent. From Performance Budgets That Stickhttps://timkadlec.com/remembers/2019-03-07-performance-budgets-that-stick/: > A performance budget is a clearly defined limit on one or more performance metrics that...
