What’s new in Gutenberg 10.6? (12 May)

Two weeks have passed since the last 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, which means the time has come for a new version! Gutenberg 10.6 introduces 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. supports, 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. Pattern suggestions in placeholders, colors, and borders for Table Blocks and a bunch of enhancements to Full Site Editing. Work on new features like Global Styles, 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. Editing and Navigation editing continues at a steady but firm pace.

Last but not least, support for Internet Explorer 11 has been dropped as of this release.

Support for Duotone filters block supports

Experimental support for applying a duotone filter to a block (or part of a block) has been added to the block supports. Check out the Image and Cover blocks for a demonstration.

If you would like to include this for your own blocks, be sure to check out the block supports documentation!

Block Pattern suggestions in placeholders

It is now possible to display suggestions for Block Patterns in the placeholder area of a newly created block. This opens up a world of opportunities to inspire the user with block patterns showcasing creative ways of making the most out of the created block. An excellent example of how this feature can be leveraged has been added to the Template Part block.

The original placeholder view can still be accessed from the ‘Start blank’ option.

Table Block enhancements

In this release, a couple of enhancements have been added to the styling capabilities of the Table Block. It is now possible to have fine-grained control over both the colors being used and the table border. The latter has been made possible thanks to the new useBorderProps hook.

Full Site Editing continues to mature

Working towards inclusion of Full Site Editing features in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., a lot of work has been done behind the scenes to stabilize and mature experimental features.

  • The theme.json configuration file has now reached stability level and work on its structure change has been completed. 
  • A couple of dozen blocks related to Site and Template editing have now also been promoted to stable blocks. 
  • To make the editor more accurately resemble the front end, the template editor now opens inside of an iframe

Dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.: Loading the template editor inside of an 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. is an important step towards implementing this for the post editor as well. As challenging as this sounds, the benefits of taking this approach are far-reaching. If you are a block author, it is important to learn about how this impacts your blocks, and how to prepare them for this change.

Performance improvements

Thanks to a change in the way the block controls hooks panel renders, performance while typing has improved 26% compared to Gutenberg 10.5.

So long, and thanks for all the fish!

This release marks a milestone in modern web development. As of Gutenberg 10.6, we have officially dropped support for Internet Explorer 11, in accordance with the IE 11 Support Phase-Out Plan. This change effectively reduces the total build size by a whopping 6%.

10.6

Enhancements

  • Block Library:
    • Stabilize some theme blocks for WP 5.8 release. (31423)
    • Mark Log In/Out block as stable for 5.8 release. (31499)
    • Post date: Add link color option. (30827)
    • Table:
      • Add border block support. (31265)
      • Add colors block support. (30791)
    • Query Block:
      • Add semantic wrapper element. (31421)
      • Add wrapper and align support. (30804)
      • Show a spinner instead of the Loading text message. (31095)
    • Unify the post tags and post categories block under a unique post terms block. (31458)
  • Components:
    • Add component system context. (30877)
    • Use UnitControl for font-size. (31314)
    • Use vanilla emotion for view. (31099)
    • Promote Heading. (31299)
    • Promote Text to full components export. (31291)
    • Promote ui/Flex and deprecate isReversed prop. (31297)
    • Promote VisuallyHidden from ui into full components. (31244)
  • Core Data: Add experimental util to allow fetch remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org data from 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/.. (31085)
  • Design tools:
    • Add Block Border Support. (31264)
    • Add duotone block supports. (26752)
    • Spacing Support: configurable sides for padding support. (30607)
  • General Interface:
    • Display most used terms in term selector. (30598)
    • Rename “Modes” to “Tools” in the 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.. (31430)
    • RTL support for redo/undo icons. (31219)
    • Update “trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” icon. (31463)
  • Patterns: Suggest block patterns in block placeholder states. (29602)
  • Site Editor:
    • Add show more settings to block toolbars. (31305)
    • Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. (30664)
    • 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): Constrain tabbing inside them multi-entity save panel. (31136)
    • Iframe the template editor. (31375)
    • Save panel – decouple Site Entity items for individual saving. (30816)
    • Template part:
      • Add patterns placeholder selection. (31155)
      • Register block variations and area selection inputs from original area definitions. (30821)
    • Site Tagline: Letter casing and padding. (31042)
    • Site title: Add padding. (31125)
    • Try: Blue parents. (31196)
    • Verify if php template exists for a hybrid/universal theme with a block-based parent. (31123)
  • Template Editing Mode: Use a darker frame for template mode and previews. (31044)

New APIs

  • Core Data: Add batched variants for start and finish resolution actions. (31005)
  • Block 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.: Allow “array of attributes to be compared” for isActive property in block variations. (30913)
  • Blocks: Introduce registerBlockTypeFromMetadata API. (30293)

Bug Fixes

  • Block Editor:
    • Block Support: Fix server-side border color support check. (31020)
    • Create useBlockRef and useBlockElement for better access. (29573)
    • Fix focus handler in Safari. (31103)
    • Fix selection clearer ref passed to motion.div. (31469)
    • Left-align query patterns in the carousel. (31233)
    • Persistent List View: Fix the list stealing focus from the canvas on item mount. (31058)
    • Try: Toolbar gap. (30983)
  • Block Library:
    • Allow for group and columns blocks to specify an unlocked template. (29916)
    • Button Block: fix 100% width buttons alignment with other buttons. (29794)
    • Image Block: Hide controls while in upload state. (30891)
    • Fix: Make media playable on video and audio block backend. (31257)
    • Prevent PostDate as link to load inside an iframe. (31350)
    • Post Content: Prevent infinite recursion. (31455)
  • Components:
    • 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 color picker input state for falsy values. (30799)
    • Fixed imports that resulted in build failing. (31106)
    • Stop auto-memo antipattern and remove senseless default values. (31246)
  • Compose: Fix parameter name typo in useRefEffect. (30597)
  • General Interface:
    • Remove tools dropdown menu from medium viewport when text labels mode is active. (31431)
  • 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:
    • Call deprecated 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. only when new filters not present. (31027)
    • Fix core-block-patterns support on GB. (31546)
    • Use require_once instead of require when registering blocks. (31148)
  • Site Editor:
    • Fix popover/inspector scrolling. (31395)
    • List view improvements. (31092)
    • Render out HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. characters in post and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. titles. (30661)
    • Use EditorNotices component for notices. (31303)
  • Themes:
    • Hook maybe_inline_styles in the footer. (31072)
    • Inlined core block styles should not override user-added inline styles. (31268)
  • Writing flow:
    • Fix edge detection in Chrome. (31150)
    • Fix RTL issues. (31159)

Performance

  • Improve the typing performance by render hooks panels for selected blocks only. (31381)

Experiments

  • Block-based Widgets:
    • API:
      • Remove widget screen dead code. (31411)
      • Set order of Widgets submenu item. (31214)
      • Use gutenberg_get_block_categories for getting block categories. (31486)
    • 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.:
      • Add white background. (31487)
      • Fix adding new legacy widget. (31490)
      • Fix Legacy Widget block. (31405)
      • Fix toolbar so that it overlaps preview. (31077)
      • Fix unable to publish edited legacy widgets. (31484)
      • Fix unable to get block refs in widgets customizer. (31262)
      • Focus control in widgets customizer. (31308)
      • Make the entire 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. have a white background. (31492)
      • Show blocks from plugins. (31406)
    • Legacy Widget:
      • Add ‘Convert to blocks’ button for text widgets. (31215)
      • Implement design iterations. (30889)
      • Ensure the control form’s IDs have a consistent number. (31485)
      • Refactor Form to not use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.. (31444)
    • Widget Editor:
      • Ensure Hello Dolly plugin text doesn’t overlap the widgets screen UIUI User interface. (30729)
      • Fix entity deletion in widgets screen. (31404)
      • Fix move to widget area item checkmark. (31494)
      • Improve theme switching experience. (31407)
      • Move to widget area iterations and fixes. (31445)
  • Global Styles:
    • Add a new endpoint that exposes block editor settings through the REST API. (29969)
    • Add theme origin to getStyle. (31267)
    • Block Supports: Allow skipping serialization of font size. (30879)
    • Create block metadata for all blocks. (31590)
    • Cover against a block being unregistered. (31588)
    • Fix Possible CSSCSS Cascading Style Sheets. units not passed to useCustomUnits. (31057)
    • Make the configuration resilient to changes to safecss_filter_attr(). (30888)
    • Preset classes for site editor: Generate them like in the front-end. (31218)
    • Remove specificify for link color. (31497)
    • Remove tests and make utility methods private. (31224)
    • Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility. (29981)
    • Site Editor:
      • Fix generation of preset class for border color. (31217)
      • Fix preset class specificity. (31204)
    • Target global styles to the body element instead of :root. (31302)
    • Themes: only split block styles loading for block themes. (31309)
    • Update shape of 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.. (30541)
  • Navigation Editor and Block:
    • Block placeholder: fix font inheritance. (31410)
    • Correctly display menu used on location text. (31500)
    • Fix issue with missing styles for Page List in navigation. (31368)
    • Fix navigation screen collapsing 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.. (31228)
    • Fix navigation screen padding again. (31372)
    • Fix nav color regression. (31495)
    • Fix nav editor links to correctly persist new tab target attribute. (30956)
    • Fix padding and cursor for nav menu item placeholder. (31275)
    • Fix submenu direction justification regression. (31414)
    • Fix submenu hover issue. (31195)
    • Fix vertical alignment. (31376)
    • Indicate unsaved changes. (31119)
    • Move selected menu ID to the store. (31320)
    • Move the delete menu button at the bottom. (31026)
    • Standardise and fix parsing and serialization of blocks and nav menu items. (31004)
    • Sync menu name updates. (31093)
    • Try: Remove padding from menu items when no background. (30805)
    • Use ajaxurl global in batchSave action. (31028)

Documentation

  • Docs
    • Add in more high level overviews of major FSE projects. (31295)
    • Create a Full Site Editing overview document. (31065)
    • Fix the broken links of register block type documentation. (31285)
    • Global Styles: Update documentation for theme.json. (31507)
    • Link to CSS that wp-block-styles include. (30433)
    • Minor design updates using callout. (31398)
    • Organize and update block theme documentation. (31167)
    • Packages: Drop suppport for IE 11 and non-LTS Node.js versions. (31270)
    • Remove broken links to gutenberg-core team. (31161)
    • Update Versions in WordPress to include 5.7.1 & 5.8. (31439)
    • Update contributing documentation with callout notice usage. (31202)
  • Handbook:
    • Add a deprecation notice to 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. block attribute sources. (31389)
    • Block Patterns Doc Updates. (31060)

Code Quality

  • Block Editor:
    • BlockList: Normalise useSelect selectors for callbacks. (31078)
    • Default appender: Try editable paragraph instead of text area. (30986)
    • In-between inserter:
      • Use useRefCallback and showInsertionPoint. (30285)
      • On hover: Preserve original behaviour. (31266)
    • Move block tools components and styles to separate folder. (31313)
    • Multi-selection:
      • Move shift+click logic to hook. (31358)
      • Move handlers to block ref callback. (31334)
    • Simplify insertion point. (30301)
    • Writing flow: Move selector calls to event handlers. (31332)
  • Block Library:
    • Remove no longer necessary render_callback for Cover block. (31503)
    • Move translatable fields to block.json files. (31120)
  • Components:
    • Remove all remnants of wp-g2. (31292)
    • Remove wp-g2 from scrollable. (31207)
    • Remove G2 portal and refactor Popover to no longer use G2. (31209)
    • Remove wp-g2 fontsize control. (31287)
    • Remove wp-g2 from flex, vstack, hstack, spinner and contr…. (31243)
    • Remove wp-g2 from surface. (31238)
    • Remove wp-g2 from form-group and control-label. (31234)
    • Remove wp-g2 from tooltip. (31232)
    • Remove wp-g2 imports from elevation. (31230)
    • Remove wp-g2 imports from shortcut. (31229)
    • Remove wp-g2 imports from ui/divider. (31212)
    • Remove wp-g2 imports from visually-hidden. (31210)
    • Remove ui/button and ui/button-group. (31205)
    • Deprecate the heading prop for the CheckboxControl component. (30594)
  • Compose: Add types to createHigherOrderComponentifCondition and pure. (30881)
  • Core Data: Specify context=edit only when needed. (30482)
  • Data: Update redux dependency to the latest version. (31318)
  • Mark the __experimentalBlockSettingsMenuFirstItem slot as unstable. (31420)
  • Remove the block wrapper component. (31419)
  • General Interface: Fix typo – toogle / toggle. (31225)
  • Packages:
    • Fix linting warnings for core/block-editor store. (31146)
    • Update lodash to the latest 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. version. (31686)
  • Plugin:
    • Add missing textdomains. (31131)
    • Cleanup unused function parameters. (31130)
  • Rich text:
    • Extract undo automatic change. (31449)
    • Move format boundaries to ref callback and separate file. (31409)

Tools

  • Build Tooling:
    • Also rebuild block-specific styles in dev mode. (31274)
    • Remove support for IE11. (31110)
    • Fix recursive filewatching on linux. (31102)
  • Testing:
    • end-to-end wpDataSelect: Explain why it returns undefined sometimes. (31227)
    • end-to-end testing: Use JSON serialization for getAllBlocks. (31199)
    • end-to-end tests for Widgets Customizer. (31185)
    • end-to-end Site Editor: Evaluate getEditedPostContent on the page. (31121)
    • Fix entity saving intermittent test failure. (31157)
    • Fix tests failing on expected site tagline snapshot. (31473)
    • Fix not getting correct computedName with labels in chromium 91. (31175)
    • Fix snapshots broken 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.. (31247)
    • Fix undo end-to-end test. (31160)
    • Stabilise typewriter end-to-end test. (31472)
    • Use puppeteer-testing-library in end-to-end tests. (28380)
    • Use jest-circus in unit tests. (31178)
    • Upgrade puppeteer-testing-library version. (31133)
  • Scripts:
    • Add .prettierignore, use in format script. (30844)
    • Add postcss as a dependency to ensure a correct version is used. (31364)
    • Update puppeteer-core to the latest version. (31138)
    • Update PostCSS minimum version to ensure it is secure. (31685)
  • Workflows:
    • Run tests on release branches. (31354)
    • Adds reporter that shows JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. test errors on 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/. (31041)
  • wp-env: fix can’t checkout git repositories of a specific 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.). (31271)
  • Native:
    • Moves hermes and react-native mirror to S3. (31441)
    • Publish android artifacts to s3. (30421)
  • Storybook: Update BoxControl stories. (31029)

Various

  • Plugin: Tweaks to accommodate the latest changes in core for styles loading. (31702)
  • Site Logo: Rename sitelogo to site_logo. (31511)

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 10.66.1527.68
Gutenberg 10.56.1238.52
WordPress 5.75.6128.55

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

Special thanks to @priethor and @youknowriad for guiding me through this release!

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

Editor chat summary: Wednesday, 28 April 2021

This post summarizes the weekly editor chat meeting on Wednesday, 28 April 2021, 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/ 10.5 RC release.

The first topic was the Gutenberg 10.5 release. The RC was already shipped a week before the chat https://github.com/WordPress/gutenberg/releases/tag/v10.5.0-rc.1. @jorgefilipecosta said that we had some PR’s that were cherry-picked since the RC.

The final release was scheduled for the day of the chat. @jorgefilipecosta gave public congratulations to @ajitbohra for the first RC release!

Posts requiring feedback and insights.

@jorgefilipecosta said that we have two important posts published recently that deserve wide attention:

In case anyone has some insights or thoughts to share please leave a comment on the posts! Your insights are appreciated!


Monthly Plan and key project updates.

Global Styles

Shipped this week

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.

block.json / 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. supports

  • duotone #26752
  • padding: fix to allow units other than px #31057
  • font-size: can be used in nodes other than the wrapper #30879
  • border-color: fix for dynamic blocks #31020
  • blocks
    • padding for site title #31125
    • padding and letter casing for site tagline #31042
    • link color for post date #30791
    • table uses now background/text colors from the theme #30791

Internationalization

  • custom templates can be translated via theme.json #29828

KSES

  • fix to sanitizing user styles #30888

Site editor:

  • fixes for preset classes in the site editor #31218 #31217 #31204
  • fix for color selector in the UIUI User interface color panel #31015

Ongoing

theme.json

  • Changes to format #29891 are ready #30541 we’re now testing and polishing. It also includes versioning (aka migrate the older formats to the new one).
  • Improve 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 take data from the theme directly #31267

block.json / block supports

  • typography (line-height, font-weight, etc) can be used in nodes other than the wrapper #30880
  • border and color (background, text) to the pull quote block #30951

New style properties

  • Add support for letter-spacing #31118

Misc

  • Add a new endpoint that exposes block editor settings through 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/. (by mobile to access global styles data) #29969
  • standardize capabilities of wp_template, wp_template_part and wp_global_styles #30893

Priorities

The priority continues to be shipping #29891 as soon as possible to unblock related work.

#28913 is a good issue to look at if you can lend a hand (help with reviews, migrate more blocks, more properties, etc).

Block based 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 Navigation Editor.

@andraganescu provided the following update:

The legacy widget got an UXUX User experience upgrade and now the default view is the preview while the embedded widget editor 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. had a performance overhaul. The focus on back combat continued with more testing with legacy widgets from various plugins. As expected a lot of new issues were opened.

On navigation editor the steady pace of improvements continued last week. Many thanks for the many welcome contributions!

Navigation block.

@joen provided the following update:

For the navigation block, we recently merged a padding change and I’m doing some followups (submenu gapplaceholder itemsnav screen). Also looking at small separate improvements, and hope to get back to patterns now that the padding change is merged  — thank you for reviews.

Full Site Editing/Page templates

@youknowriad provided the following update regarding page templates:

I’ve spent some time iterating on that on the last days. We now merged the UIs for templates under a single “template” panel 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., we iterated a bit on the design of the “frame” to distinguish properly between template and post modes and simplified the save flow a bit. There are a number of iterations we could make, I don’t expect all of them to happen before 5.8, at some point, we’d make a final decision about whether it’s good enough to include.

@ntsekouras made a heads up regarding the query block:

Query block has now a wrapper element which for now is div (and will be the default when more tags will be supported) here: https://github.com/WordPress/gutenberg/pull/30804I’ve added a deprecation so everything will work as before but it will be good to update any block themes you have that use Query.

Task Coordination

@aristath

This past week:

  • Continued working on PR to autogenerate anchors for headings – #30825
  • Continued on @nosolosw‘s existing PR to allow inner blocks in quotes – #25892
  • Sustainability: PR to split theme.css styles and only load the ones for rendered blocks – #31239
  • Smaller PRs, mostly to improve code quality & linting errors
  • Lots and lots of PR reviews

Next week: Continue working on all the things mentioned above

@mamaduka

Helping out with the new Navigation Editor screen:

  • Sync menu name updates.
  • Introduce useMenuEntityProp hook.
  • Better handling of unsaved changes. PRs one and two.

Continued my work on the “Most Used Terms” feature and got great feedback about improvements. Thanks, everyone.Planning to continue working on Navigation Editor tasks.

@paaljoachim

@ntsekouras

@annezazu

Continued FSE Program work with the fifth call for testingpublishing a schedule of upcoming plans, reviewing/adding to a brief FSE doc, and launched a second round of questions. I’m planning to likely do a hallway hangout tomorrow on FSE issues/prs/designs in #fse-outreach-experiment for anyone interested!

@poena

Plans to continue on the site block changes but also I want to test the theme.json format and update the tutorial for creating block themes. Awaiting review of the letter-spacing.

@vdwijngaert

Will be working on a PR for moving the post/page title to the top bar. Current PR: #31240, but going to close that in favor of a new one based on a 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".

@jffng

@jorgefilipecosta

The main goal for next week is to review https://github.com/WordPress/gutenberg/pull/30541 and help it be merged. Plans on reviewing other Global Styles PR that are opened (e.g: https://github.com/WordPress/gutenberg/pull/30880). Wants to fix https://github.com/WordPress/gutenberg/issues/27478, which is probably very simple but may have a considerable impact and should be done ASAP.

Open floor

Post title moving in site editor

@bobbingwide said that there’s a problem moving the post title in the Site Editor. Adding that it’s tricky editing the topmost block if one does not have the toolbar set to top. @joen said @ellatrix is working on a fix https://github.com/WordPress/gutenberg/pull/31134.

G2 Components

@aristath asked the status of “G2 components” and if there is any plan on removing them. @youknowriad said that G2 is not removed but while reviewing some of the integration PRs, he noticed that G2 reimplements a lot of things we already have in Gutenberg in its own way. So the plan is still to integrate it but aligning with Gutenberg practices.

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

Changes to block editor components and blocks

URLInput component

In previous versions the URLInput component available on the @wordpress/components package and script had the autoFocus prop set to true by default. The main reason for this was that the component was used as the first input in different modals/popovers (link, inserter) but most third-party usage had to explicitly disable that behavior (in blocks for instance). In WordPress 5.6, that prop is false by default. It’s a better choice for most use-cases as auto-focus is often 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) 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., but consider checking your components if you previously relied on this behavior.

Written by @youknowriad.

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

Following the initial work done for WordPress 5.6 to automatically support style properties for blocks and expose UIUI User interface controls for users, in WordPress 5.7 this mechanism has been expanded to new blocks. Themes may want to review if their styles need to adjust their specificity to accommodate the user choices.

User have now the ability to update the font size of the following blocks via the inspector panel:  core/codecore/listcore/preformattedcore/verse.

Written by @nosolosw.

Empty paragraph changes

In #27995 the default behavior of a published empty paragraph (<p></p>) changed. Before, the 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.) would collapse to zero width and zero height, and be inconsistent with what users saw in the editor. Now an invisible space character is output in empty paragraphs, ensuring linebreaks in the editor correspond to linebreaks on the frontend.
There is a chance of empty paragraphs accidentally published, which will now take up space. If that is the case, it is easily fixed by deleting the empty paragraphs.

Written by @joen.

Cover Block

As of #25171, the cover block now uses an img element instead of using CSSCSS Cascading Style Sheets. background-image for images that are not using fixed or repeated backgrounds. This means that, when rendering the post, a srcset attribute will be applied with the various generated image sizes, saving bandwidth by loading smaller images when possible.

Written by @ajlende.

Button block

The buttons block now provides justification options for its inner button blocks (Justify items left, Justify items center, Justify items right, Space between items).

To implement this feature, the block’s <div> element is now a flexbox container (display: flex)—previously it was display: block. It’s recommended that theme developers check that the buttons block still displays correctly for users for the various alignment and justification options it now provides.

The left and right alignment options for the buttons block have now been deprecated. Users can achieve the same results using a combination of a full alignment and left or right justification. Any buttons blocks that were already added to posts with left and right alignment will be migrated (via the block deprecation system) to use justification in this way when a post is loaded—users should see no change in the visual appearance of buttons.

Written by @talldanwp.

#5-7, #block-editor, #dev-notes

New i18n filters & createI18n() changes

New 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. filters

The JavascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. i18n functions (__()_x()_n() and _nx()) provide translations of strings for use in your code. The values returned by these functions are now filterable if you need to override them, using the following filters:

  • i18n.gettext
  • i18n.gettext_with_context
  • i18n.ngettext
  • i18n.ngettext_with_context

Note: Text domain-specific versions of these filters are also available, see below for more details.

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

The filters are passed the following arguments, in line with their PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher equivalents.

i18n.gettext

function i18nGettextCallback( translation, text, domain ) {
	return translation;
}

i18n.gettext_with_context

function i18nGettextWithContextCallback( translation, text, context, domain ) {
	return translation;
}

i18n.ngettext

function i18nNgettextCallback( translation, single, plural, number, domain ) {
	return translation;
}

i18n.ngettext_with_context

function i18nNgettextWithContextCallback(
	translation,
	single,
	plural,
	number,
	context,
	domain
) {
	return translation;
}

Basic Example

Here is a simple example, using the i18n.gettext filter to override a specific translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization..

// Define our filter callback.
function myPluginGettextFilter( translation, text, domain ) {
	if ( text === 'Add to Reusable blocks' ) {
		return 'Save to MyOrg block library';
	}
	return translation;
}

// Adding the filter
wp.hooks.addFilter(
    'i18n.gettext',
    'my-plugin/override-add-to-reusable-blocks-label',
    myPluginGettextFilter
);

Using ‘text domain’-specific filters

Filters that are specific to the text domain you’re operating on are generally preferred for performance reasons (since your callback will only be run for strings in the relevant text domain).

To attach to a text domain-specific filter append an underscore and the text-domain to the standard filter name. For example, if filtering a string where the text domain is “woocommerce”, you would use one of the following filters:

  • i18n.gettext_woocommerce
  • i18n.gettext_with_context_woocommerce
  • i18n.ngettext_woocommerce
  • i18n.ngettext_with_context_woocommerce

For example:

// Define our filter callback.
function myPluginGettextFilter( translation, text, domain ) {
	if ( text === "You’ve fulfilled all your orders" ) {
		return 'All packed up and ready to go. Good job!';
	}
	return translation;
}

// Adding the filter
wp.hooks.addFilter(
	'i18n.gettext_woocommerce',
	'my-plugin/override-fulfilled-all-orders-text',
	myPluginGettextFilter
);

To apply a filter where the text-domain is undefined (for example WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. strings), then use “default” to construct the filter name.

  • i18n.gettext_default
  • i18n.gettext_with_context_default
  • i18n.ngettext_default
  • i18n.ngettext_with_context_default

Changes to createI18n()

In order to support the filtering of translated strings, the createI18n() method that creates an i18n instance now allows a @wordpress/hooks instance to be passed in.

If you are directly creating an i18n instance yourself by calling createi18n() and you wish to take advantage of filtering, then you will need to update your code to supply a suitable third argument.

Note: If you are using the existing translation functions provided by @wordpress/i18n then you do not need to do anything, the default i18n instance is already set up correctly.

Use standard wp.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. instance when creating an i18n Instance

import { createI18n } from "@wordpress/i18n";
import "@wordpress/hooks";

const myI18n = createI18n( initialData, initialDomain, wp.hooks );

Use separate hooks instance when creating an i18n Instance

import { createI18n } from "@wordpress/i18n";
import { createHooks } from "@wordpress/hooks";

const myHooks = createHooks();
const myI18n  = createI18n( initialData, initialDomain, myHooks );

This dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. was written by @leewillis77.

#5-7, #block-editor, #dev-notes

Inner Blocks API Changes

The majority of 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. authors prefer to keep the focus on the parent block upon insertion in the editor rather than move it to one of the child blocks. Prior to WordPress 5.7, the default behaviour is the latter. In WordPress 5.7, the default behaviour has been changed to be the former.

This simplifies the 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. and means that the behaviour of the following APIs has changed:

  • InnerBlock component
  • useInnerBlocksProps hook
  • replaceInnerBlocks action

InnerBlock component and useInnerBlocksProps hook

Both handle the focus on the blocks with templateInsertUpdatesSelection property. If you want to keep the focus on the parent you can omit this property.

If you want to move the focus to the first child block you have to set this property to true.

Example:

<InnerBlocks template={ [ [ 'core/heading' ] ] } templateInsertUpdatesSelection />

const innerBlocksProps = useInnerBlocksProps(
	{ className: 'wp-block-cover__inner-container' },
	{
		template: [ [ 'core/heading' ] ],
		templateInsertUpdatesSelection: true,
	}
);

replaceInnerBlocks action

Reference: https://developer.wordpress.org/block-editor/data/data-core-block-editor/#replaceInnerBlocks

This action handles focus with the third argument updateSelection. If you want to keep the focus on the parent you can skip this argument when calling replaceInnerBlocks.

If you want to move the focus to the first child block you have to pass this argument with true value. Examples:

replaceInnerBlocks( rootClientId, blocks, true )

This dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. was written by @ntsekouras and edited by @noisysocks.

#5-7, #block-editor, #dev-notes

Changes in @wordpress/data API

As of #26655, it is now possible to pass a store definition instead of the string when referencing a given store registered with @wordpress/data 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.. This change impacts mostly the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ project. It is fully backward compatible, so 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 can continue using hardcoded names when referencing data stores.

The store registration has now two new methods register that takes the store definition as a param to register a store. There is also a new helper method createReduxStore that creates a data store definition for the provided Redux store options containing properties describing reducer, actions, selectors, controls, and resolvers.

Example of the store usage before this change:

registerStore( 'my-store', {
    reducer: ( state = 'OK' ) => state,
    selectors: {
        getValue: ( state ) => state,
    },
} );
import { select } from '@wordpress/data';

const blockTypes = select( 'my-store' ).getBlockTypes();

Example of the new recommended usage:

import { createReduxStore } from '@wordpress/data';

export const store = createReduxStore( 'my-store', {
    reducer: ( state = 'OK' ) => state,
    selectors: {
        getValue: ( state ) => state,
    },
} );

register( store ); 
import { select } from '@wordpress/data';
import { store as myStore } from './store';

const blockTypes = select( myStore ). getValue();

This new capability enables additional static analysis in the Gutenberg project that improve code quality. We can ensure now that all stores used in a given module are always properly defined as dependencies. In effect, it provides the correct loading order of JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. files. It also opens possibilities for new store implementations that share the same high-level API.

Finally, there is a new optional ESLint rule @wordpress/data-no-store-string-literals available in @wordpress/eslint-plugin package. It ensures that string literals aren’t used for accessing @wordpress/data stores when using API methods. The store definition is promoted as the preferred way of referencing registered stores.

This dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. was written by @gziolo.

#5-7, #block-editor, #dev-notes

New block variation APIs in 5.7

New isActive property

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. variation settings can now include a new isActive property. This optional property is a function that is used by the block editor to determine what variation a given block is. This means that block editor UIUI User interface such as BlockCard can display the block variation’s title and description instead of the block’s title and description.

We need this function to be explicitly implemented by block/pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors, because in many cases it doesn’t make sense to try to find a match by checking dynamically all block properties. An example is the embed block where we might have changed the responsive attribute, so a match would not be found.

Example in a single block variation:

const variations = [
	{
		name: 'wordpress',
		title: 'WordPress',
		keywords: [ __( 'post' ), __( 'blog' ) ],
		description: __( 'Embed a WordPress post.' ),
		attributes: { providerNameSlug: 'wordpress' },
		isActive: ( blockAttributes, variationAttributes ) =>
			blockAttributes.providerNameSlug ===
			variationAttributes.providerNameSlug,
	},
];

Example when all variations use the same matching function:

const variations = [
	{
		name: 'twitter',
		title: 'Twitter',
		icon: embedTwitterIcon,
		keywords: [ 'tweet', __( 'social' ) ],
		description: __( 'Embed a tweet.' ),
		patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ],
		attributes: { providerNameSlug: 'twitter', responsive: true },
	},
	{
		name: 'wordpress',
		title: 'WordPress',
		icon: embedWordPressIcon,
		keywords: [ __( 'post' ), __( 'blog' ) ],
		description: __( 'Embed a WordPress post.' ),
		attributes: { providerNameSlug: 'wordpress' },
	},
];

variations.forEach( ( variation ) => {
	if ( variation.isActive ) return;
	variation.isActive = ( blockAttributes, variationAttributes ) =>
		blockAttributes.providerNameSlug ===
		variationAttributes.providerNameSlug;
} );
export default variations;

New useBlockDisplayInformation hook

useBlockDisplayInformation is a new hook that returns display information about a block. It takes into account the isActive property of the each block variation. It returns the block variation or block’s titleicon and description.

If a block variation match cannot be found, the returned information will come from the block type. If no block type is found, then null is returned.

Example usage:

import { useBlockDisplayInformation, BlockIcon } from '@wordpress/block-editor';
function myBlockInformation( clientId ) {
	const blockInformation = useBlockDisplayInformation( clientId );
	if ( ! blockInformation ) return null;
	const { title, icon, description } = blockInformation;
	return (
		<div>
			<BlockIcon icon={ icon } />
			<h2 className="block-title">{ title }</h2>
			<p>{ description }</p>
		</div>
	);
}

This dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. was written by @ntsekouras and edited by @noisysocks.

#5-7, #block-editor, #dev-notes

Block Editor Handbook: restructuring project update (25 January)

This is the second update for the project to restructure the developer documentation of 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. editor. You can find the first update here.

The last two weeks we have been working on improving the documentation homepage. The PR for this has recently been merged, and the block editor now has a homepage with an improved structure. You can give a look at it here.

The next step for the next two weeks is to improve the table of contents of the documentation. The aim is to make it more consistent, and more complete.

The main exit to track changes to the table of contents is here. All contributions and ideas are welcome.

Thanks to all the people who contributed to the project; props to @mkaz @youknowriad @milana_cap @annezazu @paaljoachim.

#block-editor, #developer-documentation

Block Editor Handbook: restructuring project update (15 January)

This post is the first in a series that will be published regularly on the Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blogblog (versus network, site). The purpose of this series is to keep everyone up to date on the progress of 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. Editor Handbook restructuring project.

Currently, we are working on improving the handbook’s homepage. The goal is to make this page a real “Getting Started” page.

Someone coming to this page should be able to have a good overview of what the block editor is all about. They should also be able to find references to how to extend the block editor, how to contribute to it, or to the documentation of its main concepts.

The issue related to the handbook homepage improvement is here and here is the corresponding pull request.

Thanks to all the contributors who helped on the project this week 👏🏻.

#block-editor, #developer-documentation

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