annezazu 9:28 pm on September 26, 2022
Tags: core-editor ( 703 ), core-editor-improvement ( 32 )

Core Editor Improvement: Catalyst for creativity and control

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects.

Alongside the addition of more blocks to edit more parts of your site, more design tools are being added across all blocks to both ensure consistency in the experience and to allow folks to customize their site even more, without needing to use CSSCSS Cascading Style Sheets.. This post goes through each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of design tools, what blocks they are available in, the progress made, and some fun examples showing off what you can now do. The result is a catalyst for creativity, with more to come on the horizon.

Typography 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. Support

Visual listing out all of the block with typography support in four columns with a green color scheme.

These settings include font size, line height, font style, font weight, text transform, letter spacing, font family, and text decoration. When combined, these allow you to have new ways to differentiate your content, whether by making something stand out more or less. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle:

Column/Columns
Categories
Code
Comment Author Name
Comments Content
Comment Date
Comment Edit Link
Comments Reply Link
Comment Template
Paragraph
Comments
Comments Pagination
Comments Pagination Next
Comments Pagination Numbers
Comments Pagination Previous
Comments Title
Cover
Home Link
Group
Latest Comments
List
Media & Text
Page List
Post Author
Post Author Biography
Post Author Name
Post Comments Count
Post Comments Link
Post Content
Post Date
Post 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.
Post Template
Post Terms
Post Navigation Link
Preformatted
Pullquote
Search
Table of Contents – not available in 6.1
Latest Posts
Navigation
Query No Results
Query Pagination
Query Pagination Next
Query Pagination Numbers
Query Pagination Previous
Query Title
Quote
Term Description
Verse
Button/Buttons
Archives
Calendar
Site Title
Site Tagline
Table
Heading
Navigation Link
Read More

To see the power of these supports in action, here’s an example of using them to personalize a button:

The audit for this set of design tools is 85.71% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue.

Dimensions and Spacing Block Support

Visual listing out all of the block with dimension and spacing support in four columns with a blue color scheme.

These supports include padding, margin, block gap, height, width, and min height. As the name suggests, they give you exact control over the layout of blocks both in relation to inner blocks (like the layout of a List or Gallery) and in relation to blocks nearby. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle:

Archives
Audio
Tag Cloud
Table of contents – not available in 6.1
Table
Term Description
Spacer
Post Date
Heading
Paragraph
Query Title
Post Title
Video
List
Media & Text
Verse
Categories
Comment Edit Link
Comment Date
Comment Reply Link
AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.
Site Logo
Social Links
Gallery
Button/Buttons
Code
Column/Columns
Comment Author Name
Comment Content
Comments Title
Cover
Group
Heading
Navigation
Post Author
Post Author Biography
Post Author Name
Post Excerpt
Post 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.
Read More
Separator
Site Tagline
Site Title

To show how you can use these tools to refine your work, here’s an example of just using the block gap option to manage the layout of social links:

The audit for this set of design tools is 54.76% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue.

Colors Block Support

Visual listing out all of the block with color support in four columns with an orange color scheme.

This includes text color, background color, link color, gradient options, and duotone filters. These options allow you to do everything from add a custom duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to all featured images in a display of posts to picking unique color combinations for your social links. At a high level, various combinations of these options are available in the following blocks with various ones added for the 6.1 release cycle:

Social Links
Gallery
Calendar
Table of Contents – not available in 6.1
Social Links
Button
Avatar – Duotone only
Code
Column/Columns
Comment Author Avatar – Background only
Comment Author Name
Comment Content
Comment Date
Comment Edit Link
Comment Reply Link
Comments
Comments Pagination
Comments Pagination Next
Comments Pagination Previous
Comments Title
Cover – Duotone only
Gallery – Background only
Group
Heading
Image – Duotone only
List
Media & Text
Navigation
Paragraph
Post Author
Post Author Biography
Post Author Name
Post Comments Count
Post Comments Form
Post Comments Link
Post Date
Post Excerpt
Post Featured Image – Duotone only
Post Navigation Link
Post Terms
Post Title
Preformatted
Pullquote
Query
Query No Results
Query Pagination
Query Pagination Next
Query Pagination Numbers
Query Pagination Previous
Query Title
Quote
Read More
Search
Separator
Site Logo – Duotone only
Site Tagline
Site Title
Social Links
Table
Table of Contents
Term Description
Verse

To see these supports in action, here’s an example of providing your own colors for social link icons that match with the branding on your site:

The audit for this set of design tools is 65.47% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue.

Layout Block Support

Visual listing out all of the block with layout support in one columns with a blue color scheme.

Of note, this support only applies to container blocks (buttons, columns, gallery, etc) since it impacts the layout of blocks within each. At a high level, various combinations of these options are available in the following blocks. Note that no new supports were added for the 6.1 cycle:

Buttons
Column
Columns
Comments Pagination
Gallery
Group
Navigation
Post Content
Post Template
Query
Query Pagination
Social Links

To see these specific container related options in play, here’s an example with the navigation block where you can quickly switch between different configurations as you find which best fits with the 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. of your choosing:

The audit for this set of design tools is 52.17% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue.

Border Block Support

This includes the ability to control color, radius, style, and width on each side of the border. These powerful set of tools allows for some neat ways to decorate everything from individual images to overall columns of content. At a high level, various combinations of these options are available in the following blocks with a few added for the 6.1 release cycle:

Post Featured Image
Column/Columns
Image
Avatar
Button
Code
Column/Columns
Comment Author Avatar
Comments Title
Group
Pullquote
Read More
Search

To see how borders can transform a block, here’s an example showing how a theme author can customize a featured image block to make it stand out even more:

The audit for this set of design tools is 14.28% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue.

The power of combining tools

While this post sectioned out the various design tools to make it easy to catch up on all that’s happened, remember that the true power in these tools comes when they are combined altogether. For a simple yet powerful and common example, here’s a video showing how with some very quick changes you can make a paragraph pop to better call attention to a part of your post:

For a more complex example, here’s a video showing how you can customize your featured image block with various borders and a duotone filter, long before you select the image of your choosing:

More to come

The above simply captures the initial set of work to create consistency across blocks, with tons more planned to offer an increasingly intuitive default experience for all blocks and to stabilize the underlying block support APIs. This has been a massive effort involving a flurry of PRs across multiple different 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/ releases ahead of 6.1. As these tools grow, the question of how best to scale the interface becomes more important, with explorations already underway for a better way to reset values and clarify inherited styles. Tied to this, it’s also important that any omission of support is deliberate in order to ensure a more cohesive experience.

Props to @markoserb for the design help with the visuals you see above and @beafialho for help with the video demos!

#core-editor, #core-editor-improvement

Jon Brown 12:27 am on September 27, 2022

These added controls are great and welcome (some might say long over due 😉 ).

However, as I’ve said before the UXUX User experience on these is _really_ obtuse on how to get to these controls and then how to use them. Yeah, I could figure it out because i KNEW they were there, but lay people aren’t going to naturally discover them or expect where to find them. There are the way to many clicks, and they are just way too hidden.

Finally, all controls need to have a way to input numbers directly, not just select S/M/L/XL. eg. I can’t seem myself ever wanting to set padding as S/M/L.

Thrilled to see these added, just think the sidebarSidebar A 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. UX really needs some better planning.
- mrwweb 10:03 pm on September 28, 2022
  
  Finally, all controls need to have a way to input numbers directly, not just select S/M/L/XL. eg. I can’t seem myself ever wanting to set padding as S/M/L.
  
  @jb510 Quite a few folks, especially those in client services, need that “t-shirt sizing” model to support more consistent applications of spacing throughout a site. You can read quite a bit of the discussion on that on #35306 and lots of high-level thoughts on #38998.
  
  At least for padding, I believe that you can choose whether to enter custom values or use one of the presets.
  - Jon Brown 1:21 am on October 7, 2022
    
    @mrwweb – I do understand the utility, but as someone that does 90% client services, if my client needs to set padding themselves, I’ve failed.
    
    It remains one of my gripes about blocks, which generally still seem to require authors to spend way too much time adjusting inline design settings time and time again for things that ought to “just work” if the theme is built right.
    
    I digress. Wasn’t saying “S/M/L/XL” are bad and should be removed, just saying we ALSO need direct input.
mrwweb 10:02 pm on September 28, 2022

@annezazu (and other authors), a quick accessibilityAccessibility Accessibility (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) note:

The screenshots of blocks with supports for various features are very attractive but not accessible. At a minimum, they need alt text listing the blocks, but a real list would be even more accessible since that enumerates the number of list items (in this case blocks) that have each type of support.
- annezazu 10:12 pm on September 28, 2022
  
  Thanks @mrwweb! Updated the post to list them out individually. I have a sheet as well that I’m happy to pass along if Google sheets happens to be more accessible!
  - mrwweb 10:18 pm on September 28, 2022
    
    Incredible turnaround speed! I’m glad you found a way to keep the pretty stuff and provide all the info too! 😊
mdxfr 7:56 am on October 3, 2022
thanks for this visual list, helpfull.
Testing 6.1 (and 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/ 14.2 also), i can confirm there is an issue in the Border 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. Support List.
- Columns do not have full border support, neither in Gutenberg 14.2 : border radius cannot be set per columns, only on column.
Since Everyone designing price list cards need such consistency, would be nice to close this (big) (forgotten) gap.

>> Can we ship this into 6.1 so we have a final complete upgrade on the column block (and full alignment with its child columns) and make it fully usable ???

see https://github.com/WordPress/gutenberg/issues/41345
border consistency list https://github.com/WordPress/gutenberg/issues/43247
since it is not listed in consistency global checklist, seems Radius control is lost in space ! https://github.com/WordPress/gutenberg/issues/43241

btw. @aaronrobertshaw made a PR on this
https://github.com/WordPress/gutenberg/pull/40925

I’ll continue my tests and report other gap with the above support cards, if any. thanks
Aaron Robertshaw 5:54 am on October 4, 2022

Thanks for the pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” and collection of links @mdxfr.

Columns do not have full border support, neither in 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/ 14.2 : border radius cannot be set per columns, only on column.

I can hopefully help clarify things a little here.

1. The “Columns” 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. does have full border support.
– It opts into support for color, radius, style, and width.
– This provides full control over the border support styles around a complete set of columns.
2. The “Column” block, responsible for individual columns, does currently omit border radius support.
– Radius support for columns likely requires clipping of overflow content.
– This introduces some UXUX User experience issues in the editor where it could also clip the block inserter button erroneously.
– These issues lead to the radius support deliberately being omitted until we have a plan to address them or can evaluate that the positives outweigh the negatives here.

The border support tracking issue does reflect the current state of border support adoption on the two column related blocks. The PR exploring adopting radius support for individual columns is also included within the tracking issue’s table.

I’ve commented on issue #41345 to provide some context as to where we are, the history, and help surface some related PRs.

The result is a catalyst for creativity, with more to come on the horizon.

The good news is the work on adopting all block supports consistently across all blocks continues. This includes radius support for columns, so it hasn’t been lost or forgotten.

As we progress with adopting supports, the tracking issues highlighted in this post are the best place to follow what is happening from a high level.

Anyone is more than welcome to contribute to this endeavour. If there are any particular blocks you’d love to see adopt supports sooner rather than later, please feel free to jump in and create a PR for it. I’d be happy to help out with any reviews as well.

I hope that helps.
- Tran Ngoc Tuan Anh 9:37 am on October 7, 2022
  
  I love these improvements. I think this is a great move and make the 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. editor better.
  
  Is there any plan to bring the block options to tablets/mobiles?
  - annezazu 11:55 pm on October 7, 2022
    
    More likely to explore more intrinsic web design principles rather than a breakpoint related approach: https://github.com/WordPress/gutenberg/issues/34641
- Marc 10:44 am on October 11, 2022
  
  If there are any particular blocks you’d love to see adopt supports sooner rather than later, please feel free to jump in and create a PR for it
  
  yes, i will for sure. Using 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/ only for months within several customer ‘s projects, i will try to highlight what is the most (frequently) needed. thanks
Peter Ingersoll 2:28 pm on October 25, 2022

I was so looking forward to the editor improvements, especially things like dimensions and spacing 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. support. When I went to try out the improvements (and demonstrate to our MeetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. group), I found that what is available is theme dependent. Classic themes offer some or none of the new options.

I understand that there are reasons, caveats, and wait-for-its – I just wish this was communicated more intentionally as vast major of people using WP are using classic themes. At the very least, it is confusing when a new release pops up a welcome / about.php screen that references features not actually available on that install.

Where is the best place to join the conversation to advocate to the non-dev site adminadmin (and super admin)?
- annezazu 11:08 pm on October 26, 2022
  
  Classic themes offer some or none of the new options.
  
  Hey Peter. Thanks so much for raising this. For context, there was a PR around enabling these tools for classic themes so folks could opt in: https://github.com/WordPress/gutenberg/pull/43337 That was pushed for 6.1.
  
  Where is the best place to join the conversation to advocate to the non-dev site adminadmin (and super admin)?
  
  Where do you want to see a change? If it’s in post like this, I can adjust 🙂 If it’s for the About page, it’s a matter of joining that dialogue in the tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. issue: https://core.trac.wordpress.org/ticket/56357 This is too far underway at this point with strings frozen.
  
  If you want to have a larger impact, I’d say join the Marketing team and channel to share these insights. You’ve done so before and I’ve tried to share as I can/adjust as I can but you’re right. There’s a lot of nuance to get right.