Core Editor Improvement: Introducing the Widget Group Block

While the Block Widgets Editor was released with WordPress 5.8, the work to improve the experience hasn’t stopped to help even more folks use blocks to build out 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. areas in an endless number of ways. The latest in a series of improvements comes with the launch of Gutenberg 11.5 that introduces a Widget Group block. This new 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. replicates the familiar experience of being able to add a title to a group of blocks and allows you to group any block, making it easier to move and layout content however you’d like. This both helps with compatibility for older themes when migrating over to the new editor and enables a more cohesive experience for building out widget areas.

For example, before this update, it was tricky to get the spacing right for adding a 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. above another set of blocks. Now, you can do that with ease:

Video showing how to use the Widget Group Block.

This also makes it a breeze to move collections of blocks into new widget areas: 

Video showing how you can drag and drop a collection of blocks within the Widget Group Block.

As always, you can also make these changes in 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.! For more general information about the Block Widgets Editor, check out the Dev note and the user documentation. To get involved in this work, head to #feature-widgets-block-editor and explore the GitHub tracking project to see what’s next. 

Props to @critterverse for the lovely videos! #core-editor, #core-editor-improvement, #feature-widgets-block-editor

Editor Chat Agenda: 22 September 2021

Facilitator and notetaker: @jorgefilipecosta

This is the agenda for the weekly editor chat scheduled for Wednesday, September 22 2021, 04:00 PM GMT+1.

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/ 11.6 RC will be released Wednesday.
  • Whats next in Gutenberg: Mid-September 2021.
  • WordPress 5.9 Preliminary Roadmap.
  • Updates based on updated scope for site editing projects:
    • Navigation 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. & Navigation Editor.
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
  • Task Coordination.
  • Open Floor.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • 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.

#agenda, #core-editor, #core-editor-agenda, #meeting

Editor chat summary: Wednesday, 15 September 2021

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor 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, on Wednesday, September 15, 2021, 14:00 UTC.

WordPress 5.9

Preliminary Roadmap, a quick overview of the main areas and features currently underway for 5.9 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/.

Gutenberg 11.5.0

Gutenberg 11.5.0 was released on 16th September, this update includes 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. Gap support, improved support for Flex Layouts, performance improvements, and additional design tools. Check out the release post for a complete list of features and enhancements:

Monthly Plan

The monthly update containing the high-level items that Gutenberg contributors are focusing on for June are:

  • Template Editor
  • Patterns
  • Global Styles and 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. UIUI User interface
  • Design Tools
  • Navigation Block
  • Navigation Editor

For a detailed plan check out monthly priorities post.

Updates on the key projects

Nav Editor:

@get_dave

Rest API:

@zieladam

  • For the REST API changes, saving menu items using rest API.
  • As a nice side-effect, we might get a simple 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. for saving changes in any editor that acts on entities through blocks (e.g. the widgets editor).

Mobile: 

@hypest

Shipped

  • Inline preview support for Instagram, Vimeo. Now supporting all  5 most-used providers (YouTube, Twitter, WordPress, Instagram, Vimeo).

Fixes

  • Refresh embed preview when switching light/dark mode
  • Use device’s localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. in embed previews
  • Ensure inserter button is in view when RTL
  • Translate column block’s control labels

In Progress

  • Embed block.
  • GSS Font size, line height, colors.

Task Coordination

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

@mamaduka

@ntsekouras

In progress:

@jorgefilipecosta

  • Worked on the task to replace the color picker component namely enhance its design and started working on replacing tinycolor with colord.
  • Need some reviews on tinycolor to colord replacements:
  • Simple PR’s to get the ball rolling as long as one is approved I guess we can merge multiple similar ones.
  • Worked on implement the new custom gradient picker design.
  • Currently working on the new color palette editor.
  • For the next week I will continue with improving the global styles related components.
  • Will see how can I best help the effort of implementing the new 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 its navigation system.
  • Will try to dedicate attention to old PR’s I have that are mostly ready.
  • Mosaic view and block awareness of global styles I hope to merge them so my head becomes free for other challenges and we can submit follow ups on them.

@zieladam

@mciampini

An update from the folks working on the components package

Shipping:

In Progress:

@oandregal

@annezazu

  • Mainly have been doing some light triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., amplifying the current block theme switching exploration.
  • Working on updating the 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 description (PR coming).
  • Ran a hallway hangout for FSE items.
  • Hoping to ship an additional coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor improvement post too in the next week.

@get_dave

This week, I’ve have been mostly workin’ on:

  • Adding Global Inserter to Navigation Editor screen.
  • Experimenting with Theme JSON as means to control many aspect of Navigation block.
  • Fixes from the High priority section of Nav Editor tracking issue.
  • Various Link UI issues.
  • Added “help” descriptions for the various HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element options on the Group block.

@mkaz

Open Floor

@get_dave

  • Could whoever is running the Gutenberg Plugin release please let me know how they found the automated changelog feature grouping? I worked on a couple of PRs on that and I’m curious to know whether anything could
  • Working on how to make the Nav Editor more resilient to changes in the Navigation block. Currently it’s very difficult and not at all resilient.
    • One route I’m exploring is using Theme JSON to control the features of the Nav block. My proposal does two things that I’d like some input on:1. opens up `theme.json` for extensibility by developers via 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./filters.
    • Allows `theme.json` to control features that are unique to particular blocks (as opposed to things that are common across all blocks such as spacing).
    • I’d really like to understand whether this is within the intended scope for Theme JSON.
    • This has large utility outside Nav Editor because I imagine Themers wanting to be able to control multiple facets of blocks (and not just common things such as padding/margin…etc) without having to use complex hooks/filters
    • some dicussion but no conclusion read complete discussion.

@paaljoachim

  • The following comment made by @a4jpcom was posted to last weeks Core Editor Chat agenda after the chat was held.
    • The inserter (add block – the line with plus mark) is missing above the top inserted block.
    • Toggle block inserter doesn’t help here either.
    • Related issues.
    • You currently have to add a block under the top inserted block then move it above the top block each time. It would be nice to get this fixed.
    • If the line that said add block were above the first block added it would just take one click to add new blocks, which is very nice.
  • I would like to bring up one more thing that would be nice to get some eyes on again. 
    • Moving the post/page title to the top bar, so that users can choose to have the title in the layout.
      Here is a PR which has stalled.

Read complete transcript

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

What’s new in Gutenberg 11.5? (16 September)

It’s been two weeks since 11.4, so it’s time for another 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/ release, 11.5!

This update includes 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. Gap support, improved support for Flex Layouts, performance improvements, and additional design tools.

Theme / Block Gap Support

Block Gap support adds the ability for blocks to opt-in to a control that allows users to choose the distance between items within a block.

The groundwork for this feature was introduced in 11.4, and was initially opt-out for themes. Following feedback, this feature is now opt-in. Thanks so much for the testing and feedback!

With Block Gap support in place, it has also been added to the Columns, Title, and Navigation blocks.

Buttons in the the Buttons Block move closer together or farther apart as the Block Gap is changed.

Flex Layout Highlights

Following the introduction of Flex Layout in 11.2.0, now Flex Layouts are supported within the Social Links and Group blocks! The Social Links block now has a ‘flex’ justification option, for automatic best-fit. 

There is also a new variation of the Group block that allows for flex layout. You can try it out by choosing “Row” from the block inserter.

Social Icons change flow when flex justification is selected.

Site Title and Logo Inside Navigation Block

It’s now possible to build your site logo or title directly into menus, enabling new design possibilities! Insert, and modify the title or logo that you prefer, using design tools, then re-order for your ideal look.

A Site Logo is added to a Navigation Block, then resized and placed.

Global Styles 

Global styles are now available to themes by default, allowing block, theme, and patterns to have a reliable set of styles provided by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

Themes are now able to selectively disable text and background colors. This allows theme authors to provide exactly the experience they’d like to provide users, whether allowing custom colors, gradients, or only their curated selections.

Other Notable Highlights

The Heading Levels menu has been redesigned, and is now vertical, making it easier to visualize the hierarchy.

There is a new setting to customize the Next and Previous Page indicators in the Query Pagination block, allowing the addition of an arrow or a chevron to your designs.

New vertical Heading Levels menu, with H2 selected.

11.5.0

Features

Design Tools

  • Block Support: Add gap block support feature. (33991)

Enhancements

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)

  • Font weight screen reader description. (34312)

Block Editor

  • Media Placeholder: Change media URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input type to allow a local URL path. (29138)

Block Library

  • Columns Block: Use blockGap between Columns blocks. (34456)
  • Group Block: Add a row variation. (34535)
  • Heading Block: Vertical heading levels menu. (32926)
  • Navigation Block: Allow Site Title and Logo inside Navigation block. (33316)
  • Navigation Block, List View: Do not show appender and avoid closing the modal on block select. (34337)
  • Navigation Block: Remove horizontal and vertical navigation block variations from inserter. (34614)
  • Navigation Block: Use gap instead of margin. (32367)
  • Post Author Block: Add duotone suport. (34408)
  • Query Pagination Next/Previous: Add an arrow attribute and sync next/previous block’s arrow. (33656)
  • Site Logo Block: Update block description to be concise. (34471)
  • Site Title Block: Update block description to be concise. (34475)
  • Social Links Block: Use the new flex layout. (34493)
  • Video Block: Use existing video poster image on insert. (34415)

Components

  • MenuItem: Add right padding for unchecked radio and checkbox items. (34406)
  • ToggleGroupControl: Update stories to use knobs. (34497)

Core Data

  • Add isRawAttribute to entity configuration. (34388)

Design Tools

  • Add wide alignment control only if theme provides layout.wideSize. (34586)
  • Update justification control in flex layout. (34651)
  • ToolsPanel: Change icon from horizontal to vertical ellipsis. (34369)

Full Site Editing

  • Limit FSE adminadmin (and super admin) notices to the Themes screen. (34353)

Global Styles

  • Allow disabling text and background color via theme.json. (34420)
  • Make global styles available to all themes. (34334)

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.

  • Add context to ‘none’ strings for better translations. (34341)
  • Make permalinks documentation URL translatable. (34282)

Post Editor

  • Expose ThemeSupportCheck component. (20506)
  • Title block gap. (34570)

Themes

  • Add default editor styles applied to themes without theme.json and without editor styles. (34439)

Widgets Editor

  • Add ‘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. Group’ block to widgets screens. (34484)
  • Legacy widget rendering endpoint. (34230)

New APIs

Design Tools

  • Allow themes with theme.json to opt-out of block gap styles. (34491)

Bug Fixes

Accessibility

  • Fix button block focus trap after a URL has been added. (34314)

Block Editor

  • Fix menu item padding regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.. (34435)
  • Fix text-menu min widths. (34532)
  • Keep id on paste if internal link points to it. (31107)
  • Fix caret position on block merging. (34169)

Block Library

  • Heading Block, Paragraph Block: Fix long strings of text without spaces overflow the block. (34222)
  • Gallery Block: Fix 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. with stalled upload when image size too large. (34371)
  • Gallery Block: Fix media placeholder height in site editor. (34629)
  • Gallery Block: Fix problem with overflowing captions on new gallery block format. (34402)
  • Latest Posts: Fix various ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings in development log. (34428)
  • Navigation: Fix navigation block classname issues. (34344)
  • Navigation: Fix Page List styles inside responsive Navigation. (34517)
  • Navigation: Fix responsive menu height regression. (34488)
  • Navigation: Fix submenu layout in navigation page list. (34342)
  • Navigation: Fix submenus to only take up space when visible. (34382)
  • Navigation: Fix undo/redo ‘trap’ in navigation link block. (34565)
  • Site Title: Allow empty title in edit mode. (34274)
  • Social Links Block: Fix deprecation. (34639)
  • Video Block: Fix TypeError when removing poster. (34411)

Components

  • Align labels on focal point picker position controls above the inputs. (34209)
  • Check if in browser env before calling CSS.supports. (34572)
  • Combobox Component: Only force expanded state if the input has focus. (34090)
  • CustomSelectControl: Add describedBy fallback. (34385)
  • DateTime Component: Fix sizing of help info. (34370)
  • Fix ToggleGroupControlBackdrop not updating size when isAdaptiveWidth prop changes. (34595)
  • Fix selected value computation in CustomSelectControl when no initial value is set. (34490)
  • Fix subheadings from wrapping. (34319)

Design Tools

  • Border Controls: Display color indicator and check selected color. (34467)
  • Border Support: Fix check for displaying border support panel. (34516)
  • Gap block support: Force gap change to cause the block to re-render (fix Safari issue). (34567)
  • Letter Spacing: Group letter spacing correctly under typography supports. (34515)

Global Styles

  • Fix block-level global styles color panels. (34293)
  • Font Appearance Control: Fix error in global styles for Site Title in TT1-Blocks. (34520)

MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Boxes

  • Change default value of enableCustomFields to undefined. (33931)
  • Fix metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. reordering. (30617)

Packages

  • Blocks: Register block when 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. value provided for the icon. (34350)
  • Core Data: Add ‘include’ to the query key. (34583)
  • Core Data: Use resolveSelect instead of select in saveEntityRecord. (34584)
  • Interface: Block Toolbar & Popover component – Prevent sticky position from causing permanently obscured areas of the selected block. (33981)
  • Scripts: Only use svgr/webpack in js files. (34394)
  • Scripts: Convert legacy entry point arguments for compatibility with webpack 5. (34264)

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/.

  • Default batch processor: Respect the batch endpoint’s maxItems. (34280)

Widgets Editor

  • Fix Block Settings 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. unexpectedly collapsing. (34543)
  • Legacy widget’s preview functionality is broken when the page is moved. (34384)
  • Prevent focus trap in Legacy Widget block’s preview iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.. (33614)

Performance

Block Editor

  • Improve the getBlock and getBlocks performance. (34241)
  • Remove duplicated useValidAlignment hook. (34593)

Core Data

  • Move locks state from store to local variable. (34374)

Global Styles

  • Remove colors classes from the packages that are already provided by global styles. (34510)

Experiments

Navigation Editor

  • Add undo redo buttons in navigation editor. (34533)
  • Decode entities in the menu names. (34263)
  • Disable “block-nav-menus” feature for the purposes of removing the “experimental” status on the Navigation Editor. (34444)
  • Preload menu REST API requests on new navigation editor. (34364)
  • Update navigation editor placeholder. (34568)

Documentation

Handbook

  • Replace withSelect references with useSelect. (34549)
  • Updated Template Section copy. (34383)
  • Update block variations documentation about block scope. (34455)

Packages

  • Blocks: Correct typo in Blocks Documentation. (34396)
  • Componentes: Fix/update documentation alignment matrix control. (34624)
  • Componentes: Update DuotonePicker documentation for accuracy. (34494)
  • Eslint: Add no-unsafe-wp-apis to rules list in the documentation. (34416)
  • Prettier: Correct syntax in README.md for prettier-config. (34600)

Code Quality

Block Editor

  • Code cleanup to the getBlock refactoring. (34326)
  • Ensure that blockType is defined when accessing apiVersion. (34346)
  • Migrate lightBlockWrapper support to apiVersion for blocks. (34459)
  • Fix Animated warning log. (34197)
  • Rich Text: Replace global event handlers with local ones. (34492)
  • Rich text (core): OnFocus method can be replaced with HTMLElement.focus. (32054)
  • Use Setting: Consolidate the PATHS_WITH_MERGE constant to one instance. (34407)

Block Library

  • Gallery Block: Add docblockdocblock (phpdoc, xref, inline docs) comments to the new gallery 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.. (34562)
  • Gallery Block: Remove IE specific CSSCSS Cascading Style Sheets. hacks. (34372)
  • Button Block: Replace global shortcut event handlers with local ones. (34498)
  • Navigation Block: Refactor to use generic classnames. (34171)
  • Navigation Link Block: Replace global shortcut event handlers with local ones. (34500)
  • Gallery Block: Remove redundant css selector. (34277)

Components

  • CustomGradientBar: Replace global shortcut event handlers with local ones. (34505)
  • Guide: Replace global shortcut event handlers with local ones. (34503)
  • Navigate regions: Use React events for shortcuts (portal bubbles & contextual). (33633)
  • Rename PolymorphicComponent* types to WordPressComponent*. (34330)
  • Simplify Modal with hooks. (34412)
  • Simplify & polish heading levels. (34378)

Core Data

  • Fix linting errors. (34596)
  • Fix linting error in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (34464)
  • Migrate canUser resolver to thunks. (34580)
  • Migrate entities.js to thunks. (34582)
  • Migrate getAutosaves resolver to thunks. (34581)
  • Migrate getEntityRecord resolver to thunks. (34576)
  • Migrate getEntityRecords resolver to thunks. (34578)
  • Migrate resolvers to thunks: GetAuthors, _getCurrentUser, __getCurrentTheme, __getThemeSupports. (34579)
  • Refactor deleteEntityRecord to use thunks instead of generators. (34386)
  • Refactor editEntityRecord, undo, and redo to be thunks instead of generators. (34387)
  • Remove the PROCESS_PENDING_LOCK_REQUESTS action. (34343)
  • Refactor saveEntityRecord from redux-rungen to async thunks. (33201)
  • Remove extraction of raw values in saveEntityRecords. (34502)

Other Packages

  • Compose, useDropZone: Ensure drag event targets HTMLElement. (34272)
  • Editor: Replace hardcoded store key. (34296)
  • Env: Clarify config error within parse-config.js. (34322)
  • Post Editor: Fix gray W menu color. (34318)
  • URL: Add getFilename method to the URL package. (34313)

Tools

Build Tooling

  • ESLint: Add useSelect to direct function calls list. (34301)
  • ESLint: Update error message for @emotion/css with info about the useCx hook. (34418)
  • Fix build hang on Windows 10. (23589)
  • Linting: Remove global event listener warning. (34528)
  • More work on the stability of the performance metrics. (34229)

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

  • Added janw-me to the Codeowners for the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher FSE folder. (32990)
  • Fix title missing in bug report form. (34504)
  • Update bug form to use drop downs. (34458)
  • Update the minimum supported WordPress version to 5.7. (34536)

Testing

  • Add unit tests for edit site editor utils. (34401)
  • Debug e2e-tests in vscode. (29788)
  • Jest Preset: Restore the default setting for the verbose option. (34327)
  • Make Test_Widget compatible with WP_Widget. (34355)

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 11.56.71s40.42ms
Gutenberg 11.46.80s44.79ms
WordPress 5.87.53s50.72ms

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

Thanks to @beafialho and @joen for the release post assets, @priethor for coordination and review, @youknowriad for release and tools wrangling, @mamaduka for answers and help throughout, and @talldanwp for inviting me to shadow a release in preparation.

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

What’s next in Gutenberg? (Mid-September 2021)

This status update contains the high-level items that 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/ contributors are focusing on in preparation for the WordPress 5.9 Go/No Go that builds on the focus areas for 5.9 and the current Site Editing Scope. Please join us in our efforts and let us know in the comments if anything is blocking you from doing so.

How to follow along with Gutenberg:

Here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development-related posts.


Template Editor

The Template Editor is the editing mode that allows you to create, assign, and edit 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. templates to posts and pages. There are different editors that leverage this editing mode, such as the Template Editor inside the Post Editor or the Site Editor available in the 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. Current focuses include:

Follow along:

Patterns

With the initial rollout of the new directory in WordPress 5.8, there’s a growing need to expand the inserter integration to accommodate broader categories of patterns and the experience of browsing them:

Follow along:

Global Styles and 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. UIUI User interface

WordPress 5.8 introduced the scaffolding necessary for themes to control how various aspects of blocks render and how the interface is controlled. The natural next step ahead is to develop the user interface that will allow themers to build with these style properties directly in the editor and when allowed, users to interact with these style properties.

Follow along:

Design Tools

Design tools encompass all tools related to the appearance of blocks and it ranges from colors, typography, alignments, and positioning, to filters like duotone, cropping, and background media creation of shared tools and its consistent application across blocks:

Follow along:

Navigation Block

With the help of the Navigation block, editing a site’s navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. will be possible with a block interface and within a stand-alone block editor. This will allow users to edit not only the menu’s structure but also its design directly in context and without the need for previewing. The main current focuses in this project are:

Follow along:

Navigation Editor

The Navigation Editor aims to help expand what’s possible with menus while bringing block functionality to yet another part of WordPress while offering a more modern experience. Current efforts include:

Follow along:

Other Projects

Apart from these bigger projects, there are a wide arrange of focuses where contributors can help improve Gutenberg, including:

Follow along:


Areas to be aware of

WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US 2021:

  • WordCamp US 2021 is scheduled for October 1st, 2021 as an online event. Tickets are free and available here!

FSE Outreach Program:

Hallway Hangouts:

Design:

  • If you would like to see a design exploration on the Inspector 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., take a look at this post exploring ways to improve the Document Status and Visibility sections.

Ways to Get Involved

While the above items are our focuses, don’t forget that you can always help with triage, testing issues, good first issues, and reviewing PRs. In particular, if you’re interested in helping with triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. but don’t know where to start, there’s a course on Learn WordPress for how to do triage in GitHub! Check it out and join us.

If there’s anything we can do to make contributing easier, let us know in the comments or in #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.

Meetings to join:

While you can view all meetings here, here are specific meetings to join depending on your interest. Remember that you need a WordPress.org slack account to participate:

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor weekly Wednesdays @ 14:00 UTC in #core-editor focused on all things Gutenberg.
  • Block Themes meeting twice monthly on Wednesday @ 16:00 UTC in #themereview focused on preparing for Full Site Editing.

Thanks to @annezazu and @cbringmann for reviewing this post.

#core-editor #gutenberg-next #gutenberg

Editor Chat Agenda: 15 September 2021

Facilitator and notetaker @ajitbohra

This is the agenda for the weekly editor chat scheduled for Wednesday, 15 September 2021, 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/..

  • WordPress 5.9 Preliminary Roadmap.
  • 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/ 11.5.0.
  • Whats next in Gutenberg? (Will be posted after 11.5.0 release)
  • Updates based on updated scope for site editing projects and WP 5.8:Navigation 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. & Navigation Editor.
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
  • Task Coordination.
  • Open Floor.

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

  • 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 #agenda #meetings

Core Editor Improvement: Cascading impact of improvements to featured images

When a new feature is added, it’s easy to see what the feature does right now rather than the many things it allows you to do, particularly when combined with other tools. This is especially true as design tools continue to evolve! This post offers a quick dive into how improvements to the 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. 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. lead to more possibilities for content creation. 

Greater control of posts layout

Thanks to some recent changes to the Featured Image block, the Query 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. block just got even more powerful. As a reminder, the Query Loop block is an advanced block that allows you to display posts based on various parameters and was released in WordPress 5.8. Within the Query Loop block, different blocks, like the Featured Image block, can be placed within it to show the Featured Images for each post listed. While you’ve been able to control the general placement of the Featured Image, until 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/ 11.3, you couldn’t control the basics of the resulting image. This came up a few times during testing with the FSE Outreach Program as a pain point with folks wanting deeper customization options. Now, you can control the sizing and scale of the image to your liking opening up the beginnings of a new world of layout options!

Video showing the new Featured Image Block options within the Query Loop block.

More options when creating templates

This change also impacts anyone using the Template Editor as you can now customize how the Featured Image shows up in a template you created. This is just a start too with more size tooling planned for the Featured Image block. Most recently too, the ability to add duotone filters to spruce up your images with endless color options was included in Gutenberg 11.4. Just like with the Query Loop block example above, this allows you to add a Featured Image block with a duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. added and then apply that to any post or page you’d like so all posts have the same duotone shading:

Video showing the new Featured Image Block options within the Template Editor.

Thank you @shaunandrews for the design assist & @kellychoffman for help with the copy.

#core-editor, #core-editor-improvement

Editor chat summary: 8 September, 2021

This post summarizes the weekly editor chat meeting (agenda here) held in Slack. Moderated by @andraganescu.

Announcements

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/ 11.5 RC launched today (Sep 8)

@mikeschroder released Gutenberg 11.5 RC. You can take it for a spin from here.

Important resources for the incoming period of time

@priethor added some details about where we should look for guidance around the incoming updates to WordPress in light of the 5.9 release:

There will be an upcoming What’s Next in Gutenberg post based on the preliminary road. It’s worth noting the “What’s Next” intent is to highlight issues where contributors can help, whereas the high-level plan is defined in the preliminary road post.

Key Project Updates

Navigation Editor

@get_dave shared this week’s update:

Mobile

From mobile, @hypest offered the updates:

 Shipped

  • 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. picker search.
  • Inline previews for YouTube and Twitter embeds.
  • Alignment options for embeds.
  • New experimental Gallery block.

In Progress

  • Embed block.
  • GSS Font size, line height, colors.

Components

@mciampini shared some updates from the folks working on the components package:

Shipping:

Notable fixes:

In Progress:

Task Coordination

Feel free to add items to this post if you weren’t able to make the meeting.

@ntsekouras

@joen

@mamaduka

  • Updated documentation to replace withSelect HOC references with useSelect.
  • Worked with Riad to fix code data issue with include query parameter.
  • Checked on approved PRs, merged some, and left comments on others to see if authors have time to address the feedback. (Sorry if you received more notifications than usual)

I would appreciate feedback on the following PRs:

  • 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. Fetch: Improve isMediaUploadRequest check
  • FSE: Add basic support for child themes

@get_dave

@jorgefilipecosta

  • During the last week I updated the design of the mosaic view, I iterated on the engine to allow blocks to be aware of global styles, I proposed the PR to enhance the design of the new color picker and I did multiple PR reviews. I also started the effort to replace tinycolor with colord.
  • For the next week I place on continuing the color library replacement, Iterate on the color picker design and pick another task related to the global styles new design.

@zieladam

@annezazu

@mciampini I plan on:

@oandregal

  • I’ve been working on enabling the global stylesheet for all themes and other minor improvements. Prepared a PR to make sure themes with 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. load the styles fine in 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. as well as the theme directory.
  • In the area of alignments: landed a PR that makes the wide control only available if the theme provides a wide size and prepared another for fixing floats (left, center, right) for blocks that are not part of a container.

Open Floor

Will PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher minimum required version change in WordPress 5.9?

@anil (Anil Sardemann) asked about the future min. PHP requirements of 5.9. @hellofromtonya explained that there are no plans to change the minimum supported PHP version in WordPress 5.9 since still more than 5% of WordPress runs on PHP 5.6.

Help with the future of Block Theme Switching

@annezazu brought more attention to the FSE Program Exploration: Help with the future of Block Theme Switching. This is a very new approach in that it’s all about gathering insights to help shape the potential designs rather than testing a specific flow. It’s neat to be able to be involved this early in solving a problem. Check it out, share your thoughts, and get creative!

Help needed with review

@faizan asked for a review on his patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. on Ticket 50074

#core-editor, #core-editor-summary, #summary, #themereview

Editor Chat Agenda: 8 September 2021

Facilitator and notetaker: @andraganescu

This is the agenda for the weekly editor chat scheduled for Wednesday, September 8 2021, 04:00 PM GMT+1.

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/..

  • What’s new in Gutenberg (11.4).
  • 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/ 11.5 RC will be released Wednesday.
  • Whats next in Gutenberg: July and August. (September version has not been posted yet.)
  • Updates based on updated scope for site editing projects and WP 5.8:
    • Navigation 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. & Navigation Editor.
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
  • Task Coordination.
  • Open Floor.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • 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.

#agenda, #core-editor, #core-editor-agenda, #meeting

Editor chat summary: 1 September, 2021

This post summarizes the weekly editor chat meeting (agenda here) held in Slack. Moderated by @annezazu.

Announcements

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/ 11.4 launched

Release notes coming soon after a quick fix. For now, some highlights:

  • The Gallery 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. now acts as a wrapper for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Image Blocks thanks to the Gallery Block Refactor. 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 and theme authors, please do check out out this dev note to get up to speed on backwards compatibility
  • The 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. block now has the option to add duotone filters so you now have even more ways to add your own style to your content.
  • Padding support was added to the Buttons Block making it easier to get the spacing just right.

5.8.1 RC launches today (Sept 1)

Based on the schedule previously shared, 5.8.1 RC will launch today with the release coming on September 8th. If you can, please help test the release.

Final day for the current FSE call for testing (Sept 1 )

It’s the last day to explore the current FSE Outreach Program call for testing. If you have time, share your thoughts! If you don’t, please help amplify by sharing with others.

Reminder: monthly block theme meeting in #themereview

A reminder was shared that there is a block theme meeting in for anyone keen to chat about what’s happening with block themes. This is a recurring monthly meeting so if you missed today’s, don’t worry!

Monthly Priorities & Key Project Updates

The overarching plan for September has not yet been shipped yet so we based today’s conversation on the July & August Plan. As a reminder to those working on these projects, async updates are both welcomed if you can’t make the meeting and needed.

Navigation Editor

For the Navigation Editor portion, @talldanwp shared a lovely update. Here are some highlights:

  • A plan has been formed for migrating from the customize 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. to the 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/. in the navigation editor.
  • The nav editor 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.’s design has been refreshed.
  • Some conversation is underway around extensibility of the editor (join in if you’re interested)

Mobile

Shipping:

  • Block picker search

 Notable fixes:

  • Fixed an npm install breakage on Gutenberg’s trunk branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". due to third-party dependency we were building that had an unpinned typescript dependency.

In Progress:

  • Embed block (hoping to release some inline previews in our next release)
  • GSS Font size, line height, colors

Patterns

For patterns, some context was shared amongst the core editor wranglers from @paaljoachim that the design tool overview enhancements will ultimately also trickle down to make pattern creation easier, more responsive, etc.

Styling

I’m going to reuse part of the async update from André since he’s done a ton of work there. Lots of work is underway with adding duotone support in theme.json along with a PR around enabling global styles to all themes. Expect work to continue on this path for the week ahead.

No update for the Template Editor or the Navigation Block

If anyone has any context to add around the Template Editor or the Navigation Block, feel free to chime in below in the comments.

Task Coordination

Feel free to add items to this post if you weren’t able to make the meeting.

@mikeschroder

Shipped:

  • Closed 32024 via [51677]. Thanks everyone for your help, including with the follow-up tests commit! 
  • Opened two Video Block poster related PRs (34415 and 34411).

This week, planning to investigate 33437.

@oandregal

@zieladam

@youknowriad

  • I’ve worked a bit on performance. I want to get back to some layout related work.
  • I’ve reviewed a number of PRs as well.
  • I’ve spent some time this week exploring some wild ideas for block registration (both to make easier and more universal/language independent). For the curious, the repo is here https://github.com/youknowriad/blocky it’s no where near ready but I’d love to learn more about your custom blocks, if you have examples or ideas about how you’d ideally write them and what use-cases would you want to see for the simplified “view” property.

@joen

@gziolo

@annezazu

  • Recapping and responding to the current call for testing for the outreach program.
  • Finalizing the next call for testing(more exploration than call for testing right now on theme switching).
  • Drafting some core editor improvement posts + assisting with an upcoming News post
  • Shipped a YouTube video all about patterns.
  • Triaging unlabeled PRs (down from over 100 to in the 20s). The unlabeled PRs that are left I am not quite sure what to do with so feel free to jump in.

Open Floor

Offer to run a Gutenberg Release for the first time. Raised by @mikeschroder.

If folks are interested, after shadowing @talldanwp (thanks again!), I would love to try running a Gutenberg release for the first time. Whenever it works best for the team is okay with me!

Next step: @priethor will coordinate since he helps wrangle the release process.

Proposed migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of E2E specs to Playwright. Raised by Bart Kalisz.

A proof concept was shared and well received thus far as part of a proposed migration to Playwright. At this point, a wider discussion needs to happen with impacted parties to ensure that folks are willing to follow the proposed changes. A few folks chimed in agreeing that a wider discussion needs to happen along with perhaps a comparison with Cypress (mentioned by @swissspidy). Depending on how things go, a Make Core post might make sense.

Next steps: Bart alerted the crew in #core-test and @annezazu will ensure that it gets discussed in the Core Dev meeting for wider attention.

Call for community ideas for FSE Outreach testing calls. Raised by @annezazu.

I’d love to start experimenting with community members sharing ideas for what to test in the outreach program. If you’d like to suggest an idea for a call for testing, know it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the #fse-outreach-experiment 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 or via DM to me! In case you’re curious about how calls for testing have been wrangled in the past, it’s typically been a combination of monthly project priorities/release priorities + my own testing/what I can make happen + conversations with contributors.

#core-editor, #core-editor-summary, #summary