Tag Archives: core-editor-improvement

annezazu 7:58 pm on March 31, 2021
Tags: , , core-editor-improvement,   

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-improvement, ,   

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-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-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
  • Image showing Preferences after Gutenberg 9.9

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

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-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: , , 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: , , 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: 

Icon Only view in the Core Editor Toolbar

Text Only: 

Text Only view in the Core Editor Toolbar

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. 

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