Core Editor Improvement: Catalyst for creativity and control – Make WordPress Core

Core Editor Improvement: Catalyst for creativity and control – Make WordPress Core
Skip to content
Make WordPress Core
Welcome!
The WordPress
core
Core
Core 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
bug
bug
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.
Create a ticket
in the bug tracker.
Want to contribute?
Get started quickly with tickets marked as
good first bugs
for new contributors or join a
bug scrub
. There’s more on the
reports page
, like
patches needing testing
, and on
feature projects page
Other questions?
Here is a detailed
handbook for contributors
, complete with tutorials.
Communication
Core uses
Slack
for real-time communication. Contributors live all over the world, so there are discussions happening at all hours of the day.
Core development meetings are every Wednesday at
15:00 UTC
in the
#core
channel on
Slack
. Anyone can join and participate or listen in!
These “
Core
Core
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
tag
tag
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
CSS
CSS
Cascading Style Sheets.
. This post goes through each
category
Category
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
Block
Block
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
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
Excerpt
Excerpt
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
Table of Contents – not available in 6.1
Latest Posts
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
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
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
Avatar
Avatar
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
Post Author
Post Author Biography
Post Author Name
Post Excerpt
Post
Featured Image
Featured 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.
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
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
filter
Filter
Filters are one of the two types of 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
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
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
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
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
header
Header
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
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
Gutenberg
Gutenberg
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.
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
Share this:
Share on Threads (Opens in new window)
Threads
Share on Mastodon (Opens in new window)
Mastodon
Share on Bluesky (Opens in new window)
Bluesky
Share on X (Opens in new window)
Share on Facebook (Opens in new window)
Share on LinkedIn (Opens in new window)
These added controls are great and welcome (some might say long over due 😉 ).
However, as I’ve said before the
UX
UX
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
sidebar
Sidebar
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.
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.
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.
annezazu
(and other authors), a quick
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.
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!
Incredible turnaround speed! I’m glad you found a way to keep the pretty stuff and provide all the info too! 😊
thanks for this visual list, helpfull.
Testing 6.1 (and
Gutenberg
Gutenberg
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.
14.2 also), i can confirm there is an issue in the Border
Block
Block
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
border consistency list
since it is not listed in consistency global checklist, seems Radius control is lost in space !
btw.
aaronrobertshaw
made a PR on this
I’ll continue my tests and report other gap with the above support cards, if any. thanks
Thanks for the
ping
Ping
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
Gutenberg
Gutenberg
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.
14.2 : border radius cannot be set per columns, only on column.
I can hopefully help clarify things a little here.
1. The “Columns”
block
Block
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
UX
UX
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.
I love these improvements. I think this is a great move and make the
block
Block
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?
More likely to explore more intrinsic web design principles rather than a breakpoint related approach:
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
Gutenberg
Gutenberg
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.
only for months within several customer ‘s projects, i will try to highlight what is the most (frequently) needed. thanks
I was so looking forward to the editor improvements, especially things like dimensions and spacing
block
Block
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
Meetup
Meetup
All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through
. 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
admin
admin
(and super admin)
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:
That was pushed for 6.1.
Where is the best place to join the conversation to advocate to the non-dev site
admin
admin
(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
trac
Trac
An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.
issue:
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.
Comments are closed.
Site resources
Email Updates
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
Join 6,694 other subscribers
Recent Updates
Recent Comments
No Replies
Current Release
The current release in progress is
WordPress 7.0
. Planned future releases are listed on
the Project Roadmap
. Feature projects not tied to specific releases can be found on
the Features page.
Regular Chats
Note:
All chats happen on
Slack
Weekly Developer Meetings
: [time relative]Wednesday 15:00 UTC[/time] in
#core
About the Dev Chat
Agendas
Summaries
Performance Weekly Chat
[time relative]Tuesday 15:00 UTC[/time] in
#core-performance
New Contributors Chat
The 2nd and 4th Wednesday of every month at 17:00 UTC in
#core
See all meetings →
Recent Posts and Comments
Team Pledges
2664 people
have pledged time to contribute to Core Team efforts! When looking for help on a project or program, try starting by reaching out to them!
compose new post
reply
edit
go to top
go to the next post or comment
go to the previous post or comment
toggle comment visibility
esc
cancel edit post or comment