Bringing the power of blocks to Widgets

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, widgetWidget A 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 HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. textareas or embed HTML editors.
  • BlockBlock Block 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 shortcodeShortcode A 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 customizerCustomizer Tool 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 GitHubGitHub GitHub 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 slackSlack Slack 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 pluginPlugin A 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 GutenbergGutenberg The 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.

#core-editor, #feature-widgets-block-editor, #full-site-editing

The FSE Outreach Program is Officially Starting!

In May 2020, @chanthaboune announced a new experimental outreach project dedicated to Full Site Editing. Most recently, @matveb shared 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 GutenbergGutenberg The 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. 

How can I join this program/follow along?

To join the FSE outreach experiment, create a WordPress slack account, join the #fse-outreach-experiment channel, and subscribe to the Make Test blogblog (versus network, site) to be notified about future posts. 

Who should join this program?

This is a great program for you if you want to test new features coming to WordPress, and: 

  • You build WordPress sites for yourself or for others.
  • You manage or maintain WordPress sites for yourself or for others.
  • You publish content using WordPress.

If you’re not sure, join anyway and see for yourself!

Thanks in advance for all who join in on this experiment and who help make it better with feedback/questions/etc. I’m thrilled to get started!

Ultimately, this is an awesome way to help build WordPress’s future, and I hope you’ll join the fun. 

#core-editor, #full-site-editing, #gutenberg

Status Check: Site Editing and Customization

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 GutenbergGutenberg The 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.

Header area showing blocks

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 blockBlock Block 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.

Template navigation showing a quick preview for a full page template

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.

Update design flow with checks for every element that has been modified

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 pluginPlugin A 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.

Editing the 404 template

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 headerHeader The 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.

  • ⚒️ Overview Issue and next steps: 24818

Block Themes

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, excerptExcerpt An 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 image A 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.

Block inserter listing a featured image block

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.

  • ⚒️ Overview Issue and next steps: 22724

Navigation Block

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.

Displaying the navigation block

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 coreCore Core 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 APIAPI An 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.

  • ⚒️ Overview Issue and next steps: 27593

Query Block

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 LoopLoop The 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.

A featured image inserted within the Query block

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.

  • ⚒️ Overview Issue and next steps: 24762

Global Styles

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.

  • ⚒️ Overview Issue and next steps: 20331

🕰 Timeline

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.

#full-site-editing, #gutenberg

Join a discussion about Full Site Editing and the future of the Customizer

GutenbergGutenberg The 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 coreCore Core 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 CustomizerCustomizer Tool 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 SlackSlack Slack 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.

I hope you can join us!

#customizer, #full-site-editing

Ways to keep up with Full Site Editing (FSE)

As work on Full Site Editing continues, it’s important that communication around the project is made explicit so everyone can follow along appropriately. Each person will have their own unique needs in keeping up with a project of this scale so what follows is more of a catalogue of ways to keep up rather than a recommendation for how to do so. 

Yearly:

The WordPress.orgWordPress.org The 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/ Roadmap with Four Phases of GutenbergGutenberg The 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/ updated by @chanthaboune and/or @matt. This is the highest level overview of the changes coming to WordPress.

Quarterly: 

Quarterly Updates from Contribution Teams, coordinated by @chanthaboune. These updates give an overview on what each team is working on, struggling with, and how to get involved.

Monthly: 

“What’s Next In Gutenberg?” posts. These updates are wrangled by the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor team and highlight what’s planned for the coming month of work on Gutenberg. 

Block Based Themes Chat. These chats are currently wrangled by @kjellreigstad in the #themereview SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel and are dedicated to sharing FSE changes that will specifically impact themes. Agendas and summaries are shared on the make/themes blog

Biweekly: 

“What’s New In Gutenberg?” posts. These updates are wrangled by the Core Editor team and focus on what’s been released in each biweekly Gutenberg release. Currently, they tend to mimic a changelog.

Weekly: 

Core Editor chats. These chats are wrangled by volunteer members in the #core-editor Slack channel. Agendas and summaries are shared on the make/core blog. They focus on task coordination and relevant discussions around Gutenberg releases. There is an Open Floor period in each chat where people can suggest topics to discuss.

Weekly Gutenberg Design Updates wrangled by @mapk. These posts capture the big discussions and work being done in the design of Full Site Editing and Gutenberg in general.

Weekly Theme Related Gutenberg Updates (new initiative) wrangled by @kjellr. These posts are focused on themes, including everything from current discussions to recent changes, as well as helpful resources for theme authors. 

Daily:

Checking in on FSE PRs and FSE issues on GitHubGitHub GitHub 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/. This will give you a nearly real-time understanding of what’s being worked on by the developers and designers. 


Each of these are reliable ways of keeping up with the ongoing work on the new Full Site Editing feature coming to WordPress. A big thank you to everyone helping with these various initiatives!

Feedback welcome

What kinds of updates or communication might be missing? What might make these current updates and chats easier to follow? Share your ideas and feedback in the comments below! A next step to this work will be refining these communication pathways based on the feedback collected here and elsewhere.

Thank you to @itsjusteileen @andreamiddleton @paaljoachim @mapk for giving me feedback on this post.

#full-site-editing, #gutenberg

Dev chat summary, May 5, 2020

@davidbaumwald facilitated the chat with this agenda. @sageschilling wrote this summary. @marybaum edited.

Announcements and highlighted posts

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team repTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. elections

Nominations for Core Team Reps are still open until May 14. After that, we vote! Thanks to @jeffpaul for getting that process underway.

WordCampWordCamp WordCamps 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 Online 2020 Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.

This year you, too, can join WordCamp Europe’s Contributor Day – even if you don’t live in Europe and weren’t planning to be anywhere near there. But especially if you do! Find all the details in the WCEU post here.Getting a handle

An Experimental Outreach Project for Full Site Editing

Thinking hard about full-site editing? You’ll want to join this experimental outreach project. The deadline to comment on the post or join up is May 14. Questions? Ask @chanthaboune.

APAC Dev Chat + Town Hall Meetings

See the post here. The deadline to comment and volunteer May 18

Core Team profile badges

And finally, a lot of developers (ed. note: and more, like your two-bit copy editor here!) just got Core Team Badges.
The #meta team added everyone who was a Noteworthy Contributor in the core-developer list, going back at least to 5.0; read all the details in this meta-trac post. 

The Core team always wants to attract and support new contributors. So from now on, every release that publishes a credits list will auto-grant the badge.

WordPress 5.4.1

And a big announcement, WordPress 5.4.1 has been released!
WordPress 5.4.1 is now available! This security and maintenance release features 17 bugbug A 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. fixes in addition to 7 security fixes.

Because this is a security release, it is recommended that you update …Merge Announcement: Plugins & Themes Auto-Updates
and to go along with this,

Upcoming Releases

@chanthaboune will release the WP5.5 post this week, so keep an eye out for that!

David will lead another early scrub for 5.5 next week. Date and time TBD. Keep an eye out on https://make.wordpress.org/meetings/ 

@sageshilling mentioned the media team is looking at patterns to add for gallery and would welcome some guidance.

Components Check-in

@dlh brought up the GutenbergGutenberg The 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/ site-editing project as it relates to the customizerCustomizer Tool 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..

  • What can happen in the Customize component that would help pave the way in core for the site-editing component?
  • How can developers familiar with the Customizer help the Gutenberg team?
  • What’s the best use of time in the Customize component for non-Gutenberg tasks? Is it worth it to patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. bugs or build enhancements?

@youknowriad mentioned he’d be happy to have such a discussion and is looking forward to working more in collaboration.

@chanthaboune suggested posting time/day for the discussion on make/core, since plenty of people will join in.

@dlh offered to stop by #core-editor to find a time.

Plugins & Themes Auto-Updates

@audrasjb shared:

  • #50052 Plugins & Themes Auto-Updates is a nearly blank ticketticket Created for both bug reports and feature development on the bug tracker. for the Auto-Updates feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. — Azaozz and others gave code suggestions. They have updated and sent a full patch to TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress..
  • Also, the feature plugin has just auto-updated to 0.7.0 — download and test, please! https://github.com/WordPress/wp-autoupdates/releases/tag/0.7.0
  • They’ll give it few days to soak a bit and to be tested before sending the merge proposal on to Trac.

#auto-updates, #core, #dev-chat, #full-site-editing