annezazu 8:57 pm on June 9, 2021
Tags: core-editor-improvement, gutenberg ( 263 )

Core Editor Improvement: Improve your workflow with List View

As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the latest and greatest to add to your toolbox when it comes to jumping between layers of content and nested blocks. It’s currently visible in the Top Toolbar and will remain open as you navigate through your content. This makes it easy to bounce between the exact pieces of content you want to alter, whether that’s an individual Paragraph 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. at the very end of a post or a Columns block that contains a beautiful selection of products to choose from. Think of it as the ultimate tool to navigate block complexity, select exactly what you need, and easily view all of the blocks that make up your content at once. Better yet, you can toggle it on/off as you need. Check out how it works in action in the video below:

Video showing someone selecting various blocks with the List View and making changes.

Going a step further, if a block has an ID/anchor set, it’s displayed in List View so it’s easier to distinguish between other blocks and reference as you want. Here’s an example with a portfolio anchor:

While it was originally imagined for the Site Editor where you’re dealing with even more layers of content, it quickly became apparent that the Post Editor would benefit from this tool too and it was incorporated into 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/ 10.7. Keep in mind that more improvements are planned and you’ll have access to this feature in WordPress 5.8, so stay tuned and get excited!

Thank you to @shaunandrews and @cbringmann for helping with this post!

#core-editor-improvement, #gutenberg

annezazu 7:09 pm on May 20, 2021
Tags: core-editor ( 395 ), core-editor-improvement, gutenberg ( 263 )

Core Editor Improvement: Contextual patterns for easier creation

We’ve all been there. Staring at a blank page sometimes with an idea of what you want to create and sometimes with a mind as blank as the page. To make the creation process easier and to leap into the pattern filled future, work is underway to suggest 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. patterns based on the block one is working with. Tied to this, when using the block inserter, block patterns will be suggested where possible. In the long run as this work continues and spreads to more blocks, it will be easier to create content and get inspired without leaving the editor.

Exploring integrated patterns

For now with 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/ 10.6.2, you can see how this flow works with a few blocks including the Heading Block, Query Block, Social Icon Block, Buttons Block, and Paragraph Block. In particular, lots of work has been done around the Query Block to make it easier to create beautiful layouts in a few clicks with this powerful block. Here’s a quick visual showing this experience with the Quote Block:

Video showing how the block patterns can be found in the transforms options

You can begin to explore these patterns in three ways:

Browse through them in the Patterns tab of the Block Inserter.
Select directly from the Quick Inserter.
Navigate to them in the transform menu of individual blocks.

Integrate your custom block patterns

On the flip side, if you’re creating your own custom block patterns, there’s a new experimental blockTypes property being worked on that will allow your patterns to show up in the transform menu. Here’s an example of how this works currently. This is still in the early stages though as it’s utilizing experimental components and might need changes down the road so stay tuned! If you do try this out and run into any bugs/feature requests, feel free to share them in the Gutenberg repo.

Help with these efforts

Expect this work to continue expanding both in terms of integrating patterns in intuitive places and in terms of the number of unique patterns. To get a sense of where this work is headed in the future, check out this early PR. If you’re interested in helping in this area, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting Wednesday @ 14:00 UTC. Finally, if you’re wanting to dive into custom block patterns, check out the Learn WordPress course along with the documentation to get started.

#core-editor, #core-editor-improvement, #gutenberg

annezazu 8:41 pm on April 23, 2021
Tags: core-editor ( 395 ), core-editor-improvement, gutenberg ( 263 )

Core Editor Improvement: Refining the Block Toolbar

With a growing amount of customization features being unlocked, the toolbar for each coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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. is being transformed one at a time to make it more intuitive and predictable to use. Since the block toolbar contains the most important block tools, this could help improve your workflow as you’re creating content.

In the same way you might organize tools in a toolbox so you can quickly grab and go, the toolbar is on that same path: grouping related tools based on which level of a block an option impacts. To get a sense of what this actually means, and how it’ll improve your workflows here’s a before and after photo showing the changes in the Image Block:

Before:

After:

Keep in mind that not all blocks have been revamped just yet, but you can follow this issue to keep track. For now, if you’re using the 10.4.1 release of 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/ 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, you can expect to see this update in the following blocks, with more on the way:

Image
Cover
Button
Buttons
List
Heading
Paragraph
Quote
Audio
File
List
Video
Media & Text
Site Logo
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.

The goal of the effort is to simplify the hierarchy of the block, to make it more predictable what goes where. Here’s a visual outlining the groupings:

The visual is taken from recently updated documentation:

Block surfaces properties of the block itsef..
Tools surfaces tools that affect the whole content of the block, such as alignments or positition.
Inline formatting refers mostly to in-text transformations such as bold or italic on a text selection.
Other contains any additional features that do not fit in the other groups.

As each core block gets updated, there will hopefully be a cascading effect, making it predictable to adjust any block how you need to, whether that’s changing block alignment or bolding a specific piece of text.

Thank you to @joen for helping edit this post (including providing the visuals) and for the excellent guidance throughout.

#core-editor, #core-editor-improvement, #gutenberg

annezazu 7:58 pm on March 31, 2021
Tags: block-directory ( 2 ), core-editor ( 395 ), core-editor-improvement, gutenberg ( 263 )

Core Editor Improvement: Easier than ever to find the blocks you need

There’s something magical about finding the exact 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. you want exactly when you need it. When the Block Directory came to WordPress in 5.5, the aim was to allow a seamless way to add individual block plugins so you can create what you want when you want without ever leaving the editor. 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/’s 10.2 release, to build on that foundation, you will now still get results from the Block Directory even if you have a block already available that might do the trick. This helps surface even more options so you can find the perfect fit. Inspired by having more time to read books, check out the example below to see how the experience has changed!

Before

Image of the Block Inserter showing someone searching for the term book with one result showing up and none from the Block Directory.

After

Image of the Block Inserter showing someone searching for the term book with multiple results showing up including a new heading titled "Available to Install".

If you find yourself searching and still unable to find the block you’re looking for, consider creating and submitting your very own 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 to the directory to be found and used by anyone using WordPress 5.5+! Be sure to check out the guidelines and the block tutorial to get started.

If you’re a block plugin pro, join in on efforts to improve the Block Creation documentation to make it easier for everyone to contribute to the Block Directory.

#block-directory, #core-editor, #core-editor-improvement, #gutenberg

annezazu 10:17 pm on March 23, 2021
Tags: core-editor ( 395 ), core-editor-improvement, gutenberg ( 263 ), performance ( 12 )

Core Editor Improvement: Performance Matters

Thank you to @aristath @youknowriad and @priethor who helped with this post.

In case you missed the first post on post/page performance, I’d recommend checking it out first before digging into this post, as it helps give greater context into the breadth of work around performance improvements. This post builds on the discussion by talking specifically about the approach Core ContributorsCore Contributors Core 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. take to managing the performance of the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor itself!

Think of Core Editor Performance as impacting the user experience when creating content. It’s the difference between a jarring experience, with the editor barely keeping up as you type, and a creative one — where adding dynamic content is a breeze with performance hardly being noticeable.

With each 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/, a performance benchmark is run against the last few releases that compares different response times for a large post (~36,000 words, ~1,000 blocks). You can find this benchmark at the bottom of each “What’s New in Gutenberg” post. While this approach doesn’t cover every scenario, and absolute numbers are not intrinsically meaningful, it has helped identify variations in performance for different releases. Generally speaking, while the loading time of the editor is important, pay special attention to typing speed (also known as KeyPress Event speed). This is a far more important measure when it comes to user experience as this is what allows for the smooth experience when working in the editor.

Beyond an overview of neat numbers, what does focusing on Core Editor Performance entail? Pulling from the documentation, the following overall metrics are tracked:

Loading Time: The time it takes to load an editor page.
Typing Time: The time it takes for the browser to respond while typing on the editor.
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. Selection Time: The time it takes for the browser to respond after a user selects a block. (Inserting a block is also equivalent to selecting a block. Monitoring the selection is sufficient to cover both metrics).

Specifically, this work includes everything from improving how performance benchmarks are measured for PRs to smoothing out the experience of using the Block Inserter to continually tweaking block interactions to improving consistency in performance benchmarks. At the end of the day, Core developers take a comprehensive approach when working to meet or exceed these performance benchmarks while improving the user experience for all WordPress users. You can read more about the journey towards a performant web editor in this very informative post from WordPress Contributor, @youknowriad.

The work on performance is never done though (just check this PR out) so, if you’re interested in helping in this area, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting Wednesday @ 14:00 UTC.

#core-editor, #core-editor-improvement, #gutenberg, #performance

annezazu 8:51 pm on March 4, 2021
Tags: core-editor ( 395 ), core-editor-improvement

Core Editor Improvement: Need for (page/post) Speed

Thank you to @aristath who helped with this post.

In today’s world, speed matters whether you’re trying to write a post in the editor or load a page as a visitor. Over the last couple of months, a lot has changed around performance to improve both of these aspects, but the changes might have happened so fast you missed them! This post will focus solely on front end performance with a future post in the works that covers performance-related changes to the editor itself. For now, read on to learn just how speedy the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor makes your site and get excited because what’s discussed here is currently available in Gutenberg 10.1!

Updates to front end performance

As most developers know, you can think of front end performance as the type of performance that impacts SEO and the experience visitors have when they check out your site. Lots of things contribute to the performance of your site including various CSSCSS Cascading Style Sheets. styles, JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. files, and more. While your theme and plugins contribute to what needs to be loaded to create the magic of viewing a page or post, the core editor does as well!

With the merging of this PR, CSS styles are only loaded for blocks used on a page, which cuts down the amount of CSS needed and increases performance dramatically. For context, in previous 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, all styles for all blocks were enqueued in a single file causing extra page load. This means that now only what’s necessary is loaded when you’re viewing content!

After the work was done to separate out block styles, an additional PR was merged for Gutenberg 10.1 to improve the performance of these 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. styles. Since most blocks have fairly small stylesheets, it didn’t make sense to send requests to the server for these bite-sized styles. To resolve this, the tiny stylesheets were inlined, further improving the performance by including everything the browser needs in a single request. Think of this as sending one text message covering a few topics, rather than writing a bunch of individual messages one after the other.

Right now, both of the above changes are the default behavior in FSE, but they are opt-in for non-FSE templates to avoid backward-compatibility issues with CSS overrides in older themes. When FSE gets merged into Core, these improvements will be more widely available and make a big difference for all.

Stay tuned for more

As with many performance enhancements, it’s easier to notice when things break compared to when they are running smoothly. Hopefully, this post gave you a behind-the-scenes look into the work that goes into keeping your sites speedy while using the Core Editor. While a lot of work is put into democratizing publishing in the WordPress project, this kind of work helps democratize delivery, allowing people to get the content they want to consume easier and faster. With changes coming to Google Search related to the speed of webpages, performance improvements for both the front end and in the editor have never been more timely.

The work here is never done though so, if you’re interested in working on improving performance, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting Wednesday @ 14:00 UTC.

#core-editor, #core-editor-improvement

annezazu 3:52 pm on February 11, 2021
Tags: core-editor ( 395 ), core-editor-improvement

Core Editor Improvement: New Preferences experience

Do you like to live boldly and skip the pre-publish checklist when you post? Do you find yourself preferring to see text labels over icons? Thanks to the recent Gutenberg 9.9 release, you now have access to a completely redesigned Preferences experience along with some brand new options to explore that makes it even easier to adjust settings to your liking. If you’re not using 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/ 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, no worries — this update will be included in the upcoming WordPress 5.7 release. You can find the new experience by navigating to Options > Preferences.

Image showing Preferences before Gutenberg 9.9

Here’s a quick overview of what’s new and improved:

More intuitive and user friendly design of the screen itself to make it easier to customize your experience.
New option to toggle on and off showing block breadcrumbs to help with navigating your post content.
An expansion of the preference to show text labels for the top toolbar now possible within the block toolbar.

For a deeper dive, here’s a short video:

If you’re interested in working on features like this for all to use, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting Wednesday @ 14:00 UTC in core-editor.

#core-editor-improvement #core-editor

annezazu 6:07 pm on January 8, 2021
Tags: core-editor ( 395 ), core-editor-improvement

Core Editor Improvement: Drag & Drop Blocks and Patterns from the Inserter

With the launch of Gutenberg 9.6 and Gutenberg 9.7 comes the ability to drag and drop blocks and 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. patterns from the Block Inserter. This new feature might be easy to miss if you’ve grown used to relying on the current ways to add blocks! Here’s a quick video showing how it’s done for both blocks and block patterns:

Video showing drag & drop from the inserter for first a block and then a block pattern.

Important Note: you need to use a theme with registered block patterns (ex: the current default theme and the prior 4 years) .

With this new addition, there are now seven ways to quickly add blocks to your content, whether it’s to write a compelling post, build out a fancy 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. with the in progress Widgets Editor, or create a site using the site editing experiment:

Drag and drop from the inserter.
Select from the inserter.
Type a forward slash followed by the block name: /image or /paragraph.
Click the black + icon at the side of an empty block.
Using the + icon at the top left of the editor which opens Block Inserter.
Hit the Enter/Return key from a currently selected block to create a new block underneath it.
Click on the three dots just above a selected block and choose to add a block above or below the current block.

This is a very new feature so, as you explore, know that feedback and 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. reports are always welcome on GitHub.

If you’re interested in working on features like this, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting on Wednesdays @ 14:00 UTC in core-editor.

#core-editor-improvement #core-editor

annezazu 1:14 am on December 22, 2020
Tags: accessibility ( 45 ), core-editor ( 395 ), core-editor-improvement

Core Editor Improvement: Video Subtitles

While some people might think of the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor as being focused on the writing experience, it’s so much more than that, especially with what’s now possible thanks to numerous core blocks and the future site editing world. This post is about one of these new content tools that you might have missed in the last few months of recent releases: the ability to add video subtitles. With more and more people venturing into the video space thanks to them being easier than ever to create, this new feature packs powerful capabilities for content creators and their viewers alike.

To take advantage of this new feature, just upload a video and use the Text Tracks setting to upload your subtitles as shown below:

The Text Tracks setting options now included in the Video 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..

People viewing your site can enable captions through the settings of the video player. Here’s a screenshot of a video with captions on to get a sense of the experience:

*Example of a paused video with subtitles enabled.*

Now you can engage with your audiences so they can catch what you’re up to whether they might have limited hearing, don’t want to wake a sleeping baby/pet/person nearby, or prefer reading along while watching your video. Happy creating!

If you’re interested in working on features like this, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting @ 14:00 UTC in core-editor.

#core-editor-improvement #core-editor #accessibility

annezazu 8:12 pm on December 21, 2020
Tags: accessibility ( 45 ), core-editor ( 395 ), core-editor-improvement

Core Editor Improvement: Text Only Icons for the Toolbar

A lot of work has been done to improve the infrastructure of the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor and expand what’s possible technically. It is also important to pause and highlight improvements that make creating with the core editor easier than ever before. This post seeks to highlight one of those recent features that might have been missed in the flurry of recent releases: the ability to have descriptive text icons instead of an icon only view of the Block Toolbar. Since the Toolbar is currently one of the main ways we all interact with the Core Editor this is a big change that should have big benefits. Text icons unlock the ability for you to tailor your experience of the Toolbar and helps more people have the flexibility to create with the Core Editor. In particular, these icons improve settings from an 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) standpoint for those relying on tooltips.

To get a sense of just how much of a difference this makes, check out the following screenshots showing the different options available:

Icon Only:

Text Only:

How to find this option

Here’s a helpful GIF that illustrates where you can easily find this setting in the Options menu under the Appearances section:

*Settings can be adjusted under the Options menu in the Appearance section by toggling “Display Button Labels”.*

Try out both and see which works best for you. If you’re like me, you might find times when it’s helpful to use each. Perhaps you’re teaching someone about the Core Editor for the first time, and they find the text-based options easier to understand! Or, you are trying to write a lengthy post and find Icon Only to feel less distracting. No matter the circumstance, the option is there for you to experience the toolbar in the way that works best for whatever you’re trying to do.