Tag Archives: core-editor

annezazu 1:14 am on December 22, 2020
Tags: , core-editor,   

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,   

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

Paal Joachim Romdahl 5:55 pm on December 21, 2020
Tags: core-editor, , , ,   

Editor chat Summary: 16 December, 2020

This post summarizes the weekly editor chat meeting (agenda here) held on 2020-12-16 14:00 UTC. in Slack. Moderated by @paaljoachim.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.6.0 RC release

Gutenberg 9.6.0 RC was released 16th December. It will have one week of testing before general release.

WordPress 5.6 release

WordPress 5.6 was released on 8th December.
Be sure to check the forums as well as the Gutenberg repository for user feedback.

Monthly Priorities

December monthly priorities. Along with Key Project updates.

Full Site Editing

@annezazu
Full Site Editing Outreach program is starting up with the launch of Gutenberg 9.6: https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/ Join (SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel)
#fse-outreach-experiment to take part in the exploration.

@aristath
Working on blocks assets loading for FSE themes. Finding ways to address styles for blocks that will be loaded asynchronously via infinite-scoll or other mechanisms. Experimenting with inlining & minifying assets on the fly when a 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. gets loaded.

Global Styles

@jorgefilipecosta
Global Styles Project: We made sure Font Weight and Style can be used independently on Global Styles.
Changes: Font Weight, Style and decoration are not presets anymore.
Box control now supports custom units .
Implemented border radius support.
A few bugs were fixed Fix: Block crashes if font family is not found.

Widgets Screen and the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.

@andraganescu
Widgets screen: Nothing notable on the widgets screen or on adding blocks in customizer. Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. sessions for both Widgets and Navigation will restart in 2021.

Task Coordination

@youknowriad

  • Drag and drop from the inserter.
  • Some 5.6 documentation follow-ups.
  • Some refactorings around Popover/Dialogs (reusable hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.).
  • More FSE related work on the next week(s).

@ntsekouras

@annezazu

  • Prep work for the launch of the #fse-outreach-experiment, 5.6 Q&A follow up, triage of the GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo, launched the overhaul of the new https://make.wordpress.org/core/features/ page (now with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor items!) with the teamwork of @noisysocks, and doing various FSE testing with different block themes.

@get_dave

  • Adding an experimental Gutenberg REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. endpoint to allow us to get data about a remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for use in the editor (eg: contents of <title> 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.) or favion…etc). Potential use cases:
  • 1. Showing an embed preview for generic links when pasted into editor (a la Slack).
  • 2. Showing details about a link being added using LinkControl.
  • Making some tweaks soon and then should be ready to merge: Add URL Details endpoint to REST API to allow retrieval of info about a remote URL.

@tug

  • Good progress on porting the Audio block.
  • Improving our CI tests and working on performance tweaks.
  • Porting Audio and Code blocks related to the RN v0.63 upgrade.
  • Link picker integrations in blocks. 

Open Floor

@Settimo Augusto Vittorio

  • Needs help with Post title block: Enabling the link changes the position of the block.
  • Proposed a ServerSideRenderedDataDrivenBlock, to enable developers who don’t know js to write blocks. A toggle to enable a preview.
    @joyously
    The shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. block could be extended to use the expected attributes as inputs in 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.. (like ShortCake 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 was trying to do)
    Link to additional discussion on Slack.

@joyously

  • There are usually some forum topics about coding blocks, but no one to answer them.

@daisyo

  • Starting the “What’s Next” post for January. If you have specific focus areas (issues, PRs, etc) planned for the month please feel free to share them with me. Hearing from you all helps to make this post really useful for those outside of the core editor contributor team.

@paaljoachim

  • The 16th December Core Editor chat was the last before the holidays. 23rd and 30th December there will be no official chats. The next chat in the new year will be 6th January.
  • Merry Christmas and a Happy New Year! Have a beautiful and relaxing holiday! See you in the new year!

#core-editor, #core-editor-summary, #gutenberg, #meeting-notes

Paal Joachim Romdahl 10:04 pm on December 14, 2020
Tags: core-editor,   

Editor Chat Agenda: 16 December, 2020

Facilitator and notetaker: @paaljoachim.

This is the agenda for the weekly editor chat scheduled for 2020-12-16 14:00 UTC.

This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.5.2. (Gutenberg release 9.6 is delayed until next week.)
  • WordPress 5.6 released
  • Monthly Plan for December 2020 and key project updates. With focus on issues, what is being done and help that is needed.
    • Full Site Editing.
    • Global Styles.
    • Widgets screen.
    • CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. screen.
  • Task Coordination
  • Open Floor

Even if you can’t make the meeting, you’re encouraged to share anything relevant for the discussion:

  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#core-editor, #core-editor-agenda

Jorge Costa 11:24 pm on December 11, 2020
Tags: , , core-editor, , , ,   

Editor chat summary: Wednesday, 9 December 2020

This post summarizes the weekly editor chat meeting on Wednesday, 9 December 2020, 14:00 UTC held in Slack.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.5.1

We had a minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. to fix three bugs. The details of the fixes can be checked in the release page.

WordPress 5.6

WordPress 5.6 was recently released, more details can be found here.

The release contains several enhancements to the editor. @isabel_brison made an overview post with the changes https://make.wordpress.org/core/2020/12/03/wordpress-5-6-core-editor-overview/.

Besides the editor enhancements, the 2021 theme is also a big step. It will have an equivalent 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. version that will test how robust is FSE and Global Styles to allow third-party themes.

@youknowriad said: Nice work @isabel_brison and others leading the editor side of the release. And the message was well supported on the chat using slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. reactions. Thank you for all the work made leading the editor side of this release @isabel_brison!!


Monthly Plan and key project updates.

WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. screen

Widgets and customizer screen are still continuing with explorations going on to find the best way to add blocks support in customizer. 

Global Styles

We merged an update that makes client preset metadata match the server. ” – https://github.com/WordPress/gutenberg/pull/27453. And now we are also not passing some metadata to the client like selectors https://github.com/WordPress/gutenberg/pull/27449.
The work to make theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. translatable continues.
We are making some changes, namely removing some presets we are not totally convinced yet they should exist.
We already have some traction on the work to enhance our components to allow a better UXUX User experience on Global Styles; @q proposed the addition of some utils.
We also have some progress on the Global Styles extensibility with some filters being proposed https://github.com/WordPress/gutenberg/pull/27509.

Full site editing

The Query block now inherits the global query so FSE themes can add a query block in the index or archive templates and it will work for all archives, properly getting the query context from the visitor’s URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: https://github.com/WordPress/gutenberg/pull/27128.

Template-parts now have a UIUI User interface to select the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element that will be used for their wrapper: https://github.com/WordPress/gutenberg/pull/27101 so they can define easier if it’s, etc.

The inserter was also improved and behaves as popover. The editor now has an outline mode used in both Site Editor and Template mode.

Native Mobile APP Updates

  • File block merged and usable.
  • Post’s Save dialog fixes.
  • Background and text color support in Group, Paragraph and Quote blocks
  • Use new link picker in various blocks: Button, Image, Gallery
  • Improvements on Separator block style
  • E2E tests execution improvement.
  • Release process documentation improvements.

An app release is going to be skipped because of New Year’s and people taking holidays on these days.

Task Coordination

@annezazu

Helped a bit with 5.6 Q&A docs, light GH triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., continued working with @noisysocks on updating the features page and updating the issue templates, worked on FSE program preparation (including adding a welcome bot there and digging into current/recently merged PRs!), and dug in a bit to block directory adoption. Plans to do much of the same in the week ahead!.

@itsjonq

Continued the efforts of improving the Component System for Gutenberg.
The latest update is a (draft) pull-request to bring in the UI libraries/systems Has been working on (aka. “G2 Components”) https://github.com/WordPress/gutenberg/pull/27594. @itsjonq gave a thank you to @youknowriad and @gziolo for thoughts/guidance on integration.
@itsjonq said that t’s just the beginning, but it’s looking very promising. As always, @itsjonq tries Livestream design/dev updates on Twitch several times a week.
@itsjonq is also posting weekly updates on the project blogblog (versus network, site):
https://g2components.wordpress.com/.

@paaljoachim

Design triaged Bigger font for various handbooks.
Worked on several documentation tasks namely: Improving the intro page of the Block Editor Handbook and Re-examining introduction tutorials.

@youknowriad

Has been on working on some follow-ups to the addition of the “template mode” in the post editor.
The idea is that as we add features and enhancements, the code base becomes more complex as we take shortcuts so it’s important to circle back and “clean” the code a bit. Has been doing that with some a11yAccessibility 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) hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., extracting common components and removing unnecessary complexity. Still has a few follow-ups planned. Some refactorings and some more features.

@jorgefilipecosta

Worked on an update that makes client preset metadata match the server. And another one that makes sure we are not passing some metadata to the client like selectors.
Did multiple reviews on Global Styles related work.
Proposed a solution to remove some of the presets we have being back-compatible with markup that uses them.
For the next week, plans on helping the effort to improve our WordPress components with PR reviews comments, feedback, etc. Wants to merge the Gutenberg side of theme.json i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. and iterate and merge the typography presets removal. Also plans on making some progress on the design tooling visibility issue.

@cguntur

Would like to help with the Gutenberg documentation.

@aristath

For next week his main focus will be splitting core block assets loading and revisit progressive loading for FSE.
Would also love it if we could focus on removing auto-drafts for theme-provided templates but that one is a bit tricky as it touches lots of things.

Open floor

@bph bring to the attention of the participants of the chat an issue/question https://github.com/WordPress/gutenberg/issues/27321. @youknowriad shared some guesses of what may be the cause of the issue and @ntsekouras offered to followup and share his findings on the issue.

Skipping coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor chats of 23rd and 30th December

@paaljoachim share the following in the agenda:

I suggest that we skip having a Core Editor meeting the 23rd and 30th December as many will be having their Christmas holiday

People discussed this suggestion, there was no opposition to this suggestion so participants of the chat decided to skip the chats of 23rd and 30th December.

Starting the FSE Outreach Program

@annezazu said the following:

After digging into some recent FSE related PRs and talking with a few people, I wanted to raise the idea of starting the #fse-outreach-experiment after the next Gutenberg release. I think this PR from @youknowriad on a template editing mode is a great place to start but wanted to hear thoughts. Right now though, there aren’t a ton of things lined up to do next. I think this will be okay though as it’ll give an extended period of time for people to test (might be good with this time of year) and it’ll make it easier to tweak what we’re doing after this first round. How does that sound to you all? P.S. I welcome people flagging possible additional things to run through for the group. I try my best to stay on top of things but definitely miss stuff.

@youknowriad shared he agrees that the template editing mode is a good flow to test. He believe the feature in itself is still a little bit rough around the edges but testable.

@annezazu supported riad’s thoughts and concluded that she will get to work fleshing out the details to kick off the program. She welcomes any collaborators who might be interested!

For anyone reading this summary, you can be a part of the program by joining #fse-outreach-experiment channel.

One week RC period

@youknowriad said:

The last releases saw a couple bugs being introduced and to address that I’d like us to discuss the possibility to try a one week RC in Gutenberg 9.6.

The participants of the chat showed support for this idea. The plan is to start having a one week RC period. The next release will still follow the normal schedule, so we give more time of notice to allow publishing the notes of the meeting (this post), and we have a fuller release otherwise it would be just a one-week release which would be very small.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting-notes

annezazu 9:52 pm on December 11, 2020
Tags: core-editor, , ,   

The FSE Outreach Program is Officially Starting!

In May 2020, @chanthaboune announced a new experimental outreach project dedicated to Full Site Editing. Most recently, @matveb shared a wonderful post summarizing where Site Editing is today. Building on both, I’m excited to announce that, despite 2020’s best attempts to derail efforts, the program will officially launch with the release of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.6! Right now, it’s likely that this release will be done 1 week later than usual to give a longer RC period so expect the program to begin around December 23rd. This cycle will focus on testing this PR that introduces a template editing mode. For additional context, you can see the discussion around picking this PR here. Hopefully, aligning the call for testing with the current Gutenberg version will make it easier for more people to participate in testing. 

Please keep in mind that this is the program’s first iteration. We’re starting with this first item and expecting the outcome to be a comprehensive list of issues that the Gutenberg team can work on as capacity allows. We’ll also allow an extended time to test this first item to accommodate this time of year. 

Moving forward, this program will eventually offer a few items to test back-to-back, with an easy and quick way to integrate feedback into Gutenberg releases. Remember, feedback outside of this program is always welcome and necessary as well — think of it as doing the work to pave the way for future iterations! 

What are the immediate next steps? 

I will be posting on Make Test once Gutenberg 9.6 is released around December 23rd with an extended time to give feedback. The post will include a testing script, resources for setting up a testing environment, and where to share feedback. I will also share that post in the #fse-outreach-experiment channel to alert everyone who has opted in. 

How can I join this program/follow along?

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

Who should join this program?

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

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

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

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

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

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

Paal Joachim Romdahl 5:01 pm on December 8, 2020
Tags: core-editor,   

Editor Chat Agenda: 9 December, 2020

Facilitator and notetaker @jorgefilipecosta.

This is the agenda for the weekly editor chat scheduled for 2020-12-09 14:00 UTC.

This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.5.1
  • WordPress 5.6 release.
  • Monthly Plan for December 2020 and key project updates. With focus on issues, what is being done and help that is needed.
    • Full Site Editing.
    • Global Styles.
    • Widgets screen.
    • CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. screen.
  • Task Coordination
  • Open Floor

Even if you can’t make the meeting, you’re encouraged to share anything relevant for the discussion:

  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#core-editor, #core-editor-agenda

Isabel Brison 8:23 am on December 3, 2020
Tags: , core-editor   

WordPress 5.6: Core Editor Overview

With WordPress 5.6 around the corner, this post is your “one-stop shop” for all of the new coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor related features and changes coming to your sites. While this release won’t bring changes to the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. or navigation interfaces, plenty of exciting features and improvements are coming to 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. editing experience!

To make it easy to skim through to your favorite parts, we have grouped features into a few relevant sections.

Content creation

Creating the perfect content gets easier as editor tools continue to improve.

Setting a sharp gradient background.
Colors in the list block, and setting a sharp gradient.
  • Create richer backgrounds with the new cover block video position controls. #22531
  • Background images in the cover block can now be repeated to form patterns. #26001
  • Add some color to your lists. #21387
  • Create a sharp gradient #24967
  • Define your content image sizes with the new media and text blocks. #24795
  • Columns block has a new one-column option, opening up more potential for layouts. #24055
  • Select several blocks and transform them into a Columns block with one click! #16504
  • Video subtitles functionality was added, enabling creators to upload subtitles and allowing more people to access video content. #7673
  • Get ahead of time zone snafus when scheduling a post with the timezone hints. #23400
Timezone in post publish settings.

Adapting the experience

One size doesn’t fit all! Check out these new options, continuing improvements, and adaptations to the content creating experience.

  • Display buttons as text-only instead of icon-only: this gives options for how you experience the toolbar; an important improvement for 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). #10524
  • Find a reorganized and user-friendly Options modal, now named “Preferences.”   #25837, #26198
  • Get full search results with post author and parent page selectors autocomplete component. (Post author selector: #23237 and parent page selector: #25267)
  • Need a focused writing experience? Check out these writing enhancements: #22494
  • The drag handle is back in the block toolbar! Along with a bunch of enhancements for a smoother drag and drop experience. #24852
  • Search blocks and patterns easily across all inserters. #25105
  • Display site icon (if one is set) in full-screen mode: bringing your site branding to the editing experience. #22952
  • Need to reach that word minimum? Character count now shows in the info panel. #24832
New settings in the preferences modal.

Under the hood

  • Block supports is a new APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. that allows block authors to add customization options (such as font size, text color, or gradient) by simply declaring support for them in the block attributes. Find out all the details in this post.
  • Column and Group blocks now allow template lock to be set as an attribute. This allows template authors to define whether or not to lock their columns and groups. #26128
  • Block API version 2 advances the cause of bringing the editor DOM tree closer to the saved content, by allowing blocks to render their own wrapper element. Block authors can find more info on how to use it in this post.

Themes

This release introduced the default theme Twenty Twenty One. This led to a few iterations in the editor, improving theming for everyone and even allowing block patterns to be styled more easily.

  • Separator block now has more alignment options opening up more ability to go with the content you are creating. #25080
  • Add wide and full width support to headings: allowing headers to adapt with your content. #25655 
  • Dark mode now extends to your placeholders  #26483
  • Columns now support fixed widths for more layout options. #24711

Bugs

Over 100 bugs were fixed, across multiple areas of the editing experience.

Thanks to everyone who contributed to this release!

This post was written and edited in collaboration with @karmatosed, @annezazu, @kellychoffman, @matveb, @cbringmann and @andreamiddleton.

#5-6, #core-editor

Andrei Draganescu 3:40 pm on December 2, 2020
Tags: core-editor, , , ,   

Editor chat summary: 2nd December 2020

This post summarizes the weekly editor chat meeting (agenda here) held on 2020-12-02 14:00 UTC in Slack. Moderated by @andraganescu

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.5 Recap

  • Full details on the release are available in the release post.
  • Full Site Editing and Global styles were the main focus of this release and as always many bugs were fixed and some nice features were introduced.
  • @youknowriad mentioned that during the release process an “undefined” 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.) was temporarily temporarily created. It should be fixed now.

Preparation for WordPress 5.6

  • Release candidate #2 (RC2) has been released.
  • Make sure to take this release candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). for spin and if you find any pesky bugs add them to Github
  • The current editor must haves board is, as always in the 5.6 Project board

Monthly Plan & Key Project updates

Global Styles & Editor focused APIs

Continued fixing the flows (tracking issue, label) and this week’s highlights are:

Full Site Editing

  • Just in case that if you were previously following this project board for Full Site Editing, it has now been closed in order to use the milestones issues more consistently and to prevent people from needing to follow the progress in two places.
  • The “template mode” in the post editor is close to landing. This is just a first iteration but I believe this might become an important way in which a lot of users might start interacting with FSE templates (PR: 26355)

Widgets screen, Navigation screen and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.

For Widgets and the Customizer the updates are in the form of a renewed focus and also the current blocks in the customizer exploration phase.

Task Coordination

  • @nosolosw
    • Main focus still is GlobalStyles: reviews, move forward my own PRs, triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. issues.
    • Started digging into FSE to add support for child themes.
  • @ntsekouras
    • Add vertical layout to Buttons 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. with block variations (https://github.com/WordPress/gutenberg/pull/27297).
    • I’m working on block variations and a way to display the variation’s info in needed places, such as BlockCard, Navigation List view etc..
  • @q
    • I’ve been focusing on the next iteration of the Gutenberg UIUI User interface (WordPress Components) – codenamed “G2 Components”.
    • I’ve been continuing my (almost) daily live streams covering design, development, architecture, and planning for this project :).
    • I recently published a blog post with progress updates and thoughts/details on how we’re planning the delivery of the project:
  • @paaljoachim
  • @aristath
    • I continue working on splitting the block assets and only load them when a block is rendered (PR 25220)
    • Exploring how to remove auto-drafts for unedited templates and instead use the files directly (PR 27321)
    • Focusing on FSE & global-styles
  • @annezazu

Open Floor

PR for move post/page title to the top bar needs discussion (PR 27093)

  • @paaljoachim brought the issue up into the open again as it would be great to move the post/page title to the top bar so that we can get used to adding the post/page title block into the layout.

Thanks to everyone who attended!

#core-editor, #core-editor-summary, #meeting, #meeting-notes, #summary

Nik Tsekouras 1:51 pm on December 2, 2020
Tags: core-editor, ,   

What’s new in Gutenberg? (2 December)

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.5 has been released. The big focuses throughout this release cycle were Full Site Editing and Global styles. This release also includes many fixes and some nice new features and enhancements.

Full Height Alignment

This control can be integrated in other blocks as well and you can set 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. to be displayed in full height. The Cover block is a lovely case to see it in action.

Font sizes support in Code block

You can now change the font size of Code block’s contents.

9.5.0 🇲🇪

Features

  • Full Height Alignment control: Implementation and Cover block integration. (26615)
  • Code block: Add support for font sizes. (27294)

Enhancements

  • Improve block patterns preview in the Inserter. (27204)
  • Enhance social links placeholder to look more like the end result. (26953)
  • Add labels to image zoom control. (24574)

New APIs

  • Data: Use store instance as param for select and dispatch. (26655)
  • Adds instance URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to wp-env start. (27282)

Bug Fixes

  • Fix crash when null date passed to TimePicker. (27316)
  • Add backward compatibility support for lightBlockWrapper in getSaveElement. (27189)
  • Restore the gray background in Post Editor. (27188)
  • Font size picker 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. that adds px units to empty string values. (27111)
  • Font size unit back-compatibility does not executes on post edit. (27106)
  • Drop zone: Fix infinite loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. in some contexts. (27090)
  • Interface regions: Fix focus style (on click). (27074)
  • Fix Separator editor styles. (27071)
  • Fix custom spacing support. (27045)
  • Fix jest process hanging. (27008)
  • Fix combobox suggestion list closure when clicking scrollbar. (27367)
  • Constrain tabbing to the popover in media replace flow. (26939)
  • Fix RangeControl mark placement and cursor styles. (26745)
  • New authors dropdown breaks author selection for editors. (26554)
  • HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.: Use own instance’s doAction for built-in hooks. (26498)
  • Inserter: Show preview in search results. (27193)
  • Gallery block:
    • Fix duplicate css class. (27311)
    • Adds back in icon and title for gallery block. (27293)
  • Search block: Fix icon strokeWidth properties. (27308)
  • Image block:
    • Fix the zoom slider width. (27285)
    • Fix double paste from clipboard. (27199)
    • Hide some controls on multi selection of Image blocks. (27105)
  • Columns: Align single half width column to left. (27142)

Performance

  • Minimize the calls in useSelect by subscribing to only the stores needed. (26724)
  • Update prefer lang constructs to functions. (27070)

Experiments

  • Full Site Editing Framework:
    • Fix template resolution priorities. (27303)
    • Update default templates. (26941)
    • Add Support for Templates Default and Custom Titles and Descriptions (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. side – 27038, PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher side 27036)
    • Add theme taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. to templates and template parts. (27016)
  • Full Site Editing Blocks:
    • Make the post title block editable. (27240)
    • Post Comment: Update placeholder. (27013)
    • Enable 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. to be set and replaced. (27224)
    • Add alignment controls to Post Featured Image block. (27076)
    • Query block:
      • Add grid view. (27067)
      • Add Posts List variation. (26990)
      • New settings icon in block toolbar. (27057)
      • Fetch all available post types (#27049). (27056)
      • Update Query block’s icon. (27048)
      • Query and QueryLoop use useInnerBlocksProps. (27014)
  • Site Editor:
    • Avoid throwing warnings if there are no terms for a template or template part. (27210)
    • Replace adminbar customize link with site-editor in FSE themes. (27135)
    • Update the new templates dropdown list. (27235)
    • Remove .block-editor selector dependency. (27063)
    • Remove unused FullscreenModeClose component. (26997)
    • Navigation:
      • Fix item color and padding. (27096)
      • Hide empty menus. (27141)
      • Add isText prop to NavigationItem. (27003)
      • Handle the no search results state. (27160)
      • Add search to templates and template parts. (26665)
      • Hide navigation item if target menu is empty. (25746)
  • Global Styles:
    • Sort Global Styles block panels by panel title. (27163)
    • Font Appearance should be enabled globally. (27150)
    • Restrict edition of theme colors by users. (27250)
    • Update mechanism that resolves Global Styles data. (27237)
    • Include px units on default font sizes defined on theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.. (27083)
    • Update stylesheet generation at edit site. (27065)
    • Add button to reset color palette. (26975)
    • Abstract preset variable retrieving and setting. (26970)
    • Update metadata and add support for padding. (27099)
  • Templates and Template Parts wp-adminadmin (and super admin) lists:
    • Update the template parts admin list with new columns and views. (27156)
    • Add the theme source to the templates wp-admin list. (27108)
    • Extend the wp_template admin list with new views and columns. (27034)
  • Support registry inheritance with atomic stores. (27162)
  • Code block: Paste plain text. (27236)
  • Generalize the atom family concept as an atom selector concept instead. (27147)
  • Bugs:
    • Query block: Fix dirtying post on load. (27323)
    • Preserve ‘Your homepage displays’ settings when updating the ‘general’ settings. (27206)
    • Make sure templates and parts queries 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. by tax_query. (27113)
    • Fix Template Part Not Found message on Windows server. (26772)
    • Respect filtered settings when they’re ported to theme.json format. (27010)
    • Preset controls need the preset CSSCSS Cascading Style Sheets. variables in scope. (27119)
    • Site Editor:
      • Show document title on small screens with nav 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. open. (27051)
      • Fix block toolbar positioning. (27266)
      • Fix app 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. on small-medium screens. (27310)

Documentation

  • Expand on the Deprecations documentation. (27286)
  • Publish MainDashboardButton documentation to handbook. (27317)
  • Update: Creating a block-based theme tutorial. (27257)
  • ESLint 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: Include a note about the minimum version required. (27203)
  • Docs: Update @wordpress/data README with APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. changes. (27180)
  • Data: Improve documentation for new API added around stores. (27061)
  • wp-env: Improve documentation for “run” command. (27053)
  • Code block: Update the documentation. (27333)
  • Add block toolbar component readme. (25245)
  • Add block patterns list component readme. (24983)
  • [Contributors docs] JS meetings were shifted to 15:00GMT. (27047)
  • Typos and tweaks: (27120, 27081, 27062, 27060, 27039, 27153)

Code Quality

  • Replace store name string with exposed store definition:
  • Search block: Remove invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. prop which was causing a ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning. (27306)
  • Refactor click redirect to avoid trailing div. (27253)
  • Editor styles: Convert to hook. (27080)
  • Add: PHP util function equivalent to lodash set. (27077)
  • Interface: Remove regions wrapper div. (27066)
  • Refactor typing observer. (27043)
  • Visual editor: Remove 4 wrapper divs. (27035)
  • Insertion point: Avoid wrapper div. (26994)
  • Typewriter: Rewrite with hooks. (26986)
  • Deprecate the withGlobalEvents HoC. (26749)
  • Edit Post: Refactor effects to action generators. (27069)

Build Tooling

  • Add eslint rule to prohibit unsafe APIs. (27301)
  • Update package lock to fix CI failures. (27098, 27102)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions: Build Plugin zip, store as artifact on every PR. (26746)
  • Scripts: Unpin ignore-emit-webpack-plugin dependency. (26739)
  • Adds Support to wp-env for setting the PHP version. (25268)
  • Configure phpunit-watcher to improve devex. (27058)
  • Run phpunit even when phpcs fails. (27024)
  • Scripts: Auto format TypeScript files with format-js. (27138)
  • End 2 End Tests:
    • Fix randomly failing end-to-end test. (27358)
    • Fix multi entity editing test. (27347)
    • Add end-to-end tests for image editing tools. (27262)

Various

  • Simplify CSS for the code block. (27314)
  • Update the block variation widths in the block placeholder. (27255)
  • Don’t split translatable strings in block templates. (27361)
  • Reduce margin on placeholder for media. (27252)
  • Interface package: Move MainDashboardButton slot. (27213)
  • Decrease scrim when in a modal overlay. (27054)
  • Replace ‘Remove from Reusable blocks’ with ‘Manage Reusable blocks’. (27026)
  • Mark AWAIT_PROMISE as unstable API. (26852)
  • Block Support: Separate opt in for font style and weight options. (26844)
  • Latest Posts: Don’t use target="_blank". (25730)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 9.55.3s28.6ms
Gutenberg 9.45.4s32.6ms
WordPress 5.55.9s27.1ms

Kudos to all the contributors that helped with the release. 👏

#core-editor, #editor, #gutenberg-new