The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.?Create a ticket in our bug tracker.
With the Go/No Go session happening this week ahead of WordPress 5.9’s release in December 2021, let’s use this time to dig into any general questions you all might have around Full Site Editing! As it’s possible, please focus questions specifically around WordPress 5.9 as those will be the most high impact to address and not on larger strategic decisions. You are welcome to submit questions using the form below or to leave them as a comment on this post by October 27th:
Keep in mind that because, depending on the questions it’s likely that some answers might take the form of “people are working to figure this out and feedback is welcome here,” rather than a definitive answer. This is especially true for features/milestones that are planned for future releases.
When and where will you share the answers?
I’ll share a recap post on this blogblog(versus network, site) (Make CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.) as soon as I possibly can and aim to do so no later than November 1st, 2021. If there are a ton of questions, they will be grouped with corresponding answers for easy review. You can see what the outcome will look like based on the first round and second round. I will work in the open as I go in a collaborative Google doc that will be shared in #fse-outreach-experiment for anyone who wants to collaborate or check in on the work.
Once the post is published, I will follow up via email with everyone who left their email and a question in the form. For anyone who leaves a question as a comment on this post, I will @ your username in the recap post so you don’t miss out too!
What else will this effort help with?
While the main outcome will be a lovely list of answers to grow community knowledge, this collective effort will also be useful for future documentation updates, potential tutorials, hallway hangout topics, and more.
For more information about the FSE outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.
WordPress 5.8 is already here, an exciting release marked by the inclusion of many Full Site Editing features that have been big-picture focuses in recent times. Because of this important achievement, in contrast to normal monthly updates, this post seeks to review the status of Full Site Editing and summarize the next high-level focuses within GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Phase 2.
Full Site Editing is the lighthouse goal for phase 2 of Gutenberg. As such, it’s good to remember it is a collection of projects that allow site editing with blocks, bringing powerful capabilities for a smooth editing experience.
WordPress 5.8 includes some of these Full Site Editing projects and features; while some of them will continue as ongoing focuses for subsequent Gutenberg releases (⚒️), others can be considered stable and enter a maintenance phase (✅)
Without further ado, let’s look at the current status of the milestones that have guided Full Site Editing work in the last months and the updated scope for Site Editing.
Site Editing Infrastructure and UIUIUser interface
The Site Editing Infrastructure and UI provide foundational work for the rest of FSE projects, mainly in the Site/Template Editor, Template parts, and the numerous APIs that support work around Full Site Editing.
The first two iterations of the site editor milestone introduced editing blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes and all their template files. The ongoing third one offers the possibility of creating custom block templates in classic themes and is available in WordPress 5.8 for those themes that opt-in to the site editing experience. Work will continue to finalize the Site Editor naming and placement: the current Site Editor as we know it in the Gutenberg pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party may evolve for better navigation flows and interactions.
Thanks to feedback from different FSE Outreach Program testing rounds, the next focus for site experience and tooling improvement include:
Global Styles comprises two major areas that fall underneath the global styles umbrella: centralized theme configuration and an interface for manipulating visual aspects of blocks globally.
Theme configuration absorbs things like declaring color palettes, presets, different supports and settings, and toggle on or off the available block design tools (typography, colors, dimensions, etc.). All of this can be managed through the theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. configuration file and is one of the key features available in WordPress 5.8. After a few iterations and open testing, this feature is considered stable and moved to a maintenance phase.
The other major part of global styles is the user interface to make edits to blocks globally. With theme.json in place, the next release cycle will have the Global Styles UI as one of its main focuses, allowing users to tweak the theme easily. Color handling will be an important focus, not only to better theme switch but also to seamlessly integrate color palettes with patterns.
To support the theme building needs outside of the template and template parts infrastructure, there was a need to create many new blocks centered around theme functions. WordPress 5.8 brings several of these blocks, from Site Title, Site Tagline, and Site Logo that allow users to configure site settings with blocks, to the post-related blocks such as Post Title and Post Date, to be used inside a Query LoopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. to display post data.
Although new theme blocks may be added as the need arises and the existing ones will receive incremental upgrades, the basics of this milestone are complete.
Among the theme blocks, the Query Loop Block has been a significant area of the site editing focus in the past months, deserving its own milestone. Taking some of the block APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. infrastructures to the limit, such a powerful block has proven challenging to expose at a user level. As a result of the feedback collected in the FSE Outreach Program, the block has been renamed to clear confusion, and usability enhancements have been implemented before launching it in WordPress 5.8.
With the Query Loop foundations in place, the next iterations will seek to ease the user interactions and flows, even more, thanks to two fundamental Gutenberg tools – block patterns and block variations. The former will continue to help set the inner block structure and content. In contrast, the latter will present the powerful Query Loop’s features in the form of preconfigured blocks and consolidate similar blocks to use the Query Loop Block as their underlying mechanism.
Along with the Query Loop Block, the Navigation Block is another theme block that stands out as a project in its own right. This block has seen great improvements in the last few months, from improved overlays to responsive menus. New blocks are available as well, such as the Home Link block. Shortly, we will see the Navigation block house whole new kinds of blocks thanks to the recent frontend markup adjustments that allow blocks other than links in an accessible way.
Full Site Editing represents a new paradigm in site and theme building in the well-established WordPress ecosystem, and as such, providing the right tools is key to gradual adoption. Tools like the Widgets Editor and Navigation Editor bring block editing capabilities to traditional features that can’t take full advantage of their native block counterpart implementation.
WordPress 5.8 brings the power of blocks to both the Block Widgets Editor and the CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. Users will be able to add blocks in widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas, add widgets and blocks with live preview, and schedule and share directly from the Customizer.
On the other hand, the Navigation Editor has also seen its share of iterative improvements in the last months. Together with the Navigation Block, it will remain an ongoing focus for the next WordPress release cycle.
As mentioned with regards to Query and Navigation blocks, the complexity of the editor increases as site editing capabilities are introduced with advanced block structures and customization options. This highlights the need to expand our APIs and interactions — which are well suited for simple block structures — to better support container blocks.
Another challenging editing experience with the increased number of container and inner blocks is adjusting parent block settings when editing a child block. Users often need to switch between different child and parent blocks to change settings like layout or positioning. In turn, it is necessary to explore Toolbar absorption mechanisms that allow parent blocks to expose their toolbar on their children.
Patterns
At this stage, it is no secret that block patterns represent considerable potential for users to add many blocks with different preset layouts and settings easily. By using patterns, users don’t need to individually add blocks to achieve rich representations in headers, columns, or Query blocks, as patterns act as a jumpstart blueprint that can be tweaked and adjusted to the user’s needs.
An example of the improved interaction block patterns is demonstrated by the Query block, which allows users to select block patterns in its placeholder state. This is just the tip of the iceberg in terms of the ways patterns can leverage the editing experience, and as such, efforts will continue improving pattern insertion capabilities.
Thanks to the recently released Block Pattern Directory, patterns can be copied and pasted into the block editor; upcoming Gutenberg iterations will connect and retrieve patterns from this directory, allowing users to choose from huge amounts of beautiful patterns without leaving the editor. Both to ease navigating the big number of patterns users will be able to choose from and accommodate increased pattern complexity and richness, such as in Query or HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. patterns, revisiting the pattern insertion UI will be an ongoing focus in the months to come.
Several design tools are needed to ensure a wide range of exquisitely crafted patterns can support powerful settings and rich block customizations. These encompass all tools related to the appearance of blocks and range from colors, typography, alignments, and positioning to filters like duotone, cropping, and background media and will need to integrate seamlessly with theme.json mechanics.
Going further, controls like font size, even if exposed as single values to users in the UI, are built behind the scenes to accommodate different viewport ranges. Apart from providing access to the underlying mechanisms through theme.json, responsive-previewing and device-specific editing will be necessary to support this.
To support the ever-increasing number of tools, the sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., while secondary in some regards to the block canvas and toolbar, will need to accommodate many of these tools, whereas the Component System will provide a shared design language between all these controls.
While the above items are our focuses, don’t forget that you can always help with triage, testing issues, good first issues, and reviewing PRs. In particular, if you’re interested in helping with triagetriageThe act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. but don’t know where to start, there’s a course on Learn WordPress for how to do triage on GitHub! Check it out and join us.
If there’s anything we can do to make contributing easier, let us know in the comments or #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.
This post summarizes the top pieces of feedback of the current experience to help inform ongoing efforts after the 5.8 release and as a follow up to a similar post from March. You might notice that some areas of feedback match the original post but that the specifics are different. This is to be expected due to efforts being consolidated around 5.8, causing some feedback to fall in priority.
Keep in mind that this post is simply a snapshot in time and is inherently going to leave out aspects of the experience that haven’t been the subject of calls for testing yet, for example, Global Styles. It’s also not going to go into great detail about all of the hard work that has gone into addressing these items already, whether through PRs or sharing designs that offer solutions.
This section pulls together everything from feature requests for additional options for different blocks, desire for more control over spacing especially for the Column and Query loopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. blocks, general confusion around why certain settings exist in one place and not another (example with the Query loop block, with Color settings, and Columns block), and how to navigate the complexity of settings with more powerful blocks. As a specific example tying in these various items, let’s say you want the Query loop blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to display 3 posts from a certain categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and you want to set various colors for different parts of the set of posts. To accomplish that, you would have to interact with the block sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. settings first to set the category before using the block toolbar to select the number of visible posts. To set various colors, you’d have to use List View or navigate through the nested blocks before opening up the block sidebar settings once more to make sure you’re styling what you want.
Make editing modes distinct (Site, Template, Query Loop block, etc)
Since the calls for testing began to focus on items related to 5.8 in the last couple of months, understanding how best to navigate template editing mode and the Query Loop block became major focuses of feedback. For example, this partially led to the decision to make the Query Loop block’s post content blocks view only. However, while lots of work has been done to provide clarity around what one is editing and adding the right amount of friction, this was still repeated feedback in nearly every test as an area that needs refinement considering how new this functionality is. For example, sharing information in the sidebar upon entering the template editing experience could go a long way in getting a user acquainted with this new experience.
Refine Placeholders & Initial Configuration Steps
With new blocks and new features, the initial placeholders and configuration steps become key to get right in both setting expectations and guiding a person to create what they want. This cuts across many aspects of the full site editing project including template editing mode, the Query Loop block, Navigation block, integrated patterns, and more. For example, if one is adding the Query Loop block with the intent to show a collection of posts, it makes sense to display multiple posts at default rather than just one with the latest implementation. Currently, feedback points to work needing to be done to standardize approaches where it makes sense and to improve each experience overall.
Solidify WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. & Desire for previewing content
Ensure reliability and robustness of the the saving process
Because multi-entity saving (saving multiple aspects at once) is a new WordPress concept and one that underpins many interactions in the site editing experience, this is a key area of feedback to address, especially since the act of saving is so crucial to trust. Generally speaking, feedback falls into the following areas: inconsistent behavior, desire for more functionality, and enhancements to make it clearer what is being saved.
Expand abilities of theme blocks
Since many of the tests relied on interacting with the new theme blocks, numerous enhancementenhancementEnhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. requests were raised to improve the experience of using each. Rather than listing this under improving the settings experience, this felt worthy of a separate call out as leveling up these individual theme blocks will unlock more creative power in using these new features. Whether folks wanted more styling options in the Post Title block or to easily add pages in bulk to the Navigation block, people are already looking forward to the next version of these various blocks.
Increase usability of overall experience
This is a “catch-all” category but an important one nonetheless, as it will help various parts of the site editing experience become more intuitive and streamlined. Similar to last time, what follows is a sampling of items both to get a sense of the kinds of issues raised and the spread:
Removing the post content block creates a confusing UXUXUser experience due to the post content block acting as a “container”.
@desrosj reminds us to check that your GitHub account is linked to your WordPress.org profile (both to show that off on your WP.org profile, but more importantly to ensure any contributions on GitHubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ magically turn into correct props to your WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile)
@lukecarbis published the bug scrub schedule for 5.8, so please add these to your calendar if you’re interested in helping scrub, also reach out to him if you’re interested in running a scrub as well
@ryokuhi published a proposal on Make/Accessibility about a new Trac workflow keyword that the AccessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team would like to consider. If you feel particularly opinionated or passionate about this, please comment on the post.
@youknowriad noted that required Gutenberg changes in Core are made as filters/extensions points and brought to coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. as part of the GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ merge that happens regularly
Schedule confirmed including bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub schedule
@youknowriad shared that trunk is already on Gutenberg 10.4, @gziolo is working on updating it to 10.5 and the big changes (Global styles infrastructure in themes.json and FSE blocks) are coming in 10.6
Feature freeze on Tuesday May 25th (19 days from now) defined as “During the following two weeks, there will be no commits for new enhancements or feature requests. Core contributorsCore ContributorsCore contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. will focus on defect work (aka outstanding bugs)“
BetaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 on Tuesday June 8 (33 days)
@sergeybiryukov shared Plugins update that Parameter names in pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-partyAPIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. functions now use consistent terminology when referring to actions, filters, and callback functions via #50531
@sergeybiryukov shared Themes update that #49487 removes the “Featured” tab on Add Themes screen to match an earlier change in the Theme Directory
@webcommsat shared About/Help update that ticketticketCreated for both bug reports and feature development on the bug tracker.triagetriageThe act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. continues with @marybaum
@francina@sergeybiryukov discussed branching at Feature Freeze and agreed to get through that period and revisit the decision then. @helen noted that the deciding factor will likely be “how much people think they’ll actually be mixing in work destined for post-5.8”
@webcommsat asked for input from Core team on workshop ideas and on-demand materials for contributors as part of WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe’s contributing team; please share your ideas and resources with @webcommsat or @marks99.
The first go/no go date is next week (April 14, 2021), and I’d like to offer a roadmap and some high level clarifications for folks following along.
Full site editing is a collection of projects and together they represent a big change, arguably too much for a single release. The most important context to share is that it isn’t shipping as the full, default experience for users. One of the clearest pieces of feedback from the Phase One merge process was that there wasn’t enough time for our extenders (agencies, theme authors, pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers, site builders, etc.) to prepare for the upcoming changes.
With that in mind, this merge process won’t be an on/off switch. The focus now is not on a full and nuanced user experience, but more of an open public betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. within WordPress 5.8.
With that context, let’s take a look at what is coming up in the next week and beyond..
Next Steps
Go/No Go Dates
On April 14 the GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ plugin will ship v10.4 and shortly thereafter will be the go/no go demo.
The scope is the same as the past few months and focuses on the interface that allows for template editing, a number of new theme-building-oriented blocks, and design tools. This part of the FSE merge will not change the users’ default experience, but instead will focus on bringing tools to the extenders in our community so that they can experiment with their users in mind.
Block theme building based on the theme.json configuration file. (https://github.com/WordPress/gutenberg/issues/29891)
Site-editing-oriented blocks, such as the Query block, Template Part block, and Site Logo block.(https://github.com/WordPress/gutenberg/issues/28744)
Along with the query block, a collection of patterns and contextual pattern transformations. (https://github.com/WordPress/gutenberg/issues/30508)
On June 8 the WordPress 5.8 release will reach its beta period.
The components below are some of the most complex, and the user experience of them will be key. They are all high priority to complete (hopefully for WP5.8), but will be punted if they aren’t ready in time for Beta.
On July 20 the WordPress 5.8 release will reach general availability.
The components below came up frequently in user testing as being confusing and need more attention. Polishing these components has been moved out of the focus for WP5.8 for proper prioritization.
Making the saving flow more intuitive when in the template editor and making changes to multiple areas of a site.
Phased rollout of user-interface for Global Styles and interactions with the template editor & template parts.
The Demo
This has been scheduled for April 14.
Attending
Matt Mullenweg – Project Lead (advocating for the vision/mission of WordPress, and aggregate body of users)
Matias Ventura – Gutenberg project lead (host of the demo)
Helen Hou-Sandi – Lead developer (advocating for CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress., and extender community)
Josepha Haden Chomphosy – Executive Director (advocating for the community of WordPress, and aggregate body of users)
Agenda
Matias will demo the features intended for WP5.8
Discussions and implementation questions
Afterward
Blocking items (if any) will be gathered and shared publicly
If yes: A plan to prioritize and address issues prior to the second go/no-go date of April 27 will be shared
After a few months and a few rounds of testing for the Full Site Editing Outreach Program, this post summarizes the top pieces of feedback of the current experience to help inform ongoing efforts for an MVPMinimum Viable Product"A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia. Keep in mind that this post is simply a snapshot in time and is inherently going to leave out aspects of the experience that haven’t been the subject of calls for testing yet, for example, Global Styles. If you want a more in-depth look at feedback across the testing calls and a full summary of all issues rather than a sampling, please review the summary posts. If you want to help give feedback, join the calls for testing or test whenever you’d like.
While the saving experience was reliable technically and generally intuitive, it has left a lot to be desired and resulted in a fair bit of confusion around expected behavior. This is likely because multi-entity saving (saving multiple aspects at once) is a new WordPress concept and one that underpins every interaction in the Site Editor. Whether it was mentioning desired features, finding bugs, or confusion around how to accomplish a task, this proved to be a robust area of feedback.
The distinction between editing the entire site vs. specific content
Similar to the saving process feedback, this is another area where features technically work but are difficult to distinguish across the experience. For example, one can edit a template directly, but it’s not always clear when one is editing a template or editing an item of content. Beyond just clarity in what one is editing, there needs to be the right amount of friction when switching between content that impacts the entire site vs. content on an individual post/page. This is an area of active iteration and exploration to get the right amount of friction in place, as you can see in open issues like this one around clarifying template vs. content editing, and this one around refining the experience of editing a template part in isolation.
Rethinking Width/Alignment
Currently, alignment in Full Site Editing works to optimize traditional themes that provide their own alignment styles. This approach has served the project well until this point, but it’s a key area to reconsider to ensure a true and reliable WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience. Thankfully, work is already underway in an important PR by @youknowriad to reimagine how this dynamic should allow for more control over alignments/widths when using the Site Editor.
General Usability Improvements
As this work moves into a place of refinement, there are numerous enhancements to consider to improve overall usability of the Site Editor. This is a “catch-all” categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. but an important one nonetheless, as it will help the Site Editor experience move from functional to delightful. What follows is a sampling of items both to get a sense of the kinds of issues raised and the spread:
Placeholders for some of the newer blocks in the site editing experience prove to be both a powerful way to guide people and a point of confusion. This feedback mainly came into play with blocks like the Query Block (including the blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. variations like Posts Lists), Social Icon Block, Featured Image Block, and the Navigation Block. Each currently gets users started in different ways. In the long run, it seems that users will benefit from a standardized, consistent way to interact with placeholder content across all blocks. This is particularly important when viewed through the context of editing a template where you might mostly see placeholder content.
With many existing WordPress sites and themes not yet able to take advantage of Full Site Editing, work is underway to bring the power of blocks when adding, editing, and managing widgets on your site. This is being done to help both bring benefits sooner rather than later to more parts of the site building process for users and to pave the path towards a future full site editing first experience. You can think of these changes as an upgrade of what’s currently possible. For example:
With blocks, widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas will now allow users to create layouts in sidebars, headers and footers, in a way that hasn’t been possible before with columns, separators, spacers, etc.
By supporting blocks, widget areas will also support visual rich text editing by default, without the need to edit HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. textareas or embed HTML editors.
BlockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based widget areas allow users to edit their theme’s template content in an inline and unified experience, removing the need to keep an abstract mental model of mapping boxes to front end results.
Many complex widgets which were based on shortcodes are available as blocks (for instance form widgets), and visually editing them is a lot more fluid and intuitive than the esoteric value hunting of shortcodeShortcodeA shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. editing.
The new block based widget editing experience will have a smooth transition process that will allow developers to replace their widgets with blocks that have similar functionality.
Last, but not least, as part of WordPress’ efforts to maintain compatibility with existing themes, content, and workflows, blocks within widget areas will be fully editable from the customizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. as traditional widgets currently are.
To get more visual, here are two ideas for block powered Widgets sections to bring the above to life:
While this is a stepping stone, it’s one that will ultimately offer an improved experience overall with more modern and expanded functionality thanks to the years of work put into creating the block editor.
To make sure that users can experience the full power of blocks in Widgets, we need to build more blocks for our Widgets! Building a post using blocks is inherently different than setting up your Widgets screen using blocks, and this is a great chance for our community of developers to to test out working in this area. To give feedback, check out this call for testing and share your feedback directly in GitHubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/here. To help with the development process or to follow the project more closely, you’re welcome to participate in #feature-widgets-block-editor in slackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Finally, join the fun and check out the many resources below for building blocks:
Block Creation tutorial that teaches you how to write a block pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
Block Submission tutorial that gives some tips and suggestions for ensuring your block is ready for the Block Directory.
Learn WordPress workshop on Intro to GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Block Development
Block Checker tool which will help you discover any issues that might prevent your plugin from working.
In May 2020, @chanthaboune announced a new experimental outreach project dedicated to Full Site Editing. Most recently, @matvebshared a wonderful post summarizing where Site Editing is today. Building on both, I’m excited to announce that, despite 2020’s best attempts to derail efforts, the program will officially launch with the release of GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.6! Right now, it’s likely that this release will be done 1 week later than usual to give a longer RC period so expect the program to begin around December 23rd. This cycle will focus on testing this PR that introduces a template editing mode. For additional context, you can see the discussion around picking this PR here. Hopefully, aligning the call for testing with the current Gutenberg version will make it easier for more people to participate in testing.
Please keep in mind that this is the program’s first iteration. We’re starting with this first item and expecting the outcome to be a comprehensive list of issues that the Gutenberg team can work on as capacity allows. We’ll also allow an extended time to test this first item to accommodate this time of year.
Moving forward, this program will eventually offer a few items to test back-to-back, with an easy and quick way to integrate feedback into Gutenberg releases. Remember, feedback outside of this program is always welcome and necessary as well — think of it as doing the work to pave the way for future iterations!
What are the immediate next steps?
I will be posting on Make Test once Gutenberg 9.6 is released around December 23rd with an extended time to give feedback. The post will include a testing script, resources for setting up a testing environment, and where to share feedback. I will also share that post in the #fse-outreach-experiment channel to alert everyone who has opted in.
As we approach the end of 2020, it’s good to do a brief recapitulation of where we are standing with one of the major focus areas for GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Phase 2: site editing with blocks. If you are curious about the more detailed tasks ahead of us, the overview issue for full site editing is the best way to follow the updates and progress.
In this post I’ll describe the current state of all the primary projects and comment a bit on how they fit together. Worth noting this doesn’t cover the other projects still under the phase 2 umbrella (like the widgets screen updates).
For all the following items, keep in mind that they tend to illustrate the maximum amount of customization options — the ability to lock down templates, capabilities, design tools, etc, is still a prime focus to account for the different needs of different sites.
Site Editor
The site editor allows editing blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes and all their template files. It allows the user to swiftly navigate between the template hierarchy and make edits across an entire site. To accomplish this, it introduces some new interface elements, areas to manage, and the ability to browse the different templates a theme has to offer. Since the entire template is built with blocks, it leverages all the preview tools that have been built for blocks and patterns so far, allowing users to quickly visualize their contents.
The site editor engine is capable of knowing what elements of a site are being modified — whether a site option, a template part, or some local content, providing a much more powerful and flexible update flow. A site title block accurately saves its data as the site name option, not in the content, for example. While we are not yet focusing on editorial flows (that’s one of the aims of Gutenberg Phase 3) these foundational pieces can allow all sorts of integrations down the road, being very granular around what is being updated in a session.
The site editor opens up the ability to edit and customize parts of the site that used to be only accessible through code editors or ad hoc interfaces. For example, being able to edit the 404 template with the same familiar block tools. For pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and block developers, that means all the blocks being created can now be used in plenty more places of a site without any extra work.
Most of the infrastructure needed to power this editor is already built. What remains to be done is stabilizing loading flows, refining design and interactions, introducing semantic template areas (such as headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer), and connecting the creation flows with what block patterns offer.
The site editor depends on the ongoing focus of building themes with blocks to take advantage of the block editor interface. This year has seen a lot of great collaboration between the theme and editor development groups, which is paramount to ensure the WordPress block editing platform is powerful enough to support all the theme building needs and simple enough for users to interact with ease and confidence. This is an exciting area of collaboration, and something that needs the continued help and feedback from the community. If you are interested in helping shape these projects, the theme-experiments repository can be a good start to peek through.
To support this effort, outside of the template and template parts infrastructure, there’s an obvious need for creating many new blocks centered around theme functions. These includes blocks for the site title, navigation block, post title, content, excerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., author, date, featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., and plenty more.
In the future, rich layout tools — such as full site grid support — will be able to cascade down through the entire experience of the block editor, allowing interactions like snap-to-grid and overcoming a lot of the hurdles alignments currently impose.
The current focus here is on producing a version of Twenty Twenty One using only blocks to help us identify what blocks or block capabilities are still missing. There are also some options for gradual adoption in themes that continue to be discussed.
Out of all the theme related blocks, the navigation block has stood out as its own fundamental project for some time. The work that went into this block has allowed the various block APIs it depends on to evolve and mature substantially, including new support for horizontal inner blocks, a fully fledged block list view, and many more.
These are wonderful results of this specific project because it lifts up the available block tools for all third-party blocks. We are building the coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks with the same tools that are offered through the standard block APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. As an example, many of these capabilities are employed in the Buttons and Social Icons blocks.
With everything expressed in blocks, the opportunities for extending the navigation are also enormous — imagine adding with ease to your navigation a Search block, Social Icons, or a Cart block from WooCommerce. With the navigation becoming a more flexible container it opens a lot of integration points for already existing blocks. Each child block can be responsible for its own set of tools and capabilities while the user is presented with a unified way of building things.
Ultimately, the power of combining blocks is going to allow all sorts of menus to become possible. Themes will be able to provide more than one header pattern for users to choose or swap between them.
The biggest remaining challenge with the navigation block is also one of flexibility and ease of use. Flexibility needs to be balanced with intuitiveness and there’s more work to be done to get the user experience in a great place to be widely released. There’s also some work in ensuring smooth compatibility with current themes.
This is another major area of the site editing focus which also takes some of the block API infrastructure to the limit. If you are curious about block development tools and their latest capabilities, the Query block is a good one to explore, as it leverages nested blocks, inner blocks templates with live updates, block variations, contexts, etc.
Generally, the query block is responsible for controlling fetching and rendering of post types. It is naturally a core ingredient of block themes. It comes with a LoopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block that is responsible for iterating on the results and rendering a template. One cool thing is that interacting with the Loop in the editor automatically updates the template used for all posts in that query. You can add a featured image, change the order of title and date, add a block to display the author, and see it all reflected instantly.
The next steps for this block are ensuring it plays well with the template hierarchy (global query), defining more user friendly block variations, and creating patterns that use it to build great layouts.
There are two major areas that fall underneath the global styles umbrella: centralized theme configuration and an interface for manipulating visual aspects of blocks globally.
Theme configuration absorbs things like declaring color palettes, presets, different supports and settings, as well as being able to toggle on or off the several block design tools that are available (typography, colors, dimensions, etc). It will also allow themes to specify how blocks should look by being able to specify all their default attributes. This accomplishes many goals at once, ensuring that the editor is more connected with how themes wants things to render, provides a solid interface for the mobile apps to understand block configuration, and opens the door for further performance optimization on the front-end since WordPress will be able to load the right styles for blocks when they are actually being used in the page instead of needing to load styles for all, all the time (like themes have to do now with widgets even if they might not be used).
The other major part of global styles is the interface for the user to make edits to blocks globally. This ranges from being able to set the color for Links across blocks to modifying how all Headings ought to look. Global styles operates both at the site level as well as allowing changes to each registered block. A lot of the tools that emerge from this work continue to be released in each major WordPress version in the form of block tools.
In terms of timelines, all of these are in advanced stages and can be used in the Gutenberg plugin already. The main hurdle to include the work in major WordPress releases are the various dependencies between each project when it comes to ensuring a great user experience. The immediate focus is then on completing the milestones, stabilizing the work, and doing as much testing with different kinds of users as possible. For that last purpose, there will be some calls for testing announced soon as part of the Site Editing Outreach Program.
GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/’s Full Site Editing project, or FSE, is progressing steadily, and while there’s much more to do, the core roadmap plans for FSE to be introduced into WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. later in 2020.
With Full Site Editing on the way, what does the future hold for the CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. and for the core Customize component?
At 16:00 UTC Thursday, May 28, we’ll start to tackle this broad question with an hour of discussion in the #core-customize WordPress SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel that will include maintainers of the Customize component, members of the Gutenberg team, and you!
The primary focus of the discussion will be about contributing to the Customizer and to Gutenberg, guided by these questions:
First, a recap: What are the goals of the Full Site Editing project?
What can be done in the Customize component to help pave the way in core for Full Site Editing?
How can developers familiar with the Customizer best apply their experience to assist the Gutenberg team?
What’s the best use of time within Customize component for non-Gutenberg tasks? Is it worth patching bugs or pursuing enhancements?
Lastly, we’ll try to leave some time for an open floor.
If you have any questions about this discussion, or if you can’t attend but would like to add something to the agenda, please leave a comment. We’ll get to as many as we can.
You must be logged in to post a comment.