The Torque Social Hour is a weekly livestream of WordPress news and events. On this episode of the Torque Social Hour, we talk with Matt Medeiros, the founder of the WP Minute and WordPress Community Lead at Gravity Forms.
We’ll talk about what it’s like podcasting about WordPress and some big changes happening at the WP Minute.
Join us next each Wednesday from 3-4pm PST for WordPress news and interviews.
With this chapter on Cumulative Layout Shift, we are nearing the end of our miniseries on Core Web Vitals for WordPress users. In the earlier chapters on Largest Contentful Paint and First Input Delay, we already talked about what exactly those terms mean and how to optimize your website for each of them. Now, we want to do the same for CLS.
In the following, we cover what exactly Cumulative Layout Shift is, how it’s calculated, how to test your website for its performance in this area, and what’s a good value to aim for. After that, we give you step-by-step instructions for tackling any CLS problems that might exist on your WordPress site to improve upon them.
When finished, together with the other two posts in this series, we hope that you feel ready to make your website fit for Google’s stamp of approval.
What is the Meaning of Cumulative Layout Shift?
As usual, let’s start off with a definition. In one sentence, CLS measures when something changes on a web page that causes the elements on it to move (or shift if you will) without a user interaction.
It can be that a form or an ad in the article you are reading loads late and moves down the paragraph you are reading so you have to scroll to find your place again. Or worse, it changes the position of a button or link at an inopportune moment so you end up clicking something you didn’t want to.
Consequently, it can be anything from mildly annoying to outright infuriating. Cumulative Layout Shift is the metric that captures this behavior in order to understand the problem so you can correct it.
Why Is It Important?
A jumpy website completely disrupts what you are currently doing and might even have annoying real-life consequences. As you can imagine, that’s really bad for user experience and can cause visitors to leave. This is especially true on smartphones where, due to the screen size, small shifts have a bigger impact than on desktop machines.
Because it’s so disruptive, Google puts a lot of focus on this metric, making it one of the core values that it judges websites by. So, if you want to please both your visitors and the people (I mean, robots) that decide where you appear in search results, do your best to eliminate Cumulative Layout Shift on your website.
What Causes CLS?
The cause of shifting website elements is usually because a web page’s files load at different speeds. Another factor are page elements that are added dynamically during or after page load. Typical examples include:
Visuals like images or videos without correctly defined dimensions
Third-party content like ads, banners, embeds, or iframes
Web fonts that are smaller or bigger than the initially shown fallback fonts
Another source of CLS can be conflicting CSS and JavaScript markup. When they block each other, it stalls the loading process of web pages.
How Is Cumulative Layout Shift Calculated?
In contrast to its predecessors, the calculation of Cumulative Layout Shift is a bit more complicated. To understand it, we need to settle on some terms first:
Layout shift — That’s when an element already visible on the page moves from its starting position after already being rendered. These kinds of elements are called unstable elements (creative, I know).
Expected vs unexpected layout shifts — Layout shifts are only negative if the user isn’t expecting them. There are also layout shifts that are expected and welcomed, such as after an interaction with a web page (e.g. submitting a form). CSS animations and transitions are other examples for expected layout shifts. To account for that, CLS considers all layout shifts that happen within 500ms of a user interaction to be expected.
Impact fraction — The percentage of the viewport (the visible part of the website on screen) that a moving element impacts as decimal number (e.g. 0.5 if it impacts 50% of the screen).
Distance fraction — Distance as the percentage of the screen that an unstable element moves during a shift. Also given as a decimal number.
Layout shift score — This is calculated by multiplying the impact fraction with the distance fraction (e.g. 0.4 x 0.15 = 0.06). As a consequence, large elements that move a large distance result in a higher score than small elements moving a short distance.
CLS captures the largest occurrence of unexpected layout shift scores during a five-second interval. Obviously, lower is better.
In the end, you don’t really need to know the specifics. All you need to know is how to measure CLS and what value your site should strive for.
What is a Good Layout Shift Score?
A good score is to have a CLS value of 0.1 or less. Up to 0.25 needs improvement, anything above that is bad and will likely result in reduced search performance.
How to Test Cumulative Layout Shift
In order to be able to improve the CLS score on your website, you first need to know where you stand. It’s difficult to know if it even happens, because web pages don’t always behave the same way on different devices. Therefore, you may not see it on a development site but visitors can still encounter it. For that reason, it’s best to test it.
There are several ways to check if Cumulative Layout Shift is a problem on your WordPress site. They are pretty much the same as for the other Core Web Vitals metrics. Your first port of call should always be PageSpeed Insights, which shows the metric on its results page.
Note that it uses both lab results as well as real-life data from the Chrome User Experience Report. It even shows images of the layout shifts and the source element. That way, you have a better idea what the problem is and where it occurs.
Additionally, PageSpeed Insights gives you the ratio of how much each element contributes to the CLS score. This allows you to prioritize what has the biggest negative impact.
There is also a Chrome extension called CLS Visualizer. It highlights shifting elements on your web pages. For Firefox, try SpeedVitals.
How to Reduce Cumulative Layout Shift on Your WordPress Site
If you notice that CLS is a problem on your WordPress site, you probably want to fix it. This is what the rest of this article is all about.
Provide Media Dimensions
A lot of solutions already become clear when you have a look at the causes Cumulative Layout Shift above. As mentioned, one common culprit of CLS are images and other media without defined width and height values. Without fixed dimensions, the browser doesn’t know how much space to reserve for them. That’s especially true for media appear on the page later, such as in lazy loading.
Unfortunately, it’s common practice of responsive design to not give specific image dimensions. Most often, images are set to width or max-width: 100%; and height: auto;. Then it’s up to the browser to figure out what the actual dimensions are when it downloads the image.
In the past, that often led to exactly the type of behavior we are trying to avoid. Images suddenly popped into existence, moving everything else around. Therefore, you should always provide dimensions for your visuals or at least a CSS aspect ratio.
Fortunately, if you are using WordPress, your website automatically sets image dimensions. Therefore, the problem usually does not come into play.
If that is not the case for a specific image, you can correct this in the Gutenberg editor.
Dealing With Ads, Embeds, and Similar Content
Third-party content loaded into pages is often one of the biggest sources of CLS. These are cases where you are not necessarily in control of the size of the end product. Nor do its publishers know in advance how much space is available on the site it appears on. Therefore, you need to declare its size the same way as for images.
Fortunately again for WordPress users, when using the Gutenberg editor to auto-embed content from social networks, video portals, or similar vendors into your content, the editor automatically adds appropriate width and height declarations.
That way, even if the content takes longer to load than rest of the page, it already has its correct size reserved. As a consequence, the layout doesn’t shift around when it appears.
For other types of content that you add manually, be sure to add width and height by hand. If you don’t know the exact height that an ad or other element will take, at least add a min-height property to it. That still allows for larger elements but reserves some space and can eliminate or at least reduce CLS on the page.
Another technique to minimize Cumulative Layout Shift in WordPress for third-party content is to avoid placing it high on the page. The higher up it is, the more content below it can push down, and the higher your CLS score. Therefore, if you can, place it in the middle or bottom.
Optimize Dynamic Content
Dynamic content are page elements that gets added to a page after it has already been loaded. The example before were lazy loaded images but it typically also includes stuff like banners, forms, or even related products that show up on scroll.
Naturally, if you don’t properly plan for those, it can also leads to layout shifts. Here are some ways to avoid that:
Reserve space beforehand — Similar to the above, if you have a container with a fixed size that you can load the content into, it keeps the layout steady even if it comes in later. A fixed container can also be a carousel or something similar.
Connect it with a user interaction — If content loads dynamically after a user action, it carries no penalty for CLS, even if the layout shifts. Keep in mind the 500ms cutoff though.
Load content off screen — If you load content outside of the viewport and then provide the user with a notice that it’s available and an option to scroll to it, there is also no CLS. Social media platforms like to do that for new updates.
Improve Web Font Handling
Web fonts can also cause layout shift. The two common forms are that you either see unstyled text first before the web font comes in (Flash of Unstyled Text or FOUT) or see no text at all at first and then it comes in together with the web font (Flash of Invisible Text or FOIT).
Both can lead to layout shifts and here is what you can do about it:
Use the right font format — If you load custom fonts into your WordPress website, be sure to use the WOFF2 or WOFF format. Those have the smallest footprint, load the fastest, and help avoid the problems above.
Use the right fallback font — If you are using a fallback font that is very dissimilar to your actual font, the moment the switch happens will likely to lead to layout movement. You can avoid that by using a fallout font that is close to the end product. The Font Style Matcher can help you find one.
Preload fonts — Place web font resources early in the document and add rel=preload to them. That way, browsers will prioritize them.
It also helps to host fonts locally or at least use a CDN to make them available to users as fast as possible. That way, you reduce the likelihood of switching fonts late during load and causing layout shifts.
Don’t Let Cumulative Layout Shift Throw Off Your WordPress Site
Cumulative Layout Shift is one of three metrics that Google regards as vital and the last one in this in-depth series. It’s an important indicator for user experience as it measures the stability of page layout during and even after loading.
Like the other metrics in Core Web Vitals, it not only matters to users but also counts toward search ranking and is therefore important for the success of your website.
By now, you know what it is, how it is calculated, what’s causing it, and how to test and deal with it. May your layout forever be solid, my friend.
Do you have additional tips for how to prevent Cumulative Layout Shift in WordPress? Let us know in the comments below!
The Torque Social Hour is a weekly livestream of WordPress news and events. On this episode, we talk with Birgit Pauli-Haack, a sponsored Core Contributor. We’ll talk about the big changes coming to WordPress 6.3 and to Gutenberg.
Join us next each Wednesday from 3-4pm PST for WordPress news and interviews.
When WordPress 5.0 was released in late 2018, it came with a brand-spankin’-new block editor known as Gutenberg. In contrast to the Classic Editor, which was far more reliant on manual code, the block editor offers a modular approach to page and post editing making each piece of content in the editor—from a paragraph to an image gallery to a headline— its own editing block.
WordPress presents a larger barrier to entry for some, and the Gutenberg Editor was created to make building and updating site content easier. With WordPress 5.0, the block editor was absorbed into WordPress core, and WordPress development has been optimized for Gutenberg’s use ever since.
Additionally, the team behind Gutenberg has continued to make massive strides both for user interface and design-facing capabilities.
Staying informed on Gutenberg’s latest updates is advantageous for designers, developers, and anyone else who wants to keep their WordPress game sharp. The Gutenberg team is constantly refining the block editor with new version releases to improve the experience, so check back every few weeks for what’s new in Gutenberg!
This version update was released on July 14, 2023.
The weather isn’t the only thing heating up this July. Gutenberg 16.2 allows users to use footnotes, consolidate patterns, and more.
Highlights of Gutenberg 16.2 include:
While footnotes were added in 16.1, they’ve been optimized in 16.2. Not only are they more reliable, you can now add the block manually in case you delete them.
Using the Typography setting in a text block, you can change the way the text is oriented. This is a step toward supporting vertically-written languages.
The Patterns section is more intuitive than ever before. Users can now see a Pattern’s sync status right in the sidebar.
Other highlights include the Command Tool being renamed The Command Palette, the “Browse All†button in the quick inserter has been restored, bug fixes, and much more.
Check out the official release post to see what else Gutenberg 16.2 has to offer.
Gutenberg 16.1
This version update was released on June 29, 2023.
72 contributors worked on this massive release. Let’s get into the highlights from Gutenberg 16.1.
Highlights of Gutenberg 16.1 include:
Access all your patterns directly from the new Pattern Library and sync them across your entire site.
We previously had a “Distraction Free†Editing experience but now you can design without distractions. Cut out all distractions and get your work done.
A very exciting update introduces automatic footnotes. You can find them in text blocks including paragraph, heading and lists, and can be added from the block context menu.
This is a massive update leading Gutenberg into the future and beyond. It also comes with bug fixes and other performance enhancements.
Check out the official release post to see what else Gutenberg 16.1 has to offer.
Gutenberg 16.0
This version update was released on June 14, 2023.
Gutenberg 16.0 provides a glimpse into upcoming features that will soon be integrated into core WordPress, coinciding with the release of WordPress 6.3 Beta 1.
Highlights of Gutenberg 16.0 include:
Users now have the ability to create new pages and access page details through the sidebar. This empowers website creators to efficiently build their sites within the Site Editor, eliminating the need to switch between editors.
Previously, theme authors had to resort to custom CSS for controlling block spacing within the Post Template block, which is part of the Query block. However, Gutenberg 16.0 introduces block spacing and layout controls directly within the Editor. This improvement enables easier management of the space between posts, empowering theme authors with more flexibility.
Initially introduced as an experiment in Gutenberg 15.6, the Details block has undergone revisions and stabilization based on community testing and feedback. In Gutenberg 16.0, this block employs <details> and <summary> HTML elements to conceal content until readers are ready to view it. Users can also configure the visibility of content as per their preferences.
Gutenberg 16.0 includes a wide array of additional enhancements and bug fixes.
Check out the official release post to see what else Gutenberg 16.0 has to offer.
Gutenberg 15.9
This version update was released on May 31, 2023.
Gutenberg 15.9 includes several exciting features that improve the Site Editor user experience.
Highlights of Gutenberg 16.0 include:
Gutenberg 15.9 introduces a new, yet-to-be-named Command Tool, which allows for enhanced navigation and content creation within the Site Editor. You can access the tool by opening the Site Editor and using the keyboard shortcut Cmd+k on Mac or Ctrl+k on Windows. Once opened, you’ll have access to a variety of different commands that enable swift actions and interactions. You can also customize the tool by adding your own commands. Detailed documentation is available here.
Users can now resize the Site Editor, allowing you to preview how your site will appear on smaller screens (i.e. mobile devices). This feature helps optimize your site’s layout for various screen sizes.
When moving blocks, you will now experience a visual cue that clearly indicates the drop location, especially when working with empty groups. This enhancement streamlines the process of rearranging your site’s layout, making it more intuitive and efficient.
You can now access style variations and all navigation menus of your site. This enhancement simplifies the process of switching between different styles and menus, providing a convenient interface to make adjustments effortlessly.
Gutenberg 15.9 also includes the introduction of an API that allows for prioritizing inserter items, better accessibility through arrow keys in certain input types, keyboard focus improvements for enhanced accessibility, and numerous bug fixes..
Gutenberg 15.8 introduces a range of improvements that enhance the user interface (UI) and user experience (UX) for content creators, site owners, and theme developers.
Highlights of Gutenberg 15.8 include:
The site editor now provides direct access to the ten most recently updated pages, allowing users to jump straight into editing them. This step is part of our exploration to reintroduce the ability to edit content directly from within the site editor. This enhancement aims to streamline the editing process and improve efficiency.
In the global styles interface, users can now navigate through revisions and explore how the site appeared at different points in time. The revisions timeline displays saved changes along with timestamps and author information. This feature empowers users to review and compare previous versions of their site, facilitating better decision-making and content management.
Previewing different themes has become more convenient with the introduction of the theme_preview parameter. Users can now preview how their site would look with different themes directly within the site editor. This capability simplifies the process of selecting the perfect theme, ensuring a seamless and visually appealing site design.
Gutenberg 15.8 introduces additional bug fixes, improvements to responsiveness, and more.
Gutenberg 15.7 comes with a number of small yet impactful changes aimed at improving workflows, fixing bugs, and enhancing responsiveness.
Highlights of Gutenberg 15.7 include:
To streamline creator workflows, the Site Logo block now offers a direct method to replace the logo within the sidebar for the block. Although it may seem like a minor feature, simplifying the management of a site’s branding identity is crucial and warrants an easy and intuitive process.
The inclusion of duotone filter controls in the block sidebar represents another step in streamlining workflows. Previously, these controls were hidden within the Block Toolbar, but now they are readily available alongside the style settings in the sidebar.
While fluid typography was introduced with WordPress 6.0, users and designers encountered challenges with large custom fonts, as the previous fluid calculation didn’t scale down sufficiently for smaller screens. In this release, a more refined handling of fluid typography has been implemented using a logarithmic scale factor to calculate a minimum font size for smaller screen.
Gutenberg 15.7 includes a ton of additional highlights, enhancements, bug fixes, and more.
This version update was released on April 5, 2023.
This release comes with a ton of user-facing updates and great news for theme editors. Let’s take a look at what’s inside Gutenberg 15.5.
Highlights of Gutenberg 15.5 include:
Users can now create new templates from theme-registered template patterns. This greatly improves customization.
Caption editing has been integrated into the Site Editor so you can change caption styles without using code.
A brand new experimental layout type has been added in 15.5. Though it only supports column width, it creates the foundation for more future configuration options.
This version update was released on December 7, 2022.
We are nearing the end of the year but that hasn’t slowed down the Gutenberg developers! Gutenberg 14.7 is better than ever. Let’s take a look.
Highlights of Gutenberg 14.7 include:
The block inspector now separates appearance and settings controls by tabs in this experimental sidebar view.
Add videos and images directly from the inserter. Add a block, toggle over to Media and then choose your image or video. Just like that.
Template and Reusable Blocks will now be outlined in a different color making them easier to identify.
All these updates make it easier to design and create content quickly. The update comes with these and an array of bug fixes and other performance enhancements.
This version update was released on November 23, 2022.
This is a gargantuan update with a lot of features to get through. There are a number of design and block updates.
Highlights of Gutenberg 14.6 include:
Upon picking the Group Block, you are given the option to pick a layout. This way you don’t have to format after putting in content.
You can now drag items in the Navigation Menu. Want to move your About Me page above Contact Me? Do that quickly right from the sidebar.
Looking for a rebrand? Try out the “Randomize colors†feature to get a random color palette just for your site.
This just scratches the surface of what Gutenberg 14.6 brings. You can also define a minimum height, adjust your fluid typography minimum and maximum, and more.
This version update was released on November 9, 2022.
Gutenberg 14.5 adds a ton of design functionality making it easy to customize every part of your site. Let’s dive in.
Highlights of Gutenberg 14.5 include:
Quickly toggle between List View and Document Info all in one place. The Details popover and List View have been combined making it easy to see your entire post at a glance.
It has always been difficult to customize margins and padding in WordPress. Gutenberg 14.5 added improved visualizers that allow you to change margins with a slider.
Just like with the Image block in 14.4, a button was added to the Audio and Video blocks that allow you to quickly add a caption.
These updates along with big fixes and more performance enhancements allow you to take more control of your website with Gutenberg 14.5.
This version update was released on October 12, 2022.
Gutenberg 14.3 continues the march toward Full Site Editing with design and UX enhancements. Let’s get into it.
Highlights of Gutenberg 14.3 include:
In huge news, you can now drag and drop an image into a paragraph block to turn it into an image block. This is a massive time saver.
The Styles interface is now consistent with the Block Settings interface.
New keyboard combinations make it easier to navigate big blocks of text. Use alt + up arrow or alt + down arrow to move your cursor through blocks of text.
The writing flow has been greatly improved in Gutenberg 14.3. You can drag and drop and navigate your way through your post to make editing and designing a dream.
This version update was released on September 28, 2022.
The latest version of Gutenberg improves the writing flow, letter spacing in headings, and more.
Highlights of Gutenberg 14.2 include:
Big improvements have been made to the writing flow such as making selecting multiple blocks visually consistent and hiding the block inserter to clear up clutter.
In the Global Styles interface, you can modify letter spacing in headlines.
You can now edit the background color and text color of the Calendar Block.
This version update was released on August 3, 2022.
The latest version of Gutenberg comes with accessibility updates, block updates, UX enhancements, and much more.
Highlights of Gutenberg 13.8 include:
Fluid typography got more support in 13.8. This allows text to scale and adapt to any screen size.
New template parts have been added including “Header,†“Footer,†and “Subscribe to Newsletter†sections. You can also now search for the template part you’re looking for.
Gutenberg 13.8 includes big accessibility updates such as keyboard-friendly clickable elements in the “Add template†modal and improved and consistent labels in the Editor.
Other updates include the consolidation of the Post Comments and Comments block, new settings for full-width content in the theme, bug fixes, and more.
This version update was released on July 20, 2022.
This was a massive release with 127 pull requests. Lots of features were added. Let’s get into it.
Highlights of Gutenberg 13.7 include:
Lock settings were updated in 13.7. For Group, Cover, and Column blocks, you can choose to lock with just the toggle of a button.
You can now create templates for specific categories and pages. For example you can have one template for a product page, one for a calendar, and one for a blog.
The Information Panel now excludes a “Time to Read†readout beside word count and character count.
Performance was the focus of Gutenberg 13.6. There were enhancements for accessibility and development with Gutenberg.
Highlights of Gutenberg 13.6 include:
This update works with an API introduced in WordPress 6.0 that allows you to provide patterns for any post category. This is going to cut design time in half, especially with clients.
Directly from the editor, you can now create more template types. You don’t need to know post type identifiers or post slugs.
The theme.json engine that was updated in 13.4 has been expanded to allow you to create a cohesive theme across all your blocks. You can fully control all block styles.
This was a jam-packed update with added keyboard shortcuts, bug fixes, performance enhancements and more.
This version update was released on June 22, 2022.
Gutenberg 13.5 improves the featured image UX, expanded design tools, and some accessibility updates.
Highlights of Gutenberg 13.5 include:
When using the Cover Block to add a Featured Image, a placeholder now displays so you can get a better idea how much space the image will take up. Also when you hit “Replace†on an image block, there’s a drop down option to add the Featured Image.
A huge update to the Post Navigation Link allows you to customize your link color.
Context was added to the Edit/New buttons increasing accessibility.
Along with these updates, there were 15 bug fixes and 12 performance enhancements. All of which add customization.
WordPress 6.0 “Arturo†is out and Gutenberg 13.4 just builds on that momentum! Let’s look at what changed.
Highlights of Gutenberg 13.4 include:
The sidebar got a rework with Gutenberg 13.4. The Publish popover has a new look that’s easier to understand. The color-picking interface now uses the ToolPanel.
The Gallery Block now supports axial spacing, so you can add space on either side of an image or on the top and bottom.
A huge update is that Themes can now add buttons using theme.json.
Gutenberg 13.3 has a long-awaited update, a Table of Contents block. This and a variety of other enhancements makes this a very exciting update.
Highlights of Gutenberg 13.3 include:
You can now display custom taxonomy terms in the Post Terms Block. This allows the user to add things like product categories to a post.
The Query Loop Block now supports a “parent†filter so you can see any of the children content defined for that parent.
The new Table of Contents Block works like a charm by automatically finding all the headers and automatically adding them with anchor links. This is such a time saver.
This update puts the focus on the editor and makes things easier. Along with bug fixes and other performance enhancements, Gutenberg 13.3 is a big one.
The Comment Block got a tune up as well as a brand new API in Gutenberg 13.2.
Highlights of Gutenberg 13.2 include:
The placeholders for the post excerpt, post comments, and post comment form have been greatly improved and look more realistic.
Padding and margins now have much greater customization. As you adjust them, they highlight in blue so you can see exactly what you’re changing.
A new API was created that allows you to save your editor preferences so your experience looks exactly the same on any browser or any device. This is incredibly exciting because you can edit no matter where you are.
Gutenberg 13.2 is a huge step forward in Full Site Editing. The Separator Block supports top and bottom margins, bugs to the Comment Block have been fixed, and more.
This version update was released on April 27, 2022.
Gutenberg 13.1 comes with updates to important blocks as well as numerous performance enhancements.
Highlights of Gutenberg 13.1 include:
The Columns Block got a huge facelift with this update. You can now customize the width and color of borders within columns.
The Comments Block also got an update including a better view of nested comments.
Most notably, a variety of accessibility updates were made including closing the welcome dialogue in the post editor, installing blocks from the directory, and more.
A lot of work was done in Gutenberg 13.1, so thank you to all the new contributors who helped make it happen.
This version update was released on April 14, 2022.
This is a loaded update because it has all the features that will be released with WordPress 6.0. Blocks are more responsive, the Editor has been improved. Let’s get into it.
Highlights of Gutenberg 13.0 include:
In a huge relief to editors and writers everywhere, you can now select text from different blocks. No longer do you need to delete and edit one block at a time.
The Cover Block has been updated and you can now view your featured image and headline in one place before publishing.
Patterns are here! Staring at a blank page can be very intimidating, but now you can plug in a pattern and start designing immediately.
Like we said at the top, this release has a lot to cover. Along with these highlights there was also the ability to build responsive groups, rows, and stacks. Increased customization for borders and columns. Bug fixes, performance enhancements, and more.
This version update was released on March 30, 2022.
Gutenberg 12.9 introduces several features that provide greater flexibility and ease of use for both theme developers and website administrators.
Highlights of Gutenberg 12.9 include:
The new block locking UI introduced in Gutenberg 12.9 allows you to disable specific actions for locked blocks. When a block is locked, users are prevented from moving or removing it. This is particularly useful for site-level blocks like Post Content, which many themes may want to restrict.
You can now adjust the whitespace, allowing for zero spacing or large art-gallery-style gaps. This feature enables the creation of beautiful and unique layouts using blocks.
Previously, the Site Editor had limited options for creating new templates. Now, you can create templates for various page types on your site, including Category, Author, Taxonomy Date, Tag, and Attachment pages.
When exporting a theme from the Site Editor, all theme files are now included, simplifying the process of exporting themes between sites along with all edits. This update is a significant step towards creating new themes directly from the Site Editor. Additionally, including patterns with your theme is now effortless and doesn’t require any PHP coding. You can simply include patterns in a patterns folder, similar to how templates and parts are organized.
In the List View, you can now use the Shift + Home and End keys for multi-block selection, facilitating the selection of blocks from a specific point to the beginning or end of a post.
Gutenberg 12.9 includes several additional enhancements, such as displaying the name of custom colors in the color palette selection, providing more precise font size control for tag clouds, enabling easy previewing of drafts right after saving, and offering the option to choose suggested or custom date formats.
With these updates, Gutenberg 12.9 empowers users with enhanced control, improved defaults, and more intuitive options for creating engaging content with blocks and block themes.
This version update was released on March 16, 2022.
Gutenberg 12.8 comes with new APIs, iterative UX enhancements, and numerous bug fixes to enhance the stability of the editor.
Highlights of Gutenberg 12.8 include:
The new Webfonts API represents a significant step towards loading fonts in a performance-friendly, privacy-conscious, and future-proof manner. The API also paves the way for additional tools and optimizations that will ensure WordPress delivers the best possible experience and privacy to users.
Inline links can now be inserted using a direct keyboard shortcut. If you thought the slash inserter was fast, you’ll be impressed with the new [[ keyboard trigger, which allows you to add an inline link without navigating through the inserter.
When using the export tool in the Site Editor, the generated zip file now includes the theme.json file, which contains the Styles settings, along with the index.php and styles.css files..
Gutenberg 12.8 further refines placeholder and loading states. The Navigation block now provides a clear loading state during initial setup and subsequent loading of existing blocks.
As WordPress continues to evolve, Gutenberg 12.8 also comes with valuable enhancements and bug fixes to enhance the editing experience.
This version update was released on March 2, 2022.
Gutenberg 12.7 introduces new features that make working with patterns even more convenient and user-friendly.
Highlights of Gutenberg 12.7 include:
The block quick inserter now prioritizes patterns over blocks in specific conditions. When editing a template in the site editor or post editor, and the inserter is at the root level between other blocks (not as the first or last block), patterns will be given priority.
The creation flow for template parts like Header, Footer, and Sidebar now also includes patterns, providing a smoother experience for adding complex designs.
Themes now have the ability to highlight specific patterns to their users. By adding a pattern field to the theme.json file, themes can recommend patterns to enhance the user experience. When accessing patterns from the Pattern Directory, their slugs can be found in the URL when browsing individually.
Gutenberg 12.7 includes a few other noteworthy improvements. Columns blocks now have the option to add border styles, while Group blocks can have margins applied. These additions offer greater design flexibility. Additionally, to address backward compatibility issues reported in WordPress 5.9, the automatic anchor generation for headings introduced in Gutenberg 11.8 is now an opt-in feature. Developers can enable this feature by adding the provided code snippet to their settings:
This update also improves the ListView functionality, introduces frontend HTML changes, and includes various iterative enhancements for a more refined block editor experience.
This version update was released on February 16, 2022.
Gutenberg 12.6 introduces a long list of updates, including numerous design enhancements to the block editor as well as accessibility improvements.
Highlights of Gutenberg 12.6 include:
Following the pattern set by Gutenberg 11.9 and Gutenberg 12.2, which incorporated the ToolsPanel component for typography tools and border controls, this update brings the ToolsPanel to the color sidebar. Users can now expand and collapse Text, Background, and Link colors in different contexts, improving the color editing experience and aligning the controls with other design tools.
Two new blocks have been introduced in 12.6. The Post Author Biography block is part of an ongoing effort to separate the existing Post Author block into its individual components. The Read More block provides a simple way to link to a specific page or post within the Query block.
Certain styles like color and font size are now retained when transforming between blocks. Furthermore, new block transforms have been added, such as converting Tag Cloud to Categories, Calendar to Archives, Paragraph to Code, and Group to Row variation.
The editor now includes an error boundary specifically for plugins, enhancing its resilience against plugin-related issues. Beginning with Gutenberg 12.6, plugin errors are displayed at the top of the editor, providing users with information on which plugins are causing the problem.
Building on the accessibility improvements made in Gutenberg 12.4, the List View is now more accessible for keyboard navigation and screen readers. Other accessibility improvements include VoiceOver now reading placeholder descriptions and search results in the block manager being announced.
This update also includes numerous enhancements and bug fixes for the Block Library, Components, and more.
This version update was released on February 2, 2022.
Gutenberg 12.5 comes with some excellent improvements meant to expand on existing functionality and help streamline workflows.
Highlights of Gutenberg 12.5 include:
Users now have even more flexibility with the introduction of style variations, which allow for quick and effortless switching between different appearances within the same theme.
The Query Loop feature has been enhanced to include custom taxonomies and filtering and more. In the filters panel, the Query Loop block now displays custom taxonomies based on the selected post type, providing comprehensive filtering options. Additionally, filtering by multiple authors is now supported in the Query Loop block.
When inserting a new Button Block, the new button will automatically inherit the styling from adjacent buttons, simplifying the design workflow.
The Code Editor view is now accessible in the Site Editor. This allows users to access the underlying code, providing a peek behind the curtain for anyone who needs it.
This update also includes a variety of enhancements and bug fixes for the Block Library, Site Editor, and more.
This version update was released on January 19, 2022.
Gutenberg 12.4 has a big focus on accessibility as well as the usual performance and bug fixes.
Highlights of Gutenberg 12.4 include:
It is now much easier to navigate through the List View and Block Inserter Sidebar. This will make it much easier for screen readers to work through the page.
The post publish panel now reminds the writer to add tags and categories before you push it live.
The site editor now has a list of keyboard shortcuts you can pull up and add into your daily use.
This version update was released on January 5, 2022.
Happy New Year, WordPressers! We are kicking the year off with an exciting Gutenberg update.
Highlights of Gutenberg 12.3 include:
The update comes with two new blocks, an Author Block, and a Comment Pagination Block. Both of these make creating your layout easy.
Using the Site Logo Block, you can now set your site icon. This is what you see in your browser tabs, bookmark tabs, and on mobile.
We’ve talked about block spacers, but now you can get even more customization with custom units including VH, viewpoint height, EM, relative to parent font size, and more.
Along with other performance enhancements and bug fixes, Gutenberg 12.2 comes with improvements to post comments, new font sizes in the FontSizePicker component, and more.
This version update was released on December 8, 2021.
Another big update on the heels of WordPress 5.9, Gutenberg 12.1 is jam-packed. Let’s get into it.
Highlights of Gutenberg 12.1 include:
The Template List View has returned. This allows you to easily toggle between all your pages.
Global Styles got a big update. The typography panel now allows you to toggle between text and link elements. You can view duotone styles in the color palette and preset your own gradients.
The Navigation Block has been reworked. Menu names are added automatically right off the bat. The dropdown menu now only displays what you choose it to.
This was a big update with a variety of ux updates, changes to block themes, bug fixes, and even more.
This version update was released on September 16, 2021.
The block gap support introduced in 11.4 is expanded in 11.5, as well as other performance updates and design tools.
Highlights of Gutenberg 11.5 include:
You can now choose the distance between items in a block. In 11.5, it was added to Columns, Title, and Navigation blocks.
Flex Layouts, which were introduced in 11.2, are now supported in the Group and Social Links blocks.This will ensure the content in the blocks finds the best fit within the post.
In huge news, Global Styles are now available to themes by default. That means block, theme, and patterns can access styles in Core.
Gutenberg 11.5 brought a lot of exciting design enhancements and bug fixes.
This version update was released on September 1, 2021.
Block design is the star of the Gutenberg 11.4 update with a refactored Gallery Block, duotone filters for featured images, and more.
Highlights of Gutenberg 11.4 include:
The Gallery Block has been greatly updated. It is now a wrapper for the Image block, which means individual gallery images now contain all the functionality of the Image Block.
Duotone filters for featured images have been extended and can be made consistent across all post and page templates, query blocks, and more.
Support has been added for gap spacing control to a variety of blocks including Columns, Images, and more.
The updates in Gutenberg 11.4 are adding the groundwork for more precise layout options. And as always comes with bug fixes and other enhancements.
This version update was released on August 18, 2021.
Featured post images get an update in Gutenberg 11.3, as well as new controls for Block Dimensions and more.
Highlights of Gutenberg 11.3 include:
The Spacing Panel has been renamed to the Dimensions Panel and now has greater capabilities. You have more control over spacing and other style options than ever before.
The block inserter got a significant performance boost, making finding and inserting blocks way faster and easier.
The Featured Image block got a huge facelift with new width, height, and scale options.
Gutenberg 11.3 makes it even easier to create and customize a post.
This version update was released on July 20, 2021.
To the relief of many designers, Gutenberg 11.1 support has been added to edit block borders. You can now also drag and drop in the list view, and much more.
Highlights of Gutenberg 11.1 include:
The biggest thing to come out of 11.1 is begging support to edit block borders. You can change the width, style, radius, color, and more. Until now, this had to be done with custom code.
Click on the List View and you can reorder all of the blocks in your post without copying and pasting. This is a huge time saver.
These are huge advancements toward Full Site Editing. The update also comes with other enhancements and bug fixes.
Gutenberg 11.0 coincides with efforts still underway on the WordPress 5.8 release. As such, this version is heavily focused on updates and bug fixes. Nonetheless, the release also introduces the following notable highlights.
Highlights of Gutenberg 11.0 include:
A new “clickthrough” behavior has been added, requiring active selection of the block before interacting with its child blocks. This introduces a new editing overlay and interaction for reusable blocks. When the block is not selected, hovering over it displays a blue overlay. Clicking anywhere inside the block selects the block itself, preventing the selection of children before the parent. This change addresses user feedback about the lack of friction when editing these reusable elements, leading to a frustrating experience.
Support for CSS Shorthand Properties in theme.json and Block Attributes Theme JSON is increasingly being used to define reusable CSS rules across themes. As the usage of this feature grows, it becomes important to support common methods of setting style properties. In this release, full support for CSS shorthand properties (e.g., margin: 0) and longhand properties (e.g., margin-left: 0) has been introduced.
The Gutenberg team has also addressed a list of bugs and implemented numerous enhancements, ensuring a smoother and more refined user experience for all.
This version update was released on June 23, 2021.
Gutenberg 10.9 comes with several new features and improvements that have been introduced to enhance the editing experience.
Highlights of Gutenberg 10.9 include:
The Link Control feature now includes rich URL previews, providing users with visual and contextual information about the linked content. This helps with better understanding and managing links within the editor.
List View now allows users to expand and collapse nested blocks, providing a more organized and streamlined view of complex block structures. This makes it easier to navigate and edit content within nested blocks.
The Query Loop block has been renamed as the Post Template block. This change clarifies its purpose, which is to create custom templates for displaying posts dynamically.
The Widgets Editor has received various enhancements and bug fixes, improving its functionality and addressing any reported issues. These improvements ensure a smoother and more reliable experience when working with widgets.
Additionally, Gutenberg 10.9 brings valuable enhancements and bug fixes to the editor, making it more user-friendly and robust.
Gutenberg 10.8 comes with several new features and improvements that have been introduced to enhance the editing experience.
Highlights of Gutenberg 10.8 include:
Significant attention has been given to improving performance through iterative enhancements. One notable improvement is the ability to pass __experimentalLayout to a memoized object, preventing unnecessary re-renders when layout data remains unchanged. This optimization greatly benefits blocks like BlockList, reducing the frequency of re-rendering and enhancing overall editor performance.
The heading block now supports font-weight customization, allowing for greater typographic control. Additionally, the List block now offers support for custom fonts, enabling users to create visually appealing lists with their preferred font choices. These design tools can be easily configured in the theme.json file, providing flexibility for customization.
The title area in the Template Editor now corresponds to the current post title, providing clear context during editing. The template details popover has also been improved, offering more detailed information and an enhanced layout. These enhancements provide users with a clearer and more descriptive interface, making it easier to understand and work with the post and template being edited.
Overall, Gutenberg 10.8 focuses on performance optimizations, introduces additional design tools, and enhances the Template Editor to provide a smoother and more efficient editing experience.
Gutenberg 10.7 is the last Gutenberg release to be included in the coming WordPress 5.8 release. As such, much of the focus for this release has been on bringing forward features that will be included in WordPress version 5.8
Highlights of Gutenberg 10.7 include:
In previous versions of Gutenberg, the List View in the Post Editor was displayed as a popover that closed when focus was shifted elsewhere on the page. However, starting from Gutenberg 10.7, the List View now remains persistent in the Post Editor, just like it was in the Site Editor. This means that a sidebar displaying the full post block tree is available.
Gutenberg 10.7 also introduces the initial version of responsive menus in the Navigation block. By enabling the “Enable responsive menu” block option, the Navigation block now collapses into a “Hamburger menu” when viewed on smaller screens. This implementation prioritizes accessibility by ensuring full keyboard navigability of the menu.
Continuing its focus on design tools, Gutenberg 10.7 introduces new features and support for existing ones in blocks. For example, the Site Title and Site Tagline blocks now support custom margin blocks with configurable sides. The Query block receives special attention in this release, offering new design options including layout and color choices.
The behavior and placement of the “Top toolbar” mode have been refined. Wider screens will no longer display the editor bar and block toolbar together, resulting in an improved user experience. When enabled, the top toolbar remains fixed on top of the canvas, positioned below the editor top bar, regardless of the browser width. Implementers will also benefit from a simplified implementation with all toolbar APIs unified under a single <BlockTools /> component.
Patterns can now be inserted directly from the WordPress.org Pattern Directory, similar to how blocks are inserted.
Additionally, Gutenberg 10.7 brings valuable enhancements and bug fixes to the editor, making it even more user-friendly and robust.
This version update was released on April 14, 2021.
Gutenberg 10.4 introduces block widgets to the customizer and lots of other cool stuff.
Highlights of Gutenberg 10.4 include:
This update introduces the first iteration of block widgets in the customizer, making it much easier to find the block you’re looking for.
The Site Editor List View got a facelift with updated icons, new colors, and more.
More description has been added to the publisher widget. You can now see where you’re publishing to, whether it’s on mobile, a full screen option, and more.
One of the most exciting improvements is you can now revert to theme defaults without leaving the Site Editor.
This version update was released on April 2, 2021.
Gutenberg 10.3 comes with an editor performance boost, improvements to the navigation block, inserter and more.
Highlights of Gutenberg 10.3 include:
In order to simplify the way themes define and style alignments, the team has introduced the concept of layout and layout configuration, something that is automatically rendered with the theme.json file
You can now drag and drop a new background image in the Cover Block
The Navigation Block got a facelift with a better-flow to build nested menus, in-between inserter, and a list-view in the editor.
This only scratches the surface of the changes made in 10.3. To see what else it has to offer, check out the official release post.
Gutenberg 10.2
This version update was released on March 17, 2021.
We are getting even closer to Full Site Editing with the updates in Gutenberg 10.2.
Highlights of Gutenberg 10.2 include:
When choosing a Query block there’s now a setup step that allows picking a block pattern for it to use. This is done using a new API that allows you to fetch various patterns.
The new Spacer Block allows you to slide for the width of your spaces. This works particularly well in horizontally-stacked blocks.
When you transform media and text blocks to columns, you will automatically be given two columns with the media and the text side-by-side.
The “Start writing or type / to choose a block†prompt will only be shown in the top block, and not in all of them in your post.
As always, the update comes with various bug fixes and enhancements.
This version update was released on March 2, 2021.
Gutenberg 10.1 continues Full Site Editing enhancements as well as updates to widgets and navigation screens and Global Styles.
Highlights of Gutenberg 10.1 include:
Reusable blocks saw a big upgrade with this update. The Reusable block’s title is displayed next to the block type in the navigation list in the toolbar. You can now also modify the saved title of reusable block in the sidebar inspector.
The Image block’s toolbar now displays as, “meta, block level, inline†in the block toolbar. This update will be made to other blocks.
You can now add more spacing around your social links and buttons, making them easier to see.
This version update was released on February 17, 2021.
Gutenberg 10.0 is the 100th release of Gutenberg. While that in and of itself is an impressive feat (The Gutenberg project launched just over two years ago), there’s nothing particularly extraordinary about this release. It offers improvements for existing features, fixes bugs, adds new features, and experiments with new ideas.
Highlights of Gutenberg 10.0 include:
You can now use a dynamic Pages block that updates with new pages and can be added inside a Navigation block or used on its own.
You can also make the parent block selector visible and offset within the block toolbar.
This version update was released on February 5, 2021.
Gutenberg 9.9 marks the 99th release of the Gutenberg plugin! This version, which will be included in the WordPress 5.7 release, continues to push forward on exciting features like Full Site Editing, Global Styles, the Navigation block, and the Widgets screen.
Highlights of Gutenberg 9.9 include:
You can now customize the background color and icon color for all the icons within a Social Icons block. This update allows you to create a cohesive, visually appealing design matching your unique style.
The Options modal has transformed and re-emerged as Preferences. With its brand-new look, Preferences offers a sleek, updated interface that enhances usability and navigation. Explore the improved interface and effortlessly fine-tune your settings to personalize your editing experience.
By enabling the “Display button labels” setting, you can now use text labels in the block toolbar instead of relying solely on icons. This feature allows for more precise and intuitive navigation, ensuring you can quickly identify and utilize the tools you need to create your content.
The Gutenberg team has also addressed various bugs and implemented enhancements, ensuring a smoother and more refined user experience for all.
This version update was released on January 20, 2021.
As WordPress continues making steady progress with Full Site Editing, this release pushes ahead with ongoing enhancements, including updates to Global Styles, numerous bug fixes, and other improvements.
Highlights of Gutenberg 9.8 include:
The Spacer block has been updated with a semi-transparent background, replacing the opaque light grey background. This enhancement aims to improve visibility by distinguishing the spacer from lighter-colored layers that might be behind it.
Continuing the enhancements introduced in block variations with version 9.7, the block switcher now showcases the specific variation’s icon instead of the generic icon associated with the block. This change provides a more intuitive and visually appealing experience for users.
The Site Editor now utilizes an iframe to render its content. This implementation offers several advantages, such as preventing unwanted interference from admin CSS and enabling the use of a theme stylesheet without any adjustments. The team plans to adopt the same approach for the Post Editor once its stability has been established.
Full Site Editing no longer generates auto-drafts for template and template part post objects. Previously, these auto-drafts were necessary for block templates and template parts directly derived from files in a Full Site Editing theme without any user modifications. However, managing and synchronizing these auto-drafts proved to be complex.
This release also features new bug fixes and multiple enhancements.
This version update was released on January 6, 2021.
It’s the first release of the new year, bringing some great improvements and fixes to the publishing experience!
Highlights of Gutenberg 9.7 include:
The ability to drag and drop block patterns from the inserter into the post canvas. (This builds upon the ability to drag and drop blocks into the post, which was released in version 9.6)
Updates to reusable blocks, specifically how they’re shown and edited. This will likely inspire some UI updates in weeks to come!
When you insert a block variation, the editor will match it to the block being used and show the icon and description of the variation, so you can keep track of exactly what variant you’re working with.
This release also features three new APIs, a number of bug fixes, and several experiments to kick the year off right.
This version update was released on November 18, 2020.
Gutenberg 9.4 focused on updates to existing blocks and APIs, while work on Full Site Editing and Global styles continues.
Highlights of the Gutenberg 9.4 release include:
The ability to change the width of buttons based on percentage, instead of just the dynamic width. (For example, if you have two buttons side by side, you can set one to have a larger width than the other, to establish a little hierarchy.)
The option to change the size of social icons via the Social Icon block.
The option to change the font size of text in a list block.
You’ll also find a bunch of bug fixes with this release, including the option to add headers by typing /h1, /h2, etc. and small polishes to various UI elements like improving the high-contrast mode for Windows 10.
This version update was released on November 4, 2020.
With WordPress 5.6 getting closer and closer, this release focused on some stability improvements as well as full-site editing flows. (If you activate a block-based theme, this will be automatically enabled.)
Highlights of the Gutenberg 9.3 release include:
Support for all units in font-size presets.
Making sure all alignment options are always rendered in the same order. (So less clicking the wrong one!)
Dark mode UI enhancements for those of you (like me!) who prefer a darker screen.
New Patreon, Tiktok, and Telegram icons for social links.
This release also included over 20 bug fixes, bringing lots of little quality of life improvements to the block editor experience.
This version update was released on October 21, 2020.
This release is the final version that made it into the WordPress 5.6 beta, with features and enhancements to continue improving the block editor.
Highlights of the Gutenberg 9.2 release include:
Support for video subtitles! You’ll find a new drop-down in the video block.
The ability to select multiple blocks and transform them into a Columns block. (You can see an example converting three images into a three-column layout in the official release post.)
The option to add background patterns (repeating images) in Cover blocks.
As for enhancements, there were a lot of improvements made to the widget screen and new APIs added/updated to further expand functionality.
This version update was released on September 30, 2020.
This release includes almost 200 commits from 77 contributors. Wow! The primary focus is on features related to WordPress 5.6, such as the Widgets Screen and Block API.
Highlights of Gutenberg 9.1 include:
Progress on the Global styles project, with the possibility to use the theme.json config file to control block editor features and presets (like color palettes, font sizes, etc.)
Block patterns are now organized per category for better navigation.
There’s now an “Open in new tab” option for the “Social Links” block.
There’s a new “Image Size” control in the Media & Text block.
You’ll also find a bunch of enhancements, like reducing the minimum height for the Spacer block to 1px and allowing HTML editing and rich text content in Code blocks.
This version update was released on September 16, 2020.
The Gutenberg 9.0 release included several highly anticipated updates to the navigation screen. You’ll notice a newly designed user interface and improved functionality here! The query block was another strong focus for this update as it got jacked with several new commands.
Highlights of the Gutenberg 9.0 version release include:
The navigation block got a facelift in terms of a new interface and features. It can now support drag and drop functions inside the list view!
New robust features added to the query block. Updates to this block include the ability to search all, filtering by author, order options, and added support for tags (woohoo!).
Saying goodbye to Facebook and Instagram embedding options since Facebook will be dropping their own embedding support in the future.
Several experimental features including heaps of new support for the block editor theme control!
Gutenberg 9.0 included several updates to the navigation block with a new interface and drag and drop features inside the list view. Photo credit: WordPress.
This version update was released on September 2, 2020.
The Gutenberg team has two main focuses to refine and update which are full site editing capabilities and the widgets screen additions.
Highlights of the Gutenberg 8.9 version release include:
Block-based widgets have moved out of experiments as a full-fledged feature, enabled by default now. Lots of testing and feedback is still needed to get this feature right but it’s a great step in the right direction for the future of Gutenberg!
The option to add a character count to the info panel.
30(!) bug fixes were added to refine and improve the overall editing experience.
Gutenberg 8.9 included removing the block-based widget feature from an experimental one to an automatically enabled one. Photo credit: WordPress.
This version update was released on August 19, 2020.
Cheers to WordPress 5.5 and the release of Gutenberg 8.8 to go along with that!
The Gutenberg team has made major progress in their move towards full-site editing capabilities with several UI enhancements and experimental features with this release.
Highlights of the Gutenberg 8.8 version release include:
A redesigned widget screen that’ll rely on new dedicated endpoints. This is a part of a bigger goal to add more block enabled sections to the WordPress experience!
The ability to add undocumented global style blocks and properties.
This version update was released on August 5, 2020.
With the release of WordPress 5.5 right around the corner, the Gutenberg team has released a quieter update this go-around with the bulk of this release containing minor enhancements and bug fixes.
Highlights of the Gutenberg 8.7 version release include:
This version update was released on July 22, 2020.
The Gutenberg expansion plan continues forward with the release of version 8.6. This time around, don’t expect a ton of new shiny features but do expect the Gutenberg team to continue refining the overall editing experience through interface redesigns and enhancements.
Highlights of the Gutenberg 8.6 version release include:
More reign of control over the cover block positioning of videos. You can now pick a focal point within a video and position it as you please!
New block pattern updates for the following elements: Large header and paragraph,Large header,Text two columns,Three buttons,Two buttons,Quote.
A few enhancements and a lot of bug fixes.
Gutenberg 8.6 introduced a new feature for more control over the cover block of video positioning. Photo credit: WordPress.
This plugin release will be entirely included in the WordPress 5.5 core on its target date of August 11. This wasn’t a major release but Gutenberg 8.5 was still packed with a few notable feature improvements, bug fixes, and enhancements (all the goooood stuff).
Highlights of the Gutenberg 8.5 version release include:
Improvements to the drag-and-drop block feature, so you can now drag and drop multi-block selections.
Accessibility improvements to disable arrow navigation across blocks to avoid confusion when you’re writing long-form content.
The option to upload media to the media library when pasting into the block editor from an external source so external media will no longer be in limbo and can be safely kept in your media library.
A new feature to add anchor/id support to all static blocks.
A new feature to have the ability to keep the caret inside blocks in edit mode.
Gutenberg 8.5 has simplified the process of uploading external media into the media library. Photo credit: WordPress.
This version update was released on June 24, 2020.
This plugin release came out with an extra helping of editing features and bug fixes (always positive news)! Several experimental blocks evolved into permanent blocks to be downloaded for every install so there are a lot of user-facing updates in this release.
Highlights of the Gutenberg 8.4 version release include:
A new image editing feature that allows you to zoom, rotate, or change the aspect ratio for an image directly in the editor. Previously, you might’ve used third-party software like Adobe Photoshop to accomplish this so three cheers for quick image edits done in the editor!
A feature that allows new multi-block controls. You can now select multiple blocks and customize them all at once with this new editor! The only limitation is that the blocks have to be the same type in order to fulfill multi-selection action.
The long-awaited block directory feature. This allows you to discover, install, and insert third-party blocks into your post from the editor.
Lots of bug fixes to improve editor performance.
Gutenberg 8.4 introduced a new image editing feature. Photo credit: WordPress.
This version update was released on June 11, 2020.
The latest Gutenberg editor was released with a few new notable features. This version includes several user-facing features and performance enhancements.
Highlights of the Gutenberg 8.3 version release include:
A new intuitive padding option so you have more control over the spacing within the blocks.
Saying goodbye to previous default-set link colors, and hello to new link color control options.
A new block category system that has been renamed and updated. The new categories are: text, media, design, widgets, and embeds.
A new parent block selector to child blocks to improve your chances of selecting the correct block when in nested contexts.
Gutenberg 8.3 introduced a new padding feature in the editor. Photo credit: WordPress.
Say hello to the latest Gutenberg editing experience! This release has heaps of improved editing functions. There are lots of updates so let’s dig into it!
Highlights of the Gutenberg 8.2 version release include:
New block pattern categories. The categories are: text, hero, columns, buttons, gallery, features, and testimonials.
In the Cover Block, a new content alignment feature. The functionality is now easier to do with nine(!) alignment options.
The ability to copy/cut an entire block (if no text is selected) with keyboard shortcuts. You can use Ctrl + C to copy a block or Ctrl + X to cut a block.
Several enhancements to improve the writing and editing experience. Commands such as copy, cut, and paste are smoother thanks to the enhancements.
Another day, another Gutenberg release! The latest update doesn’t include a lot of bells-and-whistles feature updates, but does include plenty of important user interface improvements.
Highlights of the Gutenberg 8.1 version release include:
A new block pattern feature so it’s easier for you to insert desired patterns and a new pattern (the testimonials).
New Transform functions so it’s easier for you to shift blocks into different forms:
Embed blocks into paragraph blocks.
Code to HTML block and the opposite.
A small, yet incredibly useful, copy block action. You can now copy one or multiple blocks with a simple click.
This version update was released on April 29, 2020.
*You have now reached the next level*
Let’s welcome Gutenberg 8.0 to the WordPress world today! This plugin is chalked full of performance refinements and the addition of a few nifty features.
Highlights of the Gutenberg 8.0 version release include:
A new tab-panel has been added to the block to allow you to browse and insert block patterns. This function has been redesigned so now it’s heaps easier to browse through patterns in the space it allows!
A collapsible dropdown list of formatting options. The previous interface was very limited in screen space so this should improve the editing experience of formatting moving forward.
A new and improved code editor (which looks exactly how it should now). The Gutenberg team redesigned the code editor to use a monospace font for the title with a newly resized editor viewpoint.
New formatting options! You can now add subscript and superscript formatting options.
Lots of good ‘ole enhancements and bug fixes.
Gutenberg 8.0 introduced a new patterns inserter feature. Photo credit: WordPress.
This version update was released on April 15, 2020.
After a slight delay, the Gutenberg team has released the newest editor version–7.9. With the longer-than-usual wait, we were awarded with more new features and user interface enhancements for compensation!
Highlights of the Gutenberg 7.9 version release include:
Tons of additions to the block design tools. You now have more functionality over the height unit control for the cover block, line-height control for the paragraph and heading blocks, and background gradient support for group, columns, and media and text blocks. This is a great step towards redefining the editing experience in WordPress with Gutenberg!
Three new block patterns. Say hello to the following new patterns: Hero Two Columns, Numbered Features, and It’s Time.
The usual lot of bug fixes and performance enhancements.
Gutenberg 7.8 introduced expanded design capabilities in the block editor. Photo credit: WordPress.
This version update was released on March 25, 2020.
This smaller plugin release focused mainly on block user interface redesign and official API modifications. While this release isn’t all that big, the user interface continues to improve (and that in itself is huge)!
Highlights of the Gutenberg 7.8 version release include:
A polished user interface so you’ll notice that several elements in the block editor have been redesigned for ease.
Lots of bug fixes and user enhancements to go along with the user interface redesign.
Gutenberg 7.8 introduced an updated user interface. Photo credit: WordPress.
This version update was released on March 11, 2020.
Big things were promised with version 7.7 and the Gutenberg team delivered. This plugin release featured a newly designed user interface and new block editing functions.
Highlights of the Gutenberg 7.7 version release include:
A newly designed user interface. While this won’t be the final design of the Gutenberg editor, this new version comes with a simpler block toolbar, better user interface color contrast, and consistent focus styles. The main goal was to elevate the previous editor so it felt more professional and clean!
The introduction of new block patterns that will be offered as predefined block layouts, ready to insert and customize as needed! There are currently four patterns with more to be released in the later versions.
Gutenberg 7.7 introduced new UI elements in the block editor. Photo credit: WordPress.
This version update was released on February 26, 2020.
The Gutenberg 7.6 editor introduced several notable experimental features for expanded block controls. Hopefully these functions will move their way into the permanent boat over the course of the next releases!
Highlights of the Gutenberg 7.6 version release include:
A new transition from single-tip to now rotating-tips in the block inserter. Instead of one, a list of several suggested actions will appear when you press [/] to quickly insert new blocks.
New experimental full-site editing blocks for elements such as the post featured image, post tags, comments count, and comments form.
A lot of bug fixes and enhancements that make up a majority of this release.
This version update was released on February 12, 2020.
This plugin release will be fully included in WordPress 5.4. The latest Gutenberg editor comes with a heavy emphasis on improving the social functions!
Highlights of the Gutenberg 7.5 version release include:
The previously experimental social links block is now a stable block in the editor.
A new feature so you can add color to rich text and inline color to text.
A new feature to display featured images in the latest post block.
A good chunk of bug fixes and performance enhancements.
Gutenberg 7.5 introduced a new block variations function in the editor. Photo credit: WordPress.
This version update was released on February 5, 2020.
The latest release is a colorful new edition to the next Gutenberg editor. The Gutenberg team added a lot of exciting functions to liven up your design capabilities!
Highlights of the Gutenberg 7.4 version release include:
A new feature where you can now add background color support to the columns block.
A new feature where you can now add text color support for the group block. In previous versions, you couldn’t apply a text color to every sub-element of the block so now you can design with a bit more ease and customization.
Navigation block enhancements to improve your editing experience.
Several bug fixes and enhancements to make everything run a bit smoother.
Gutenberg 7.4 introduced new color features and enhancements in the editor. Photo credit: WordPress.
This version update was released on January 22, 2020.
The second release of 2020 consisted mainly of performance and interface improvements, and a good helping of bug fixes and enhancements. On a very exciting note—the navigation block received some noticeable interface changes!
Highlights of the Gutenberg 7.3 version release include:
A fresh navigation block perked up with colorful feature enhancements. With these new options, you can now set the text color for all navigation and set the background color for the entire navigation block.
Load time for page loads and commands have improved 30-50% faster according to the team. A great win for the editing experience!
New block collections API that can be used to group blocks in the block inserter.
This version update was released on January 22, 2020.
The first Gutenberg release of 2020 includes some of the most asked features from you and the WordPress community! The Gutenberg team set the bar high with this release—perhaps it’s setting the tone for the rest of the year for Gutenberg’s course.
Highlights of the Gutenberg 7.2 version release include:
A new button block to align more than one button in a row. This was previously a huge headache for designers in the editor but the Gutenberg team heard your concerns to remediate this function!
A new tabbing navigation has been introduced for edit mode to improve accessibility. This will be one of many interface updates to improve the editing experience.
A new gallery block so you now have more control over the proportion and ratio of the media in the block.
The ability to add a link for the image in the media and text block.
Bug fixes and enhancements.
Gutenberg 7.2 introduced a new button block function in the editor. Photo credit: WordPress.
Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.
Doc Pop: You’re listening to Press This, a WordPress Community Podcast on WMR. Each week we spotlight members of the WordPress community. I’m your host, Doc Pop. I support the WordPress community through my role at WP Engine, and my contributions over on TorqueMag.Io where I get to do podcasts and draw cartoons and tutorial videos. Check that out.
You can subscribe to Press This on Red Circle, iTunes, Spotify, your favorite podcasting app or you can download episodes directly at wmr.fm.Â
According to the World Health Organization, around 285 million people worldwide have moderate to severe vision impairment that can make it difficult for these users to access all of the content across the web.
They can access parts of it and large parts of it, but there might still be parts that are difficult for some users to reach. I feel like web designers are thinking more critically about building more accessible websites these days, and it’s been a hot topic in the WordPress community. I believe more accessible websites make the web more inclusive, but they also make the web a better experience for all users, even those that don’t identify as visually impaired.
Today we’re gonna talk to Bud Kraus, the Chief Education Officer at Joy of WP. He’s also been a Contributor at TorqueMag.io. Bud recently gave a talk at WordCamp Europe titled “Using Low Vision As My Tool To Help Me Teach WordPress.†And in his talk, Bud demonstrated the tools, methods he uses to surf the web, but he also talks about how his experience has made him a better WordPress educator.
So I’m excited to talk with Bud about this, Bud. Why did, why don’t you kick us off by just telling us how you got into WordPress?
Bud Kraus: Well, thanks Doc, and thank you for having me on your podcast. I really appreciate it. It all started back in 2009 when I was having lunch at the Oyster Bar in Grand Central New York City where a client said to me, you know, Bud, you ought to learn WordPress. And I said, no, I’m a rage against the machine kind of guy.
And he looked at me seriously and he said, no, you’ve got to learn WordPress. Here’s my username and password from my website. Go in there, fiddle around with it, see what plugins do. And I did, and I set up my own WordPress site. And once I realized, oh, maybe a year later that you could do something called a child theme and make WordPress your own, I was hooked.
And little did I know what would happen years later too. So that’s how I got started with it.
Doc Pop: You were already teaching web design at the time, or did you get into web design through that?
Bud Kraus: Yes, I was. I was teaching at Pratt Institute in New York City. I was really teaching HTML and CSS and a little bit of JavaScript, and so I just didn’t see any place for WordPress, but eventually I did, and I started teaching WordPress at the Fashion Institute of Technology and teaching it online and doing all kinds of things.
And back then, this was the early, you know, 2011, 2012, there was a huge market. Everybody wanted to learn WordPress, so that was great.
Doc Pop: You recently gave a talk, and you also based it on a Smashing Magazine post that you did back in 2018, which is a great article. The talk is called Using Low Vision As My Tool To Help Me Teach WordPress. And I’m curious, you mentioned in the talk that you have moderate vision impairment through macular degeneration.
I’m curious about the tools that you use to surf the web, can you tell us a little bit about the tools that you use and how not all visually impaired users use the same tools and settings?
Bud Kraus: Well, that is absolutely correct because vision loss or any disability for that matter is very idiosyncratic, so not everybody uses the same solutions. And I always believe don’t use technology for something that you don’t really need. So I don’t really need a whole lot, but I do need things that, let’s say a normally sighted person doesn’t use.
For example, I do a lot of zooming in and zooming out so I can see things. I use a lot of voice overs so I can hear things, and really that’s about it. People who are more severely impacted use JAWS and other technologies like that, which are much more complicated to learn than what I use.
Doc Pop: Yeah. I don’t have great vision myself, so I definitely use a lot of these accessibility tools myself, but for some reason, even though I’m using some of these tools, I still think of designing accessible web pages as being alt tags and making sure you’re marking headers instead of just doing like bold headers, you’re actually marking your things properly and kind of these sort of things. And so your talk was just a reminder that not everyone’s using a screen reader.
They all have different ways of using the web.
Bud Kraus: But if you use markup correctly regardless of your interest or lack thereof and accessibility, you’re doing things the right way and it’ll benefit so many things at Search Engine Optimization to mention one. So I’ve always taught people web design standards before there was really a term called web design standards.
It’s just the right way of doing things. So the best way to go.
Doc Pop: So how has your experience helped you communicate and teach WordPress to others?
Bud Kraus: Well, there’s a couple things. One is I can’t go into a classroom and just wing it. I have to be super prepared. I have to know exactly what I’m gonna be doing that day and especially if it’s new material, I have to really rehearse. Because I can’t go into class and read stuff, I have to sort of memorize it, and that’s okay.
It makes you a better teacher actually. You’re really prepared. And that’s really something that I learned from just having a vision loss is no winging it. You’ve gotta be prepared. You’ve gotta have a good lesson plan going in and so there is a disadvantage if students say, well, we wanna do something totally different.
Or you say, no, we have to sort of stick to the plan here. And usually they do. So that’s not a problem. I mean, that’s just one. There’s other things too, like for example, there’s a principle in accessible design, grouping. We like to group things, making it easier for technology, for people to understand.
And so I group things too. Like I’ll teach things in groups, maybe we’ll do everything about pages, maybe we’ll do everything about posts, maybe we’ll do everything about themes. Sort of like to keep these things together. And I think it’s sometimes a little more understandable if you use grouping as an idea and that’s something I definitely learned from accessible design.
Doc Pop: Mm-hmm. So when you’re talking about grouping that’s a thing that you do for practicality, as a teacher. But that benefits students because it kind of helps keep things packed together
Bud Kraus: Yes. I think it’s more, instead of being all over the place that students understand where we’re gonna be, and if they have a syllabus, they can see today we’re gonna be talking all about pages, or we’re gonna be talking about posts, or we’re gonna be talking about images.
Now you can’t, from a practical standpoint, you just can’t put all these things in nice, neat little silos. We know that. But if you can, to a certain extent, keep that idea of grouping things like that, I think it’s gonna be helpful for the students.
Doc Pop: Mm-hmm. I was kind of curious about this as you were talking, we’re talking about your experience as an educator. I’m curious for students, have you ever had a group of students that themselves were maybe visually impaired, and how did that change how you taught them?
Bud Kraus: I’m going to change your question a little bit because I don’t think I’ve had anybody who was visually impaired, but I had a deaf student.
Doc Pop: Mm-hmm.
Bud Kraus: And I thought that was really interesting because what I learned from that experience was, when you’re deaf, you can’t just read the words in your mind.
Because that’s audio. So they don’t have the ability to do that. That’s what American Sign Language is all about. And that’s when I started learning, oh, now I get it. And in fact, this student who was very bright, who was a really good designer too, he brought a signer to class.
So, every time he came to class, somebody would sign whatever I was teaching, Which was kind of interesting and it worked. I thought that was a really interesting experience. I also tried to teach somebody who was severely impaired from a cognitive standpoint, from a visual and auditory standpoint.
And it was impossible. It was really, really tough. I wanna say there’s only so much you can do, and I’m not a trained person in that field, so maybe that was really on me. But you can see where this can be very difficult in some in a very, very tiny minority segment of the population.
But there are people that are severely impaired who want access to the web. And one thing I’ve learned over time is if you make things accessible for people like me, you’ll make it better for everybody. And that’s really to me, the key to accessibility, which is really, who cares about making websites for me?
Don’t you wanna make it better for everybody else? And the answer is yes. And the way to do that is through accessibility.
Doc Pop: Yeah, absolutely. The analogy I always appreciated was when they built sidewalk ramps for wheelchair users, it ended up benefiting everybody. If I sprained my ankle, now I have an easier way to get down. iIf I had a baby and I had a stroller.
It just sort of makes the experience better for everyone.
Bud Kraus: Absolutely. And it’s the same thing with curb cuts, that kind of thing. I mean, don’t we want curb cuts? It’s just so much easier to step off a curb or ride a bike or whatever. Well, sure. And also to wheel somebody down in a wheelchair, same thing. Again, the concept of making things better for everybody.
Because my vision impairment, I sort of look at it as a gift actually, in that I can see things about accessibility and usability that other people can’t see. And so, I don’t look at myself as poor me. I sort of sometimes think, lucky me because I get to see things in a different way and understand things in a different way, not saying better or whatever.
It’s just different.
Doc Pop: And that’s a great spot for us to take a quick break. We are gonna come back and continue our discussion with Bud Kraus about the conversation that he had at WordCamp Europe about being a presenter and just educating WordPress in general. So stay tuned for more WordPress news after this break.
Doc Pop: Welcome back to Press This, a WordPress Community podcast. I’m your host, Doc Pop. Today I’m talking to Bud Kraus, the Chief Education Officer at Joy of WP, who’s been teaching web design for many years, and recently gave a talk at WordCamp Europe. Bud, you mentioned at the end of the talk that this was a dream of yours.
Can you tell us about that?
Bud Kraus: Oh, I certainly can. So, in like 2015, 16, 17, I’d be watching the stream of WordCamp Europe and I’m sitting at my computer thinking, God, wouldn’t it really be cool to go to WordCamp Europe? I mean, what an experience that would be. So I don’t know what got into me, but last year I started thinking, well, I’m gonna apply to speak at WordCamp Europe.
What the heck? They’ll never pick me, so I don’t have to worry about anything, you know, just apply. And I did. I chose the one topic I felt like I had one story in me to give. And that was how I using low vision as my tool to help me teach WordPress. And I applied and I waited to hear, and the day I heard was March 31st. I’ll never forget, 6:15 in the morning, I go into my office, I look at the email and the first there words were “We are thrilled.â€
And I stopped right there and I knew, and I said to myself, oh, they must have made a mistake. This is sent to the wrong person. And I kept on reading and it really was me and I was very tempted to wake up my wife. And tell her, because she’d been wanting to go to Greece and Santorini forever. She got up and when she saw it, she did a double take. And she said, I guess we’re going to Greece. And of course I had told everybody that I applied, but the chances of me getting picked were like, one in a thousand. And it turned out not that bad of an odds, but pretty slim odds.
So I’m forever grateful to the WordCamp Europe organizers for choosing me.
Doc Pop: Up until this point, you had never even been to WordCamp Europe, which is one of the largest, if not the largest WordCamps in the world ever. And your first time going, you gave a massive presentation. Kudos on that.
Bud Kraus: Well, my wife said I did a really good job and she’s a very tough critic, so if she said I did a good job, I’ll take it. It was really an honor of a lifetime. It was an experience. It’s impossible to forget. And I don’t wanna forget it. And I met so many people that I already know, but more important or as important, I met a whole lot of new people that I sort of met in the weeks leading up to WordCamp Europe. I was reaching out and meeting new people on Twitter and LinkedIn and elsewhere. And it was great. I feel like, geez, I’m so fortunate to have done all this. I mean, I get to go to WordCamp Europe and really just talk about myself.
Now, if I may say, I gave this talk in Boston a couple years earlier, and I was terrible and I would’ve booed myself off the stage. And I said to myself, if you ever give that talk again, you better do a much better job. So really, I rebuilt the whole thing, and I think I did a much better job.
Doc Pop: Awesome. And so now that you’ve got this under your belt, are you getting ready for your pitches next year? Are you gonna try to give a talk at WordCamp Asia?
Bud Kraus: Well, that’s funny you should say. Though I haven’t had the drive to go to WordCamp Asia, but I’m thinking like It would be kind of cool to go to Taiwan. So I am starting to consider, but then I’m thinking like, well, what would you talk about?
Well, I actually have two ideas. I mean, the one I gave at WordCamp, Europe is definitely one of them. But would they cross check to see if I gave that talk already and who knows. What’s the harm in applying? There’s no harm at all.
Doc Pop: Mm-hmm.
Bud Kraus: I have to say too, when I applied to speak at WordCamp Europe, I really spent like no time at all putting the topic together because I just felt like why waste a lot of time here?
They’re never gonna pick you. But it happened.
Doc Pop: Well, let’s go back a little bit to your experience as a web designer and someone who’s been using the web for a long time and got into WordPress and really found home here. As a visually impaired user yourself, how do you feel about WordPress as a tool for other users?
And have you heard from other members of the community about their experience?
Bud Kraus: Yeah, fair question. I am not at all plugged really into the WordPress accessibility community. Because I’m a stakeholder, but I’m not really, you can see I’m kind of struggling to articulate this.
I don’t really consider myself impaired. I mean, I know I am. In the year 2000, I was teaching a course at Prat Institute called Accessible Web Design. So it’s not like I’ve never heard of this stuff. Okay. I mean, I was teaching it when browsers didn’t support it.
People didn’t know what the heck I was talking about. What does that mean accessible design? What does, so it’s not like, I don’t know the subject, but I am not an expert. I couldn’t tell you all the ins and outs of the web content accessibility guidelines 2.1 or whatever it is now.
I know it exists and I know the fundamentals of it. I’m a stakeholder and it’s a subject that interests me, and I certainly know when something is not usable or accessible and there is a difference between the two, but it’s not something that interests me, let’s say on a professional level.
So I made the decision quite a while ago that I wasn’t going to become an expert in accessibility for the web. And I’m not by any means. So can I tell you all about how accessible Gutenberg is? No. I cannot tell you.
I’ve heard lots of things and I have not heard good things, but I’m not an expert at all, so I don’t feel myself qualified. Whenever I see something that I think is just, just terrible, I’ll say something to somebody in the community, but that’s about it. Accessibility is not a specialty of mine, let’s just say that, but I certainly have familiarity with it,
Doc Pop: That’s a good spot for us to take our final break and when we come back, we will talk with Bud a little bit more about some of the other projects he’s working on and some news he might have in the future. So stay tuned for more WordPress news after this quick break.
Welcome back to Press This, a WordPress Community podcast. I’m your host, Doc Pop. Today I’m talking to Bud Kraus. We’ve talked about his experience teaching at WordCamp EU and his experience as a WordPress educator for many years. And now I wanna talk about the things, Bud, that you’re working on now.
What are some of the projects that you have going on this year, now that you got that talk out of the way?
Bud Kraus: Well, one thing I have to say is, I am not a site developer, okay? So I don’t have projects like that. In fact, I call myself a reluctant site developer. What I am doing these days, and this started about six months ago, is providing WordPress content for WordPress businesses.
So a company like Insta WP will say, will you do some videos on something like how to convert an elementary site to Gutenberg? Sure. Or will you create a course for us? Let’s say this is OS Training that has a lot of training on WordPress courses and I just finished something called Elementor 101 for that. or will you write blog posts?
Like right now I’m working on or about to start one for GoDaddy, which is about how to use ChatGPT to spin up a custom post type plugin, which is really cool. I mean, I just love that and it really points the way of how developers will work going forward. Now, I’m not a developer, but what’s so great about it is you really don’t have to be, you just have to know how to use the prompt in ChatGPT and then maybe how to do some edits in the code.
But it’s not very difficult. It’s very cool. So I’m excited about doing that. And other projects. I will be doing a webinar for the Learn WordPress initiative. It’s called “Demystifying the Navigation Block,†which everybody seems to be struggling with, for good reason if you ask me.
So I’m always looking for opportunities to either write, create videos, any kinda WordPress content for WordPress businesses. So, that’s gonna be my thing from now on. And I must say too, it really leverages all the contacts I have in the WordPress community. ‘ve been very fortunate to meet and know a lot of people in the great community.
It’s sort of like by accident. I said, I could work with these people. I would love to work with these people. So that’s really what is really happening now with me. And I’ve sort of turned away from developing websites cuz if you do it long enough, you’re just gonna eventually hate yourself and hate web development.
Doc Pop: And you’re, you’re gonna be at WordCamp US, not giving a presentation, but you said that you were gonna be part of the Community Summit.
Bud Kraus: Yeah. I’m excited to be going to the Community Summit because number one, I really don’t know what it is. I know that it is something that’s been restarted after Covid. I believe it’s basically gonna be two days of talking about how to strengthen the WordPress community.
And I’ve pitched an idea to the organizers about what we could talk about. But we’ll see. It should be great. I mean, I know that I’m gonna be in DC for like five days now because of the community summit. And I won’t be at Contributor Day, but I will be at the two days of WordCamp US.
I’ve been very fortunate this summer because I started out at WordCamp Europe and then two weeks after that I went to WordCamp Montclair, which is a small community in New Jersey. And saw a lot of the WordCamp Europe people there as well, and then onto WordCamp US in August.
So Wow. I really feel like I’ve been at WordCamp all summer, which is great.
Doc Pop: Let’s wrap this up here. What’s a good spot for people to be able to follow the project you’re working on? Reach out to you with any questions they might have.
Bud Kraus: Sure. If you wanna contact me, I have a contact form on my site, which is JoyofWP.com. It’s really easy to remember now. And you can also email me, which is Bud@JoyofWP.com. So I don’t make it hard to get a hold of me. It’s really easy to get a hold of me.
And please do.
Doc Pop: And, and I just wanna reiterate, because you said this too, but I just wanna say anyone listening, if you are looking for some content, you’re looking for videos, you’re looking for articles, Bud is taking orders now, now’s a good time to reach out to you, right?
Bud Kraus: Yes. Thanks, Doc.
Doc Pop: Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.
We recently started off a new series on Google’s Core Web Vitals metrics with a post on Largest Contentful Paint. Here, we want to continue with the next candidate in line: First Input Delay or FID for short and how to improve it in WordPress.
In the following, we will take a deep dive into what FID is and how to optimize your WordPress website for it. You’ll learn to understand and measure First Input Delay, what value you should aim for, and how to improve it if necessary.
Note that this post assumes that you are already familiar with Google Core Web Vitals and their impact on user experience and search engine optimization. If you are unsure about any of this, check the first article in this series or our standalone post on Core Web Vitals.
What Is First Input Delay? A Definition
So, as already mentioned, FID is one of three metrics for measuring website user experience that Google considers as core values to judge how user friendly a website is. It’s also part of their search algorithm, so if you score badly on this, your search ranking will suffer.
However, what exactly is First Input Delay?
In short, FID quantifies the delay between the time a user interacts with a web page (such as clicking a button) and the time when the browser is able to respond to that interaction. This reflects the responsiveness of a web page.
While Largest Contentful Paint calculates how long it takes for a web page to become useful to a visitor, FID measures how well it stays useful by performing whatever action the visitor wants – even during load. Naturally, if your site is more responsive, it makes for a better user experience.
You probably know this from your own Internet usage. Ever been on a site that took way too long to react to your input? You didn’t like that, did you? Well, neither do your website visitors.
How Is FID Calculated?
FID is measured in milliseconds (ms). To calculate it, the browser tracks the moment a user interaction occurs on a page and the time it takes for the browser’s main thread to process that interaction. The FID score represents the delay between the two events. As a consequence, a low FID score indicates that the page is highly interactive and responds quickly to user input.
At this point, you probably have to questions: What is the “main thread”? And what counts as an interaction?
Here’s the answer.
The main thread is basically the browser’s work pipeline. All processes that are necessary to render and run a website run through it. If it is constantly busy, it takes longer before it can react to new input.
As for what counts as an interaction, that can be a click on a link, a tap on a button, using a drop-down menu, text field, checkboxes, or radio buttons, as well as pressing a key on your keyboard (e.g. Esc to close a popup).
What Causes FID?
First Input Delay is often highest between First Contentful Paint (when the first page element appears in the browser window) and Time to Interactive (when the page first becomes usable and responsive to user input).
Basically, input delay stems from when the browser is busy with something else while the user tries to do something. In that case, it can’t respond timely to the input, resulting in waiting time for the site visitor.
On the technical side, common culprits for this are:
Large JavaScript files that the browser needs to parse and execute
Heavy calculations, DOM manipulation, or resource-intensive processes
Slow network connections or high latency that can lead to delays in fetching website files and other resources
Activities that block the main thread, such as heavy animations, long-running CSS transitions, or large image processing
One last thing that is important to note about First Input Delay is that it will be replaced by another metric called Interaction to Next Paint (INP) in March 2024. However, for now FID is what we are working with, so it still matters that you get familiar with it.
How to Measure First Input Delay
You can test your website’s FID with pretty much the same tools as the other Core Web Vitals:
PageSpeed Insights — Simply enter your page URL and receive a report including your FID value.
Chrome User Experience Report — Google collects and compiles real user experience data from many websites through its browser. You can access this data through different tools, including those mentioned here.
Search Console — The Web Vitals report in Google Search Console lets you know about pages with bad FID readings.
web-vitals JavaScript library — If you are more technically inclined, you can build this JavaScript library into your website and get the information about Core Web Vitals from there.
Most of these tools simply show the FID value in their results so you know what you are dealing with.
What’s important to note is that you need real user interaction for this metric. It is not something you can simulate in a lab-type environment. Therefore, your best sources for this is real user data like from the CrUX report.
If you want to test your site in a lab environment beforehand, your best proxy metric is Total Blocking Time. You can also find that in PageSpeed Insights, for example.
In addition, focus on the really worst cases of FID on your site, it will tell you the most about what is wrong.
What Is a Good First Input Delay?
That only leaves the question, what number should you shoot for? A good FID score is typically below 100 milliseconds. Scores between 100 and 300 milliseconds are considered to need improvement. Everything over 300 milliseconds indicate a poor user experience.
So, with these benchmarks in mind, let’s learn how to make the First Input Delay on your site better.
How to Improve First Input Delay on Your WordPress Website
Improving FID mostly involves optimizing the web page’s performance and reducing any blocking tasks that may delay the browser’s response to user input. The most common culprit for the latter is heavy or incorrect use of JavaScript. For that reason, much of the measures below will focus on that. However, there are also other things you can do.
Optimize your website environment — The faster your website generally, the quicker resources can be delivered, reducing time to interactivity. Therefore, invest in quality hosting, themes, and plugins. In addition, reduce the number of plugins on your site and keep it updated. In addition, implement caching and compression.
Implement a CDN — Content delivery networks allow you to shorten the distance between the server and the user, also resulting in faster file delivery.
Eliminate render-blocking resources — Any parts of a website that stall the loading process negatively impact all parts of the user experience and Core Web Vitals. Eliminating them from your site helps correct that problem. More details on render-blocking JavaScript below.
As mentioned, JavaScript is usually the main factor for bad FID results. Here is how you can optimize the markup on your site so that it doesn’t become a problem.
Reduce the Overall Markup
Of course, the best thing you can do is to reduce the overall JavaScript on the page. Check the Coverage tab in your browser developer tools to find the unused JavaScript on a web page.
In WordPress, excessive JavaScript is often the result of too many plugins or themes that come with a lot of bells and whistles causing First Input Delay. So, if you want to get rid of it, check if there is a way you can eliminate some of them or switch to a leaner version.
Async and Defer Scripts
After that, the next step is to optimize JavaScript delivery to the browser. The main problem here is that, unless otherwise specified, when the browser encounters a JavaScript script in your website markup, it stops rendering HTML until the script has been downloaded and executed. This also referred to as the “render-blocking resources” mentioned above.
However, there are ways around it and they are based on two keywords:
async – Adding this to your script call allows the browser to download it in the background without pausing the processing of the page. It will only execute once downloaded, independently of the rest of the page.
defer – Very similar to async. It tells the browser not to wait for the script and instead keep building the page. However, in this case, it will load the script last, when the rest of the page has been fully built.
Here’s what using async and defer looks like in practice:
As you can imagine, both of these methods can result in significant time saved during page load. Their main difference: defer keeps the relative order of scripts the way they appear in the document, while async uses the order in which the scripts are done downloading.
You can use both to make unused and non-critical JavaScript load later. This includes third-party scripts such as analytics.
Minify JavaScript for Faster Download
Finally, for the JavaScript that does get loaded, be sure to minify it. Minification means removing all markup and code formatting that’s only there to make files legible for humans.
It further reduces the file size and makes them faster for the browser to download. There are plenty of tools out there to do this, including the plugin recommendations below.
Break Up Long Tasks
Besides reducing the overall JavaScript on your site and improving delivery, you can optimize First Input Delay on your WordPress site by breaking what remains down into smaller chunks. This is especially suitable if you have a lot of “long tasks” on your page.
What are long tasks, you ask?
Anything that blocks the main thread for more than 50ms. You can see these in Chrome developer tools marked with red flags.
If you cut them down into smaller parts, you can load them asynchonously, resulting in less uninterrupted work in the main thread.
How do you do that?
By using code-splitting. It allows you to load chunks of JavaScript conditionally so that only critically important code is loaded from the beginning. The rest only comes into play when necessary. You can also break up tasks into smaller separate functions. Both are ways to keep your pages responsive.
For more very technical tips on how to handle long tasks check this resource.
Useful WordPress Plugins to Improve FID
We understand that optimizing JavaScript files is not everyone’s cup of tea, especially if you are not a developer. For that reason, we have compiled a few WordPress plugins and tools that can help you in making your First Input Delay values better.
Asset Cleanup – This plugin allows you to disable unused CSS and JavaScript, preload fonts, minify your files, defer JavaScript, and more.
Flying Scripts — Lets you delay the execution of non-critical JavaScript until the time there is no user activity.
Plugin Organizer — Change the order in which plugins load on your site and selectively switch them off on chosen pages or content types.
Autoptimize — Can combine and minify CSS and JS files automatically as well as add async and defer to scripts. It’s also super easy to use.
WP Rocket — A paid caching plugin that can do a lot of what we talked about above. Generally, most caching plugins offer similar functionality.
Final Thoughts: First Input Delay in WordPress
FID is one of the metrics that make up the triumvirate of Core Web Vitals and it measures the interactivity of web pages. Since nobody likes sluggish web experiences, this is an important part of user experience. By focusing on improving First Input Delay, website owners and developers can provide a more responsive user experience, and ultimately improve user satisfaction and engagement.
Above, we have covered how to measure, test for, and improve FID on your WordPress website. While optimizing JavaScript might feel a bit out of reach for less-technical users, there is still a lot you can do to improve the overall performance of your site including FID. Hopefully, you feel capable of doing so by now.
Do you have any other tips to improve First Input Delay on WordPress websites? Share your thoughts and recommendations below!
The Torque Social Hour is a weekly livestream of WordPress news and events. On this episode, we are joined by Nyasha Green to talk about this week’s WordPress news and Nyasha’s new role at LinkedIn Learning.
Join us next each Wednesday from 3-4pm PST for WordPress news and interviews.
Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.
Doc Pop: You’re listening to Press This, a WordPress Community Podcast on WMR. Each week we spotlight members of the WordPress community. I’m your host, Doc Pop. I support the WordPress community through my role at WP Engine, and my contributions over on TorqueMag.Io where I get to do podcasts and draw cartoons and tutorial videos. Check that out.
You can subscribe to Press This on Red Circle, iTunes, Spotify, your favorite podcasting app or you can download episodes directly at wmr.fm.Â
Today we have a very special guest joining us. We’re thrilled to have Hari Shanker, an open source program manager at Automattic and a key contributor to the WordPress ecosystem. Hari is currently focusing on improving the experience for WordPress contributors and Hari has been instrumental in developing the Contributor Working Group and the Mentorship Program. Today we’ll dive deep into those exciting initiatives and explore how they’re shaping the future of WordPress. Welcome to the show, Hari. I want to just ask you from the start, how did you get into WordPress?
Hari Shanker: Hey Doc, excited to be here. So my WordPress story is pretty interesting. I’ll try to keep it as short as possible. So I was a college student. I was doing some freelance work on the side. This is way back in 2007, and I was helping out a couple of friends doing a startup and we were hand coding websites in html.
That was our side gig while we were in college. So my friend showed me this web application, which allows you to create websites without having to write a line of code. And that was WordPress and I got hooked ever since. I was also blogging on the side. I was on Blogger, so this got me to move to WordPress.com, which eventually got me to self hosted WordPress.
Then I was building websites on the side and I got hooked on the entire ecosystem. It was my first foray to open source as well. And ever since I’ve been on it. Then WordPress has led me to different ways. So even after college, all the jobs that I did were related to WordPress. I was freelancing, I was doing some journalist work on the side, but even though that was my focus, I did try to have WordPress in my life one way or the other.
Then briefly, I switched paths. I was working in a bank. I moved away. So I’ve done a lot of odd jobs, but any opportunity that I had, I always had WordPress. So eventually, somehow that journey brought me to Automattic where I joined as a Happiness Engineer.
And as of 2020 I moved my role. I’m currently working full-time on WordPress Open Source because I believe the open source software is very close to my heart. That’s what it’s literally given me everything that I have today, and I’m immensely grateful. So I’m excited to be working full-time on WordPress.
I was a community deputy. I still am. And from 2020 through 2022, I was supporting WordPress events helping WordCamps and meetups. So from 2022, I’ve been working on what you mentioned about me before. I’ve been an open source program manager, and I’m trying to improve or support the WordPress Contributor ecosystem.
To help Five for the Future on one side and to help volunteer contributors or selfs sponsored contributors. And one of the initiatives that I’m working with, the Contributor Working Group is to create a mentorship program. So that’s my story in a very capsule type format.
Doc Pop: Yeah. And I wanna say you’ve had a very interesting life. I read your story on the Hero Press post. So if people wanna hear a little bit more in your own words about how WordPress changed your life and made you so passionate about WordPress and Open Source, they can find that on Hero Press.
You mentioned the WordPress Contributor working group, and we both talked about it a little bit. What led to the development of the WordPress Contributor Working Group and what are its main objectives?
Hari Shanker: Ooh, that’s an excellent question. So the Contributor Working Group was formed as a result of some major gaps in the workforce Contributor ecosystem. So since last year, folks working on contributions, they’ve identified some issues with Five for the Future and what was contribution in general?
So these are things that have already always been talked about. So as part of my work, I decided to do research and I spoke to a lot of contributors. I read a lot of posts. I did some of my own experiments and I published a WordPress Contributor journey post in the make project blog, and I asked for feedback.
So the idea is I was trying to showcase how the contribution flow currently works in WordPress in that post. And the feedback that I got was that there’s currently a problem. So people come into WordPress, they want to contribute. But they get stuck at some point. So what is the blocker? The blocker is that there’s too much information or they’re unable to find guidance.
So that seems to be the biggest problem. And a couple of the recommendations that we got from folks, in fact, that actually stood out from all the feedback that I got, so this post is actually in the Make project blog. So if you look at the comments, the major theme that stood out was there’s a need for mentorship, there’s a need for people, there’s a need for contributors to support other people.
So there’s a bunch of other things that can be done to improve the contributor experience, like improving the tooling and improving the overall UI/UX of contribution. But mentorship seemed to be something that really stood out. So I thought about it a bit, and I discussed it with a couple of community members. So there was a WordPress Contributor working group that was created during the pandemic for the make community team.
So I spoke with the folks who used to organize that and I’m proposing that we relaunch this working group with the idea of creating a mentorship program. So this was a proposal I was not expecting a lot, but I was overwhelmed by the positive response to that proposal.
So following that we set up a working group. We launched a working group. We put out a call for volunteers, which also got an overwhelming response. And in the meantime I thought about this a bit, and created a framework for testing this out. We know that mentorship is important, but we need to see if this works right.
So the working group was formed and in our first chat I shared an example of what this would look like. And again everybody seemed to be interested. And together we started working towards that. We started iterating on it, and we created a pilot. So yeah, but that’s the story of how the working group came into place.
And we are currently focusing exclusively on mentorship. So mentorship as a way to improve the entire contributor experience for WordPress.
Doc Pop: And in the next segment, we’re gonna talk about the Mentorship Program more in depth. But I wanna go back to that proposal and the research you were doing where you found out the blockers for new contributors was just knowing how to contribute and that’s what led to the Mentorship Program.
I’m curious, were you seeing that this was a unique problem to like individual contributors versus contributors that are sponsored by Automattic or sponsored by a company as part of Five for the Future or was it pretty much the same problem across the board?
Hari Shanker: That’s an excellent question, Doc. So I would say that this problem is faced by everybody. Even if you’re a sponsored contributor or a volunteer contributor, you face this issue because I spoke to several sponsored contributors who faced the same problem and they were able to get through it because there was somebody in the company that they were working for to support them, right?
Volunteer contributors did not have that luxury. They would try contributing, but they would get stuck at some point. So for some teams, it’s fairly easy to contribute, for many others it was very difficult. So I would say that both sponsored and volunteer contributors had the same problem.
Sponsored contributors had the advantage of having somebody who is already in that company who also contributes being their mentor. But for volunteer contributors, it’s an entirely different story. They do not have access to this kind of mentorship, which often causes them to drop off.
And there’s a lot of things that we can do to improve the contributor experience. But since workers is an open source project, that takes a lot of time and work. But mentorship seemed like a low hanging fruit for lack of a better metaphor. Because we already have a very active community of contributors, many of them who’ve been contributing for a long time and they know the ins and outs.
So if they could help somebody who knew who was coming in, that will definitely make the process easier for them and help them to stay long term. So that is the idea, which brought us to mentorship. And yes, it is relevant for everybody.
Doc Pop: We are going to take a short break and when we come back, we’re gonna continue talking to Hari Shanker about the mentorship program that is coming for WordPress to help bring people in to contributing and make it easier for them and share what they’ve learned already. So stay tuned after this break for more Press This.
Doc Pop: Welcome back to Press This, a WordPress Community podcast on WMR. I’m your host, Doc Pop. Today I’m talking to Hari Shanker about the WordPress Contributor Working Group and the new mentorship program. Before the break, we talked about the blockers that new contributors face, and those are largely just learning how to get into WordPress, how to contribute.
And as part of the research that Hari’s been doing, he has found that the best way to solve this is through a mentorship program. So we talked about that in the beginning of the show. Hari, can you elaborate on the pilot for the mentorship program and what are the expected outcomes?
How does it work? Just give us the rundown.
Hari Shanker: Oh, absolutely. So. Well, we decided to do the pilot as an experiment. So as part of the research that I did and from all the feedback that I got from folks both inside the contributor working group and from the community, we identified the problem and we know a solution which is mentorship, but how do we test this?
What is the best form of mentorship? Mentorship itself is a huge topic, and there’s so many ways that you can mentor folks. We need to do this quickly because I personally believe that WordPress is in a very unique space in history where it needs more new contributors coming in.
And we need to test this out. We cannot wait to build an ideal program. So, which is where the pilot comes in. We discussed this and we identified a test or a pilot or an MVPR, a minimum valuable product. So that’s where we are coming from.
And in this pilot we are attempting two types of mentorship. One is a cohort based mentorship and one is one-on-one mentorship. So we are gonna put 10 people, volunteer contributors and new contributors. We have a mix of some folks who are slightly experienced. So these are mentees, these are folks who will get mentorship. We’ll be trying to pair them with 10 mentors. So these mentors are ideally veteran contributors who’ve been around for a while. They know their way around the project, and they work together for four weeks in asynchronous way. This happens in the Make WordPress Slack. We will be creating a dedicated channel for this.
So in these four weeks, for the first two weeks, the folks, the mentees, learn about the project. So they find out about how the project works, what are the different Make teams and, and certain skills, like how are decisions made in the WordPress project and like different other aspects of the project.
Like for instance, WordCamps and meetups. And how to communicate in the project, how decisions are made and essentially the ins and outs of how the project works. So one thing that I wanna state is this is a very low effort program for the mentor and the mentee. And so it doesn’t take more than three to four hours a week because we understand that the folks coming in here are volunteers. Both the mentors and mentees, so we don’t wanna take up a lot of that time.
So in the first two weeks they get a very good idea about the project. And so there’s two types of mentorship, as I mentioned. There’s cohort based, like a group mentorship, which happens, and each person is connected to a mentor.
So every week the mentee chats to the mentor. The mentor provides them guidance and support, and they help them identify the teams that they wanna contribute to. And by the end of the first two weeks, they will have a good idea of what the project is and they will decide which team or teams that they wanna contribute to.
So for the pilot, we have six teams, so that would be the core team, the test team, the Polyglots team. We’ll have the docs team, the photos team, and am I missing something? Yeah. So yeah, there’s about two more teams, which hasn’t come to my mind real quick, but yeah, we have around six to seven teams in our pilot.
So we have mentors from each team inside the cohort. So all these folks, by the end of the first two weeks, the mentees will have learned a bit, a good idea about what the project is. And in the next two weeks, they actually start contributing to the team of their choice.
So this is where mentors from the specific teams come in. At this point, mentees pick whichever team that they want to contribute to. And the mentors representing those teams, they work with the mentees and help them make their first set of contributions. So they learn the ropes.
As opposed to a typical Contributor who sort of comes to the project and doesn’t know which handbook to look at or which Slack channel to join, there’s a mentor to guide them, to onboard them through the project to help them make their first contributions. So for the next two weeks, they will either make a contribution or a series of contributions to the make team or teams of their choice with the help of this specific mentor.
And by the end of the four weeks, every participant in the program, our hope is that they will get a very good idea of the project and they will have made a first set of initial contributions. And these folks, as they work with the mentors, the mentors will give them a very good idea of how things are, they will have built a very strong bond among themselves and they’ll feel a sense of belonging to the project.
And you asked about metrics. So as of metrics, our hope is that if at least 50 to 60% or even 70 to 80% of these people will decide to stay and contribute long term, I would consider that to be a win, but that is a hope, actually. And we are actually viewing this in a very experimental sense.
This is essentially a huge experiment and I’m hoping to learn from this as much as possible to see how we can iterate this program and build this into something that is more scalable. And I hope for the future where every new contributor coming into WordPress gets access to mentorship.
Doc Pop: Are you familiar with any other open source projects that are doing some sort of mentorship program like this?
Hari Shanker: Oh, absolutely. In fact, many major open source projects have mentorship of some sort. I believe the Linux Foundation definitely has that. Google, not just the open source projects, the Maps program and the local guide program. They have mentorship.
I know they’re not open source, but those are very good programs that I’ve looked at for inspiration. And many other major open source pro programs like Drupal. Several big projects. They have mentorship of some sort built into them. And for this program, we’re trying to build something unique because many of those mentorship programs have one-on-one relationships associated with them. So we are trying a cohort-based approach for now, and my hope is that we have mentorships associated with each Make team. So, yeah, several open source projects have this built in, which is something that WordPress has not had so far.
And that’s the problem that I’m trying to solve with this Contributor Working Group.
Doc Pop: WordPress is a very complex thing. You’ve got the docs team, you’ve got a performance team, core team, people working on Gutenberg. I’m sure I’m leaving out stuff, but you’ve got a lot going on. I am wondering if the fact that we might need mentorships to help people contribute is a sign that it’s too difficult to contribute to WordPress, or do you feel that WordPress is pretty much as optimized as it can be?
And this is just when you have something so large and so multifaceted, you’re gonna have to have some sort of solutions to help onboard people.
Hari Shanker: So I agree with the part where you said that WordPress, at this point, it’s not very easy to contribute. I mean, the process has become a lot easier over time and there are ways that folks who are very new also can contribute. For instance, there’s a photos team where all you need to is to click a photo and if you speak a different language other than English, you can contribute as a polyglot contributor.
But overall, I would say that if you are new to WordPress, if you want to contribute, the process is not exactly super easy. Which is where mentorship comes into the picture. So, I’m trying mentorship as a way to see if having somebody to walk you through the process of contributing solves that problem.
But there needs to be an overhaul of the system as a whole to make the process a lot easier. I don’t know the exact, the best way to do that. One of the objectives behind this program is to try and find out what we can do to improve. The WordPress Contributor ecosystem as well.
So the feedback that we get from new contributors is very, very important. So, the feedback loop is built into this pilot, and I hope as we do more of these experiments, we will have the feedback built in. So the feedback that we get from these new contributors who come in who say that, Hey, this is not working, this handbook is very difficult to follow, that will help us give the feedback to the Meta Team.
The meta team is a team that helps build WordPress.org to improve the Contributor ecosystem, to make our tools easier, to make our processes easier, and to generally work with other teams to ensure that the process of contribution, the barrier of contribution gets lower.
Doc Pop: I totally agree that sometimes when you’re going through something, you’re learning how to do something. You may not be taking notes on what’s painful or you may not really have a good idea of what exactly is painful until you kind of talk about it. And I kind of feel like this is a good opportunity for the mentors and the mentees when they’re talking about stuff, and then the mentees to go and talk to the rest of the program about it.
For these ideas to get vocalized more and expressed and described in more detail in a way that maybe will help the project be easier to contribute without mentors. But that’s kind of a nice side effect of this program.
I wanted to ask you, we’re talking about a pilot program. It sounds like it’s about two weeks of kind of educating the mentees and maybe a four week project kind of overall. I think I’m kind of close on that. What is the goal for next steps once this program is done? Once the pilot’s done, what do you think the next steps are gonna be in what has already happened so far?
Hari Shanker: Cool. We have big plans. So immediately after the pilot is over, which is to clarify two weeks of learning about the project and two weeks of contributing. So a total of four weeks, our hope is that our contributors learn everything about the project and start contributing to a make team.
The first thing that we are gonna do, when I say we, I’m referring to the Contributor Working group. Our goal is to evaluate how the program went because we are really viewing this as an experiment. We want to learn what worked, worked well, what did not work well, where can we improve. So we are gonna try and get this information as much as possible from our mentees through a survey and through conversations with mentors and both mentees. So that feedback will be very critical.
So that’s exactly the reason why we’re doing this, as I mentioned. So we know that mentorship is a requirement, but we need to test to see what is the best way to mentor folks. So we are actually approaching this from that mindset. So once we have that information, we are gonna try and use it to build our next cohort, which we’ll hopefully have at least one cohort in one more cohort in 2023.
And to use those learnings to improve the program or to make changes. And to keep iterating on this to see where things go. Another area that is our immediate next step is to see how our contributors are performing. So folks who have graduated from the mentorship program, are they motivated enough to keep contributing? Do they keep contributing or do they stay or do they go away? And of course there’s another important metric, which is whether they complete the program. Cause this is a volunteer program and everybody joining, both our mentors and mentees are volunteers.
We need to see if folks do complete the program, which I hope they will because we are designing it that way. But yeah, essentially this is an experiment and our focus is to make you pick up the learnings from this experiment and use that to build more cohorts and more mentorship programs.
And our hope is to keep on iterating, do more cohorts, and build a system at some point in the next two or three years where any new contributor coming into WordPress gets an opportunity for mentorship. It could be a one-on-one mentorship. They could have an opportunity to be assigned to a mentor or maybe there could be ongoing cohorts, which happen in a certain period so they could join one of those cohorts and get mentored.
Or maybe each team each make workers team has its own mentorship program. So some teams are actually experimenting with this. I believe the training team has just put out a blog post on implementing their own mentorship program. And my hope is maybe all teams have that. Maybe somebody who just wants to contribute to core but doesn’t really wanna learn about the project, they can join the core team’s mentorship program.
So I hope to pick up all the as much learnings as possible from this program and to pass it along to the good folks who maintain all these make teams and to improve the entire contributor ecosystem. So those are the goals of the working group.
Doc Pop: And that’s a great spot for us to take our final break. When we come back, we will continue talking to Hari Shanker about the WordPress Contributor and mentorship programs, as well as Five for the future and what agencies need to know about contributing to WordPress. So stay tuned for more after this break.
Doc Pop: Welcome back to Press This, a WordPress Community podcast. I’m your host Doc Pop. I’m talking to Hari Shanker today about the mentorship program and the contributor working group that has been brought back to life as a way to help bring people, in particular new contributors, into contributing for the WordPress Project.
And I mentioned Five for the Future. I think you brought it up a few times as well. This is a kind of program that’s not enforced in any way, but it’s sort of a goal that everybody who’s profiting, everybody who’s benefiting from using WordPress, hopefully will give back 5 percent of their time. And if this is a successful company, that they would have like 5 percent of their workforce or working time, would be contributed to making WordPress better because they’re benefiting from it.
And I think that kind of ties into this because there might be small agencies out there, or web developers who make a living off of designing websites and maybe feel like they should be giving back to WordPress or maybe even feel like they a passion project that’s part of like an open bug or something that they want to get involved in.
They selfishly want to make WordPress better not just out of the kindness of their heart. And I guess what I’m getting at is this sort of program is aimed towards the Five for the Future goals as well as just people who want to kind of get started with WordPress.
Is there anything else that these smaller groups, like individual web developers or agencies, is there anything else that they need to know about contributing at the moment for WordPress? Is there any other good programs to kinda get them started?
Hari Shanker: That’s a great question actually. And just to elaborate a bit on Five for the Future. So the goal is up to 5 percent. So not everybody, and especially when we are talking about small agencies with 10 people. So for a 20 person agency, 5 percent is one full-time employee, and they may not be able to dedicate that kind of resource towards WordPress.
So, I understand that companies work differently, so the goal is up to 5 percent and whatever an agency or a company or even a freelancer feels comfortable with, they can contribute, even if it’s one hour a week. That’s totally fine. That’s very valid.
So you were asking about programs for agencies or ways agencies can work on this. One of the things that I’m working on, apart from the mentorship program, apart from the contribute work group, is to create a space where agencies get guidance on how to contribute.
So, this was mentioned in the research post that I published back in the day. So even if you’re a company and you pledge to Five for the Future. You go to the website, you sign up, or you’re an individual, you edit your profile and you pledge X number of hours towards contribution.
That’s it. I mean, it shows up in your profile, but you do not get any guidance on how to contribute at this point. The project doesn’t do that, right?
So this is the problem that I’m trying to solve, and specifically for agencies. I spoke with a lot of folks,but I actually noticed a few agencies, a few companies who had signed up but who were not making a ton of contributions.
I reached out to a couple of them and the feedback that I got was that they did not get any guidance on how to contribute. So our problem is not lack of information. We have too much information. So this information is buried in so many different places.
It’s in the handbooks, it’s in make blogs, it’s in Slack. It’s so hard to find, especially if you’re a new person into this contributing ecosystem, which is where the mentorship program comes into the picture. So, the thing to do as part of my work is to solve this problem. So to create something, to create at least for starters, maybe something like a detailed overview of how an agency can start contributing.
There’s so many ways that you can start contributing. Like for instance, you don’t really need to dedicate a certain number of people who work full-time towards this. Even if you’re an agency, you don’t even need to start contributing code.
So if you take a few pictures and if you put it out on the photo directory, that’s a very valid contribution, right? So to share that kind of information and on how to organize contributions as a company. So many companies do this in different ways. Some folks, they do this on their own time.
They dedicate a certain number of hours. Some folks, make contribution part of their sprints. So my hope is to create something which provides all this information to companies and individuals so that they get an idea of how to contribute.
Doc Pop: And I think that’s a great spot for us to wrap up this episode today. Hari, thank you so much for joining us. If people wanna follow you and learn more about the project you’re working on, what’s a good spot for them to do that?
Hari Shanker: Thank you, Doc. I’m Hari Shanker on Twitter, on LinkedIn. I’m definitely on the make.blog. All the Five for the Future News goes out in the make.WordPress project blog.
And I just wanna take a quick minute to thank you for inviting me to this talk. I really enjoyed this conversation and you’ve asked me some excellent questions. So it was so much fun discussing what is really close to my project with you. So thank you so much.
Doc Pop: Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.
Bringing real-time collaboration or collaborative editing to WordPress will be the focus of the third phase of the Gutenberg project. It started off with the block editor in WordPress 5.0 and has by now progressed to Full-Site Editing aka the WordPress Site Editor. Adding real-time collaboration will be the second-to-last phase, while the final phase will add native multilingual capabilities.
Lead Architect Matias Ventura recently posted a preliminary outline of what is planned for Phase 3. The planned changes will not only bring new functionality to WordPress but also necessitate rebuilding (large) parts of its interface. The developers also predict that collaborative editing is going to be the most challenging to build due to the scope.
Reason enough to take a detailed look at what we can expect. In the following, we will go over what real-time collaboration is, what’s planned for this update, and the consequences for the WordPress platform. We will also go over ways you can already try out more collaborative workflows on your WordPress website right now.
What is Real-Time Collaboration?
If you have ever worked on a Google document together with other people, you already know what collaborative editing is. It is the ability for several users to edit a document at the same time, comment on make changes to other people’s work, and use shared assets together.
This allows you to work on a single document collectively instead of giving each person a separate copy and combining their individual input later. You are also able to assign different roles to users that decide whether they can only see, comment on, or edit the content.
Doing so saves time and effort, improves communication, and allows you to divide the labor. It can also result in better outcomes and makes the current work product available to every team member at the same time.
Other software solutions also offer this functionality. Examples include Canva, Sketch, and Microsoft Office 365. However, it is currently not possible in WordPress, at least not by default. While you can work on content pieces together, it’s only possible to do so one user at a time. When one person is in the editing screen for a particular page or post, anyone else who tries to access it gets locked out or needs to kick out the original editor.
“Supporting these workflows is not just about concurrency, though, but also about lifting restrictions that have been present in WordPress for a long time, such as locking a post when two people try to edit at the same time,” Ventura said in the post.
With the planned real-time collaboration, it will be possible to work on content together as a team instead — right in the WordPress interface.
Why Do We Need Collaborative Editing in WordPress?
Yet, why is it the goal to implement this? After all, you could already simply use a Google document for the collaborative part and then copy over the result.
However, copying and pasting content from Google Docs to WordPress does not always work perfectly. It can lead to errors and need reformatting before you can publish the content. In addition, any images included in the document first have to make their way over to WordPress. With a native solution, none of this would happen.
In addition, there is a bit of a lack of collaboration tools in WordPress overall. Unless you install plugins for that purpose, there is no way to leave comments or feedback for other authors and users. Therefore, you often need to rely on other, asynchronous tools, like email or Slack to coordinate.
Doing so will also often result in one person having to implement the suggestions from the rest of the team. Seeing as many websites and content strategies are run by teams, giving people tools to collaborate directly in the environment they are working in would go a long way in making the creation process more seamless.
Plus, since the WordPress block editor can do both content and design, it would also help designers and content creators work together better. While one person can take care of the written part, the other can already start prettying it up.
Finally, offering real-time collaboration is also simply a good way to improve the WordPress CMS and make it into a mroe modern piece of software.
What Exactly Are the Developers Planning?
In his post, Matias Ventura lays out the preliminary goals and ideas the developers are focusing on. Here is a breakdown of what they include.
1. Real-time Content Collaboration
Naturally, this is the centerpiece of the entire phase. The goal is to provide the necessary infrastructure and UI to allow multiple users to work together on the same content simultaneously. To create, edit, and customize web pages and posts as a team.
2. Asynchronous Collaboration Tools
However, working together on content doesn’t just mean the ability to be inside the editor at the same time. You also need tools to communicate effectively about what you are doing. Gutenberg Phase 3 also aims to provide those, including things like:
Some of this is currently already possible through plugins but the goal is to make it native.
3. Improved Publishing Workflows
Another goal is to provide better tools for creating, editing, reviewing, and publishing content within WordPress. This can include features such as:
Defining editorial requirements
Setting customized goals, e.g. a certain number of words or images
Prerequisites to complete before publishing is unlocked such as setting a featured image, etc.
Support for multiple preview contexts (e.g. members vs no members)
The plan is not to necessarily include all of this in WordPress Core. However, Phase3 will provide the infrastructure to make it possible to implement this in the editor.
4. More Powerful Post Revisions
Naturally, to accommodate the added complexity, you need a more detailed post revision system. The plan is to make it “more visual, aware of individual blocks, and explore adding the ability to schedule revisions across multiple parts of a site”.
What does that mean?
First of all, it would add the ability to revert singular blocks to earlier versions, not just entire content pieces. Secondly, you would be able to update several content pieces at the same time, for example that belong to the same campaign.
5. An Enhanced Media and Asset Library
Another piece of WordPress that the developers want to work on is the media library. They want to provide not only a place for managing visuals but also blocks, block patterns, styles, and fonts.
As part of this, it is necessary to enhance the media library’s design and functionality. Historically this is a part of WordPress that hasn’t seen a lot of work, so it would be exciting to find out how they can improve it.
6. A Global Search and Command Component
The final component that Matias is talking about in connection with real-time collaboration in WordPress is a command prompt such as Spotlight in MacOS.
It would allow users to navigate directly to content or different admin areas as well as run commands like “create a new post†or “insert patternâ€. This is also in response to the surge in AI and to introduce functionality that is prompt-based. A Github repository for this already exists.
Consequences of the Proposed Changes
From the above, it should already be obvious that this will not just be simply another feature that’s added to WordPress. These changes will make it necessary to rebuild and change parts of the WordPress user interface. As Matias says in his post:
To accomplish this, we’ll be looking beyond the editors at the rest of the admin experience.
Especially the library will likely see a lot of work. Other areas include update admin notices and UI design components as well as the admin list views used in posts, pages, categories, templates, comments, and by hundreds of plugins. Those should receive a more modern design and better support for interactivity and extensibility. You can find early concepts here.
So in short, real-time collaboration might change the very fabric of WordPress as we know it. We need to find entirely new workflows and design solutions to be able to incorporate it into the CMS.
That’s also the reason why real-time collaboration is on the roadmap before multilingual capabilities. Many of the workflows have to be already in place before we can tackle native translation options as Josepha Haden Chomphosy and Hector Prieto discuss in this podcast.
Technical Challenges for WordPress Real-Time Collaboration
Of course, to take on something of this magnitude, there are a number of technical challenges to overcome. As states in the podcast episode above, collaborative editing is going to be especially difficult because of the need for real-time communication between different user browsers. If you want to read about the kind of problems that arise from this, read this account by the people who make the CKEditor (in a word, conflicts!).
In addition, you need to take into consideration the diverse user base WordPress has and especially the different servers that they host their sites on.
For example, Google had an easier time to add collaborative editing to their tools because they are hosting them themselves and have full server control. As a consequence, they mostly had to solve for different browsers.
WordPress, on the other hand, runs on a myriad of server setups with various PHP versions and environments. Not all of them are equipped for all types of technical approaches. That’s also why no underlying technology has been chosen yet. Real-time collaboration is really in its early stages. It will take a lot more thinking and proofs of concept before a decision can be made.
Besides, the developers will continue to work on projects related to earlier phases of Gutenberg. That includes adding more blocks, improved tables, a grid layout system, and improving the block API.
How to Test Drive Collaborative Editing in WordPress Today
If you are really curious about the topic of real-time collaboration in WordPress, there are a number of working prototypes and plugins that let you try ou this functionality now:
AsBlocks — Made by Riad Benguella, who works for Automattic, it demonstrates a collaborative editing experience inside the Gutenberg editor. You can try it out online here. It won’t look exactly like this but it shows one possibility. Read the accompanying blog post for more information.
Block Collab — Another prototype by Enrique Piqeras. It seems like it’s not currently under active development but might still be usable.
Multicollab — A plugin offering features such inline commenting, pinging users, marking comments as done, and email notifications. You can find a demo here (requires signup but comes with a 14-day free trial).
One of them or part of one of them might even be the basis for the final feature. It’s not the first time that something first developed as a plugin ended up in core. The WP REST API and Gutenberg itself both started out that way.
What Are Your Thoughts?
Real-time collaboration has been on the WordPress roadmap for a long time. After finishing up the first two phases of the Gutenberg project, it is now the next step. The preliminary roadmap offers an exciting vision of the future of WordPress in which you can work on content together with all the necessary features for effective collaboration, synchronous and asynchronous.
However, making it happen will need a lot of work and planning. The feature itself will probably change the WordPress platform as we know it and also to pave the way for the fourth phase and native multilingual support.
However, if past developments are any indication, it won’t happen quickly but over time. For example, it is not part of the 6.3 release coming in August 2023. So we will see. Until then, share thoughts and give your input on the official post.
Are you excited about collaborative editing in WordPress? What’s your favorite part? What are your concerns? Share in the comments!
Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.
Doc Pop: You’re listening to Press This, a WordPress Community Podcast on WMR. Each week we spotlight members of the WordPress community. I’m your host, Doc Pop. I support the WordPress community through my role at WP Engine, and my contributions over on TorqueMag.Io where I get to do podcasts and draw cartoons and tutorial videos. Check that out.
You can subscribe to Press This on Red Circle, iTunes, Spotify, your favorite podcasting app or you can download episodes directly at wmr.fm.Â
Today we have a very special guest who is an expert in virtual reality, augmented reality, XR, metaverse, whatever you wanna call it, and its intersection with WordPress. But before we dive into the fascinating world of VR, Let’s start off with the big news. You probably heard Apple made a significant announcement that they are about to shake up the virtual reality space.
They unveiled the much anticipated Vision Pro headset, which promises to deliver an immersive and groundbreaking XR experience. This development has sparked a renewed interest and enthusiasm for the Metaverse, VR, whatever you wanna call it. And it holds great potential for WordPress developers and agencies.
So let’s jump into the heart of today’s episode. I’m delighted to introduce our guest, Anthony Burchell. Anthony is a software engineer on ACF and he’s the brilliant mind behind the innovative Three Object Viewer plugin for WordPress. Now, this plugin empowers website owners, WordPress website owners, to run virtual reality experiences, spatial experiences directly through their WordPress website, all while managing the content within a virtual space very familiar to WordPress users. It’s the WordPress dashboard. With this amazing technology. So without further ado, let’s welcome Anthony Burchell to the show. Anthony, thank you so much for joining us. Let’s get started by just telling us how you got into WordPress.
Anthony Burchell: Yeah. Well actually it relates to how I got into the 3D web. I started out when I was very young. I used to make flash games and that naturally progressed to making flash websites, and then I started making 3D flash websites and ironically enough, Apple kind of killed Flash, and I kind of stopped making 3D websites.
So, I started looking into the next thing and at that exact same time WordPress was taking off with Custom Post Types and it was starting to get seen as a formidable way to make websites, not just a blogging platform. Imagine that. Kinda worked out.
Doc Pop: During the intro you probably heard me stumble over exactly what we’re gonna talk about, and I just wanna address that because I didn’t practice this. We’ve got: VR, we’ve got AR, we’ve got the Metaverse. I believe now there’s XR. What is the preferred term that you’d like us to use for this conversation and can you describe what that term kind of means and embodies?
Anthony Burchell: Yeah, so I think XR is probably the one that over the years has stood the test of time. And over the years I mean, like since 2018, I think that people were starting to say that. I think spatial computing is a really good way to say it. And yeah I think that there’s just so many terms.
I think XR is the nice one because when I think of virtual reality, I think of not only being fully immersed, but having like blends of immersion where you can kind of get some of your world inside of a virtual space, but still feel like you’re somewhere.
Doc Pop: And what does XR stand for?
Anthony Burchell: I think the agreed definition is extended reality or something like that.
Doc Pop: Extended reality. Well, it’s definitely the key thing, I think, to all of these technologies, whether we’re talking about VR or AR, or the metaverse or XR, I think spatial is a big component to what we’re talking about,
Anthony Burchell: Yeah, actually I wrote an article back in, I think it was 2019 in WP Tavern and the title of it was, I think it was something like WordPress in the Spatial Computing Future of the internet, just like very buzzwordy title, but that is essentially it. Spatial computing, 3D internet.
Doc Pop: Being able to move around spatially to navigate something is what we’re talking about when we’re talking about spatial computing. And with Apple’s entry into XR, how has the space changed since Apple made their announcement?
Anthony Burchell: I think one of the things is there was a big sigh of relief, at least in the circle that I’m in. I build on the WebXR standard, so that means everything that is happening spatially is happening from a browser and there’s a standard that many browsers, I think all browsers, most browsers have accepted and accommodate.
And this allows you to, from the browser, click a single button and enter. I think there was a big sigh of relief in this community just because Apple, they waited a day. The second day after the announcement, they announced that WebXR will be supported, and fully immersive WebXR. And I found it really interesting because Apple showed nothing, virtual reality, nothing fully immersed where the entire environment you’re in goes away and you’re somewhere.
What WebXR allows you to do is exactly that. So I found it really interesting that the best canvas we have is going to allow. Fully immersive experiences. So yeah, I think the general feeling is not that everyone’s gonna go out and buy a Vision Pro and drop $3,500 on it, but it does show there’s confidence from Apple in web-based standards and in spatial computing in general.
I think that’s the biggest takeaway. And I personally was really excited because my plugin, I’ve already tested it in Vision Pro, using their SDK and everything seems to be working and matching up with the WebXR standards that work with like the Quest Pro, the Quest and the Vive headsets.
Doc Pop: And there’s always been this space, this idea in the XR community that you don’t have to have a fancy headset to be able to experience some of this stuff. There was this idea that some users would maybe just hold up their phone and kind of use it to spatially navigate something by looking at their phone, but pointing it and moving it in different directions.
And so the hope may be that Apple Vision Pro might be good for the Apple Vision Pro community, but it might also bring some interest in to people who might wanna navigate with their phone because it’s gonna support the same standards.
Anthony Burchell: Well, that’s one of the interesting things that’s still yet to be announced by Apple is if they’re going to allow the WebXR standard to work with Safari on the mobile handheld browser. Currently they’ve kind of not to be negative, but they’ve kind of held back a lot of innovation in the WebXR community just because it hasn’t been accepted on the phone, which would allow you to do that sort of like navigating by picking up your phone and walking in a space and that sort of thing.
Currently you could only do that with an Android device. The plugin that I build, I’ve got a way for people to do AR as a target to display a 3D object. The problem is it only works on Android. So I think that’s one of the things that’s yet to be determined.
But the clear good signal is that the Vision Pro will accept this WebXR standard in a flag that you can turn on the Safari browser. So it’s a good signal in the right direction and I don’t find it hard to believe they would not allow this on cell phones in the near future.
Doc Pop: When we’re talking about the XR standards, the WebXR standards, I’m just kinda curious, is Apple kind of signaling they’re gonna be creating their own standards for some things? And are there bridges between these standards?
Anthony Burchell: Yeah. Well, WebXR allows you to sort of have a unified way for having controller input, a way to enter an experience. So like that button that you click enter VR, just having a standard way to know when you’re entering an experience and when it should take over the page.
That’s what WebXR is specifying as a standard, and Apple hasn’t really put out anything as far as like they wanna be a standard. What they’ve instead signaled is that they want to adopt what the current 3D apps are doing, which a majority of them are being built in Unity.
And I found it really interesting when they announced the Vision Pro that they announced it with a Unity logo and said, we are going to support all of the developers that want to build in Unity to bring their creations into the Vision Pro. So they’re kind of just going with what’s working for the industry right now. So I found that really awesome.
But they didn’t sort of heavy handedly say, this is your standards going forward.
One thing that they have been putting a lot of effort into is the 3D file type that they natively support, which is the USDZ Standard. And this is the Pixar file format standard. Think of it as like the Photoshop file, but for 3D assets and they have different versions of these files that can be like a compressed version, or a zipped version that has all of the assets bundled inside of it. So they’ve been really, really focused on that file standard.
The file standard that I personally have put all of my effort into is the GLTF standard, cuz it’s more of an open standard. It’s easier to participate in the working groups that define these standards. So, yeah, there’s all kinds of different directions and people are working in these different focuses, but they’re all coming together with this idea of we need to figure out these interfaces.
Apple kind of was opinionated in saying, this is kind of a stationary device. It seemed like they positioned it as a stationary device because the rooms that they were showing was just a person sitting down mostly. So I think what they’re trying to focus on is the 2D interface interactions and just having a stationary person while companies like meta are trying to do full body tracking and like deeper ways to express yourself and more points of tracking so that you can do that.
Doc Pop: This is a good spot for us to take a quick break, and when we come back, we’re gonna keep talking to Anthony Burchell about what Apple’s announcement could mean for the XR community and what WordPress developers need to know about and tools they can use to get XR running on a WordPress environment. So stay tuned for more after the break.
Doc Pop: Welcome back to Press This, a WordPress Community podcast. Today we’re talking to Anthony Burchell, a software engineer at ACF and the creator of 3OV, Three Object Viewer for WordPress. Anthony, we were talking about what is XR before, and we basically said it’s the standard term is VR and AR and some of the other terms metaverse have kind of come and gone.
XR seems to be the long lasting one. So let’s talk about. What WordPressers need to know about XR? Is there existing XR support in WordPress?
Anthony Burchell: Not natively. You’ll have to go with the plugin. Again, I actually sought out to explore this a year ago, I think in March of 2022 is when I released the Three Object Viewer Plugin. And the plugin was sort of the answer to that question. It was like, what is missing in WordPress right now to get to a bare minimum just 3D object displaying in my site.
And maybe you can click the enter VR button and have it wrap around you. And that was in March of last year. It’s since progressed into an actual world builder with. 3D blocks that you can compose a scene with. To get started now, you could just install the Three Object Viewer Plugin. Another alternative is you could build with the rendering engine that I use in the plugin is called Three.js.
You can very easily embed Three.js inside of a front end web page just right in the header of the file and quickly compose some scenes with JavaScript to allow people to] enter in VR and have a fully XR enabled website.
So there’s nothing really stopping WordPress today, aside from, the file format for the web is, has been kind of agreed to be GLTF files. So you’ll need to add support for GLB files, which are the binary files of a 3D object. And that’s something that the Three Object Viewer Plugin does is in the media library, you’re allowed to upload GLB files and then also an avatar format called VRM, which is very similar to GLB files, but it has more avatar featured metadata and extensions inside of these characters.
So yeah, that’s sort of like how you could compose. In my plugin, you can just open up the 3D Environment Block, which has a bunch of inner blocks that you can select things like models, NPCs, videos, images, and then position them in a 3D scene all within your editor. And it’s all done very natively in exactly the same way that you would build in block-based templates.
So that’s one way. The other way is you could just straight up build it inside of a program called Blender. And there are many artists out there that are looking for work to build blender scenes. And you could just very easily create a simple one object scene and put that on a page using something like Three.js or the Three Object Viewer and allow people to go into it.
Now, that’s the part where it gets a little more difficult, cuz you need player controllers and all kinds of logic that’s what I’ve been focusing on for the last year. So it’s kind of what you wanna build. Like it comes down to what problem are you trying to solve?
And right now the spatial web doesn’t solve a ton of problems cuz we’re still trying to figure out what it is. But I see a future where we’ll have things like shops and permanent AI agents hanging out inside of our shop selling for us, which I’ve already got. If you go to 3OV.XYZ, at the bottom of the page, you can load in my AI that knows everything about the Three Object Viewer Plugin, and you can chat with her and ask her questions about it.
So that’s kind of how you can think about building is I like starting with a problem and going from there.
Doc Pop: I feel like we could talk about front end and back end and I feel like on the front end, and maybe I’m misusing those terms, but I feel like on the front end we’re talking about like the website that visitors come to and it’s got Three.js, so that’s what powers the 3D rendering and the user might have the Apple Vision Pro or they might have a phone or some sort of VR headset.
What I wanna talk about is the, the backend, cuz this is one of the things that always blew me away about Three Object Viewer is basically when you have a spatial scene, you have content, you have a wall, you have another wall, you have ground, you have a character, you have audio, you have objects on the wall or objects floating and the best way to manage content would be in WordPress, it seems, right, a very easy way to just create a bunch of content and manage it, a content management system, and I really like that that’s basically what you’re kind of really leaning on WordPress for, is for managing all the content that makes up a scene and then you’ve got this thing that kind of does some magic and now enables that to be shown on the front end.
Is that kind of a good description?
Anthony Burchell: Yeah. You’re using the Block Editor to compose 3D scenes. It’s exactly that. And the catchphrase of the plugin that I’ve been using and something I’ve been saying for a very long time is a post is a place, and up until now, a post has only been an asynchronous place where you can go and leave comments.
But now it’s becoming a thing where it is a place where you go visit a website. And somebody else might be there with you. There might be an NPC and it might feel like that NPC is real and in the room with you and interacting with you and making personalized recommendations based on you being logged in and in what it knows about you.
So we’re entering this new blank slate really, of the web. It’s an evolution of the web where we can finally break out of these screens and kind of go to the outside and kind of put something in. One of the things I’m gonna be working on soon is AI agents where you can put ’em in mixed reality.
So if you are wearing the Apple Vision Pro and they’re claiming it’s something you can wear all day and they’re aiming, it seems to be a monitor replacement. But the way that I’m envisioning this, is that you could be working on your Gutenberg template, your block template, and then right next to you on the side of your desk, there’s your AI agent making recommendations or maybe holding up signs with a bunch of content recommendations or ways that you can reword things or meta descriptions or just any information. Maybe you got a meeting coming up.
So that’s kind of the way I see the future of WordPress and XR and then with collaborative editing coming soon to WordPress, that’s something that I’m gonna fully utilize on the front end so that I could allow people to collaboratively 3D edit.
I’ve got a working prototype of that today, but I wanna see what WordPress does first so that I can maybe just use that.
Doc Pop: If a client heard the news about Apple’s Vision Pro, got really excited and wants to talk to their agency or talk to a web developer about how can we integrate XR onto our website? What are some tips you have for that seamless experience and for like first time people building an XR website.
Anthony Burchell: Yeah, well one thing I do is don’t put it at the very top of your page. It’s one of those things, it can become a trap. So I like to put it at the very bottom because cursors can click into it and get locked inside of the space. And it’s just not a great experience right now. The UX are still figuring out how to properly get people into experiences.
And the way that I compare it is the mobile web transition. When desktop websites were mobile responsive, were now going to have this new future web where they’re going to be 3D responsive. And for a long time, mobile responsive websites were not very mobile responsive.
People were making separate websites to even handle the mobile traffic and things like that. So we’re gonna do it wrong for a while. But right now the way that you would do it is it would be like a frame. The way the Three Object Viewer does it is you set a preview image, and that’s the image that kind of shows people what room they’re about to enter. And then it has a button in the middle that says Load World. And you click Load World and it’ll render inside of that container, the world. And then at the very top of the screen, it’ll say something like, enter in VR or Enter in AR.
And then you could click that if you were in a device, in like a headset, you would just use your in the Apple Vision pro your hands or your eyes, and look at the button and then do the click motion with your hands. And then it would click the button and then enter you in virtual, fully immersive virtual reality.
And then when you’re in there, hovering above you at all times is a little arrow. No matter where you turn your head, the arrow follows you. And you just look at that arrow and click with your hand and it’ll open a menu to exit the immersive experience and go back to the webpage 2D flat, like a monitor would look on your laptop or on your desktop.
Doc Pop: That’s really cool that you have this like experience with Apple’s headset that we can talk about after this next break. Before we do, Anthony, what is your favorite VR, AR experience you’ve had so far? Like, just a real quick, what’s your favorite thing you’ve done in this world?
Anthony Burchell: I like world hopping in VR chat, just kind of bouncing room to room with friends. That’s probably my favorite thing to do. There’s a conference that it’s called VCAT, the Virtual Market, and every I think summer and winter, they gather a bunch of creators in VRChat and give them a booth where they can kind of express themselves and show their work.
And I love going there with friends, just kind of bouncing booth to booth, trying on the little hats and things that they’re making. I even have a booth for an upcoming VCAT that I’m working on. I think VR chat’s just the best experience right now for the Metaverse. It’s truly the, the, the full package. It’s got full body tracking, all of the features you want.
Doc Pop: Well, we’re gonna take one last break and when we come back we’ll wrap up our conversation with Anthony Burchell about XR experiences and his experience with the Apple Vision Pro. So stay tuned for that.
Doc Pop: Welcome back to Press This, a WordPress Community podcast. I’m your host, Doc Pop. Today I’m talking to Anthony Burchell, and right before this break, Anthony was telling us about his experience using the Apple Vision Pro SDK and Anthony you have not actually used the headset yet, but you have used the SDK and you kind of have a pretty good feeling of maybe how it’s going to feel.
Anthony Burchell: Yeah. So, Apple just, I think like maybe five days ago released, Xcode 15 Beta 2, and this version of Xcode introduces the Vision Pro SDK. And inside of that it also adds a simulator. And the simulator can essentially do everything that the Vision Pro can do.
It essentially is the device. You can get a feel for the interfaces today. The very first thing I did was I opened up Xcode. I opened up the simulator and I went straight to the 3ov.xyc website and I went to the bottom, clicked the load world button, and that’s how I was able to find out if it’s going to work there. And so far the only thing that I haven’t been able to test, and the only thing that they haven’t really implemented an emulator for is in WebXR an input you like the clicking of your finger, that doesn’t, that doesn’t exist yet. So teleportation isn’t working, but it will work once it comes out.
The thing I’m lacking right now is just the headset to get the input controls. But from my understanding, if they are fitting to the WebXR standard, then they’re just going to use the eyes as the laser for where the controllers would be pointing a laser, and then the tap of your fingers as the click.
So it’ll probably do exactly the same thing that the current experiences of other headsets where you hold the controller, you point the laser where you want to go, and then you click the trigger to go there. It’ll probably be that, but they’ll separate the laser and the trigger, so you’ll have two inputs, your eyeballs and your fingers to use those
Doc Pop: We just have to address how crazy that is. So there are existing headsets out there, but what’s really being done with the Apple headset that may make it kind of stand out, may make it the thing that kind of crosses over. It’s definitely the thing people are most excited about is the combination of gestures and inputs.
The inputs are these cameras it has around your eyes, around your face, and it’s actually tracking what you’re looking at. And it’s actually anticipating, I’ve heard, it’s anticipating that it actually knows before you click. So the click kind of confirms it or whatever. But from what I’ve heard, the research that they did at Apple kind of shows that they can actually tell when you’re about to click before you even move your hands.
But the input is gonna feel like your hands are doing something and your eyes are just kind of looking in a direction, and that’s a thing you haven’t been able to test out yet. But everything else you’re saying is kind of working. You actually experienced the WordPress website through the SDK.
Anthony Burchell: Yeah. Yeah, it totally works. And it’s worth noting that the Quest Pro does have hand tracking, and it’s very similar, where you close your fingers to click to go somewhere and I was actually recently at the Meta campus doing a hackathon because they wanted people to be building with the hand awareness and also table awareness and things like that.
So I built a hackathon where we had butterflies that were flying from table to table because it knew that there were tables. So the only difference, it’s gonna be between the Quest Pro and, and the Vision Pro is the hands in the Quest Pro are what you use to point the laser and you just click your finger to go there.
And that currently works with 3OV. So if you want to get a kind of a feel of the interface, you could do that in a Quest Pro today. But yeah, Apple’s really taken it to the next level by separating those and doing kind of I guess behavior analysis on what you’re doing while you’re browsing.
From what they say, it all stays on device. So that’s a good sign. It’s just a really exciting device. I hope I can get my hands on one. They have the developer kits opening up in July. So if any agencies are wanting to start planning things out in July on Apple’s website, I think you can just Google “dev kit Vision Pro”.
They will be opening up an application so that you could get a dev kit. And they’re famously a company that will retrieve their dev kits once you’re done. So you won’t be getting a free Vision Pro, but you will have some comfort knowing that you can start activating on it.
Doc Pop: Well, Anthony, I really appreciate your time today. It’s really fun talking to you about this new space. If people wanna learn more about what you’re working on, what’s a good way to do that, and where can they find out more about Three Object Viewer as well.
Anthony Burchell: Yeah, if they want to find out more about what I’m working on, I blog on the 3OV.XYZ. I blog there a lot. and if you want to get started with the plugin today, it’s a free plugin in the WordPress Plugin Repository. Just search for Three Object Viewer.
I think you can even search Metaverse and it’ll come up, and install that and then make a new post and add the 3D environment block and you’re already started, so yeah.
Doc Pop: Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.
Doc Pop: Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.
Gutenberg 7.5 introduced a new block variations function in the editor. Photo credit: 
Gutenberg 7.4 introduced new color features and enhancements in the editor. Photo credit: 
