What’s new in Gutenberg? (27 May)

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/ 8.2 is released. The team continues to heavily iterate on the two big projects: Full Sitesite (versus network, blog) Editing and the navigation screen.

The releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. also includes a number of improvements, features, 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. fixes to the post editor.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Patterns

After the introduction of the search support, the Block Patterns UIUI User interface and APIs continue to improve with the introduction of the block pattern categories. In addition to that, a viewportWidth property has been made available to allow tweaking the width used on the block patterns preview. This is especially useful for large block patterns.

Cover Block content alignment

The Cover block saw the introduction of the new content alignment feature which opens up more design possibilities.

Editing flow

The editing flow is a constant priority for the project, and Gutenberg 8.2 introduces several enhancements to improve the writing experience. Copying, cutting, and pasting single blocks is now much easier. You can also split out of captions and button blocks using “Enter” to continue your writing.

8.2 🇮🇹

Features

  • Cover block: Support customizing the content alignment. (21091) (22322)
  • Add Block Pattern Categories Support. (22164) (22410)
  • Copy the whole block if no text is selected. (22186)

Enhancements

  • Limit the most used blocks in the inserter to 6 elements. (22521)
  • Allow split out of caption on Enter. (22290)
  • Buttons block: Allow split and merge. (22436)
  • Improve video backgrounds for the Cover block in iOSiOS The operating system used on iPhones and iPads.. (22346)
  • Combine Calendar Help and Close buttons in the date and time picker. (22176)
  • wordpress/env: Better run command errors. (22475)
  • Add support for named orientations and literal colors on custom gradients. (22239)
  • Use theme color as focus color. (22261)
  • Refine the specificity of the embed block styles. (21599)
  • Change inserter search placeholder text color. (22444)
  • Improve interactions and add unit parsing to the unit selector used in Cover block. (22329)
  • Use smaller spacer and cover block step values. (22320)
  • 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): Add explanatory text before the a11y.speak aria-live regions. (22112)
  • Add Animoto, Dailymotion block embed icons. (21882)
  • Group block: Match frontend markup in the editor. (21867)
  • Iterations on the welcome guide. (21847)
  • Don’t show protocol in link suggestions. (20350)
  • New Block Patterns:
    • Hero and two columns. (21130)
    • Features or Services. (20898)

New APIs

  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 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.:
    • Add new React hook UseCopyOnClick as an alternative to the ClipboardButton component. (22224)
    • Add usePrevious hook to wordpress/compose package. (22540) (22597)
  • wordpress/env:
    • Granular volume mappings. (22256)
    • Add command to display Docker container logs. (21737)
    • Add a destroy command. (21529)
    • Add phpunit support. (20090)
  • wordpress/scripts:
    • Add CSSCSS Cascading Style Sheets. support to start and build scripts. (21730)
    • Support enabling/disabling dev tools, bundle analyzer and externals for build and start scripts. (22310) (22426)
  • Support preloading 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. requests using the fetchAllMiddleware middleware. (22510)
  • Support controlled InnerBlocks. (21368) (22366)
  • Add Close button 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.. (22323)
  • Block API: Allow block registration without categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (22280)
  • Support customizing the viewportWidth for block patterns. (22216)

Bug Fixes

  • Fix theme CSS bleed in the Button component. (22460) (22522)
  • Fix CSS validation error on Button block styles. (22583)
  • Fix editor crash potentially happening when hovering style variations. (22490)
  • wordpress/env: Start database service before running tasks. (22486)
  • Fix editor crash when zooming. (22408)
  • Fix Button border radius set as 0. (22393)
  • Fix Cover block resizing. (22349)
  • Writing Flow: Fix reverse block selection after block deletion from rich text. (22292)
  • A11y: Include reusable blocks in announced inserter search results. (22279)
  • Remove the previous style CSS class when the default style variation is chosen. (22266)
  • Show the global inserter in container blocks nested inside locked templates. (22115)
  • Prevent the Page Break block from showing up as the first block in the inserter. (22523)
  • Polish code editor and fix iOS scrolling issue. (22021)
  • LinkControl component: Fix search result focus state border. (22553)
  • Prevent contributors for accessing the Media Modal. (22306)

Performance

  • Adds a command to run performance tests across branches. (22418)
  • useMovingAnimation: Avoid initial transform animation. (22536)
  • Optimize resizable preview hooks. (22511)
  • Short-circuit validation for identical markup. (22506)
  • More accurate dependency list for useGenericPreviewBlock hook. (22355)
  • Add missing side-effect declarations. (22300)

Experimental

  • Full Site Editing and Site Editor screen:
    • Add page-based navigation. (22368)
    • Page and Template switchers improvements. (22449)
    • Add Query block. (22199) (22364)
    • Use the inserter panel. (22413)
    • Add basic “tools” menu. (22539)
    • Implement post switcher and integrate with “navigate to link”. (22543)
    • Add focus mode and top toolbar modes. (22537)
    • Add entity editor to post content block. (22473)
    • Add ‘Review changes’ button for multi entity saving flow. (22450)
    • Fix Post Author block render issues. (22397)
    • Refactor Post Author block to use block context. (22359)
    • Templates Endpoint: Add resolved query arg to return only relevant templates. (21981)
  • Navigation Block and Screen:
    • Add block movers to the block navigator. (18014)
    • Add ellipsis menu to block navigator. (22427) (22517)
    • Add standard notices to nav menu page. (22374)
    • Implement the creation of menus on the edit navigation screen. (22309)
    • Add menu location management. (21351)
    • Navigation Link block: Add RichText split-at-end/merge/remove behavior. (21764)
    • Fix navigation block placeholder overlap. (22407)
    • Adds orientation class on frontend for the navigation block. (22272)
    • Refactor block navigation block contents. (22487)
    • Fix navigation screen crash with no menu items. (22342)
    • Adds save and failure notices to the navigation screen. (22326)
    • Display the block appender only for the currently active menu. (22311)
    • Allow editing of new menu items from the block inspector. (22210)
    • Submenu nesting and saving new nested items. (21671)
  • Block-based Widgets screen and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. tab:
    • Use interface package on widgets screen 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.. (22304)
    • Use single block editor in the widgets screen. (22140) (22459)
    • Use the mobile view for the Customizer. (22533)
    • Add legacy 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. to calendar transform. (14586)
  • 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.:
    • Implement Managed CSS for Global Styles. (20290)
    • Support theme.json in Post editor. (22520)
  • Block Directory:
    • Activate deactivated blocks if already installed . (22286)
    • Only support an array of assets when injecting assets. (22289)
    • Remove the author rating when none exist. (22184)
    • Update layout for smaller inserter width. (22124)
    • Add error messages inline. (20001)

Documentation

  • Document experimental theme.json. (22518)
  • Fix duplicate grammar docs. (22466)
  • Document the performance testing commands. (22464)
  • Docs: Update note for extraProps filter. (22419)
  • Recommend adding an API docs section. (22415)
  • Add side effect documentation. (22379)
  • Update block editor docs to incorporate the block-toolbar Popover Slot. (22308)
  • Adds a README to MediaReplaceFlow. (22268)
  • Typos and tweaks: (22254) (21968) (21695) (22554)

Code Quality

  • Avoid circular dependency issue in AutoBlockPreview. (22425)
  • Remove opinionated label color from CustomSelectControl component. (22594)
  • Image block:
    • Use hooks. (22499) (22277)
    • Remove extra div wrapper in the editor. (22585)
  • Remove redundant condition from setting default grouping. (22563)
  • Testing: Replace require.requireActual with jest.requireActual. (22370)
  • Use a light block DOM for the Cover block to map frontend markup. (22348)
  • Rename a complementary area component property. (22336)
  • Block API: WP_Block: Document attributes class property. (22222)
  • Polish block wrapper elements file. (21304)
  • Move supports to block.json files for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. (22422)
  • Create Block: Simplify the process of defining a config for templates. (22235)
  • Block Edit: Use hooks. (22433)
  • Add BlockContext component to type-checking. (22353)

Build Tooling

  • ESLint PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: Fix dependency group checking for CommonJS. (22230)
  • Restore Playground 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/ Pages deployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors.. (22443)
  • Fix API Docs generation for filenames with spaces. (22513)
  • Fix check-latest-npm.js failure on Windows. (22485)
  • Refactor the changelog script as a release tool command. (22380)
  • Enable import/no-unresolved ESLint rule for Gutenberg. (20905)
  • Only allow ECMAScript stage 4 features. (22083)
  • Storybook: Use a consistent port number. (22552)
  • Add 0BSD to GPLv2 compatible licenses. (22391)
  • Refactor the release tool and split it into several command files. (22003)
  • Replace wp-scripts env usage with wp-env in CI. (20280)

Various

  • Update: ResizableBox makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). showHandle true by default. (22360)
  • Fix dirty state end-to-end test intermittent failuire. (22532)
  • Fix dirty state end-to-end test. (22448)
  • Add a simple block patterns end-to-end tests and a test utility. (22414) (22495)
  • Remove insert block delay from end-to-end tests. (22377)
  • Add an end to end test to verify cover can be resized with drag & drop. (22369)
  • Upgrade Reakit to stable v1.0.0. (22352)
  • Use alternate display for the popover in alignment matrix. (22351)
  • Fix deprecated version used for register_pattern. (22341)
  • API Fetch: Remove deprecated useApiFetch. (22333)
  • Framework: Pin nvmrc to specific current LTS. (22236)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 8.2.0 7.4s 29.7ms
Gutenberg 8.1.0 8.6s 29.7ms
WordPress 5.4 9.2s 26.8ms

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

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

What’s new in Gutenberg? (13 May)

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/ 8.1 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. mostly contains developments/enhancements on experimental screens, 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. fixes, and performance improvements.
It also contains some new features available on the general editor screens, described bellow.

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. pattern features

Gutenberg 8.1 brings pattern search to makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). it easier to insert the desired patterns and a new pattern: the testimonials.

Copy block action

The copy block action is a small quality of life improvement for touchscreen users or users who don’t use keyboard shortcuts. Gutenberg 8.1 adds a button to the collapsed block actions (next to duplicate, etc.) to copy the selected block(s). The feature is quite similar to the “Copy all blocks” but then for the selected block.

8.1 🇹🇷

New features

  • Pattern search (21944)
  • Testimonials block pattern. (20894)
  • New Transforms:
    • Embed blocks into Paragraph blocks. (17413)
    • Code to HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block and the opposite. (21779)
  • Add copy action to the blocks. (22214)

Enhancements

  • Implement Block Navigator selection on the Nav Menus page. (22017)
  • Write block patterns in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 to allow 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.. (21946)
  • Post title: handle paste as blocks. (21758)
  • Clear Publish Date Button. (20914)
  • Add gap between nested submenus. (22227)
  • Block Library: enhance the author’s block. (19894)
  • Add “black” and “white” color options to the default color palette. (22082)
  • Light blocks: social links. (22078)
  • CustomSelectControl: set aria-hidden to empty option list. (21298)
  • Add some more g2 icons. (21825)
  • Allow the column block in the inserter. (20502)
  • Delete menus in nav menus experimental screen. (21486)
  • Visual and experience improvements to existing sub-navigation flow. (22107)
  • Reduce font-size and line-height of “it’s time”. (21627)
  • Template Loader: Introduce get_template_hierarchy(), drop gutenberg_template_include_filter(). (21980)
  • Make parts of the BlockNavigationList overridable using slots. (21948)
  • Change the color alpha input step to match the slider step. (21953)
  • Navigation: fallback for undefined orientation. (22057)
  • Remove the subscription button from the blogblog (versus network, site) template. (22129)
  • Move the Entities Saved States from Modal to 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.. (21522)

APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. Changes

  • Update the Patterns API to avoid ambiguity. (21970)
  • Expose the registered pattern slugs in get_all_registered. (21619)
  • Fix doc-building pre-commit API hook issue. (22116)
  • 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/.: Block directory – Typecast author_block_count as integer. (17594)
  • Block API: Block Context: 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. content, prepare attributes at render, pass a block to render. (21925)

Experimental

  • Add undo-redo UIUI User interface to edit-sitesite (versus network, blog) and edit-widgets. (21955)
  • Light blocks: site title. (22069)
  • Update: Use EntityProvider on the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. area. (22008)
  • Site editor:
    • Extract gutenberg_find_template_post helper. (21959)
    • Fix default editor background. (22182)
    • Refactor close button slot. (22179)
    • Make close button replaceable. (22001)
    • Add home icon to template switcher. (22004)
    • Updated template content. (22044)
    • Fix spelling mistake. (21991)

Performance

  • Reduce re-renders from block nodes context. (22134)
  • Move memo() from BlockStyles to BlockPreview. (21993)
  • Avoid rerenders of the entire BlockInspector when block attributes change. (21990)
  • Optimize BlockStyles by using 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. and React.memo (instead of HOCs). (21973)

Bug Fixes

  • Popover: Fix closest().parentNode null error. (22264)
  • Correct color palette in color settings. (22138)
  • Remove import of inexistant component. (22130)
  • Build Tooling: Run packages build before lint. (22088)
  • RangeControl: Fix number input change interaction. (22084)
  • Fix entity selection through save panel. (22011)
  • ESLint PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: Relax check for i18n-text-domain rule. (21928)
  • Block Library: Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. does not recognize isSelected prop in Spacer block. (21924)
  • Reinitialize the 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. after the parent block is moved around. (21916)
  • Configure the navigation editor with correct __experimentalFetchLinkSuggestions. (21873)
  • Create the proper shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. on paste. (21864)
  • Refactor FontSizePicker component. Fix bug on undo. (21757)
  • Move caret to the end of pasted content. (21755)
  • Embed: use the same SmugMug URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org regex as the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (21744)
  • Navigation block: use new icon in placeholder. (21713)
  • Fix Template Part placeholder preview. (21623)
  • Restore the missing background color on the nested submenus. (22228)
  • fix: [#21777] Prevent focusing of FireFox address bar. (22215)
  • Fix flaky test in rich text. (22202)
  • Fix flaky test: tag “target” attribute. (22200)
  • Fix extra tab stop on Modal component. (22063)
  • Writing flow: fix vertical arrow nav in table (and generally grid). (22105)
  • Gallery block / media-placeholder – Preserve changes made while upload in progress. (19134)
  • Add missing dependency. (22086)

Tooling

  • Build Tools: Validate package-lock.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. for “resolved” errors. (22237)
  • Build Tools: Disable ESLint no-console for bin directory. (22033)
  • Build Tools: Changelog: Normalize entry to end with period. (22010)
  • Add analyze-bundles script. (21827)
  • Add changelog generator script. (19866)
  • Add a method for publishing patches to the Lerna scripts. (21844)
  • Add additional e2e debugging option. (21845)
  • Replace espree with babel. (21853)
  • Update diff to 4.0.2 and work around tree-shaking issues. (21994)
  • Increase the severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs. of jsdoc/no-undefined-types. . (21942)

Code Quality

  • Block: move new props to hook. (22212)
  • Block: avoid useLayoutEffect. (22108)
  • Try: Reduced specificity base block margins. (22051)
  • Update the audio and video blocks to use a light wrapper in the editor. (22028)
  • Remove unused animation lingering in paragraph file. (22020)
  • Columns. Remove the top and bottom margin from individual column blocks. (22018)
  • Try better inserter toggle styling. (22016)
  • Block Editor: Rename block context in BlockListBlock. (21922)
  • Remove duplicate CopyHanddler. (21817)
  • Types: Restore element, icons, primitives types. (21781)
  • Convert core toolbar buttons into ToolbarButton. (20008)
  • Block Directory: Add end 2 end tests. (20023)
  • ClipboardButton: use hooks. (22220)
  • ClipboardButton: remove wrapper span. (22218)
  • Block Library: Update FSE blocks to use block context. (21696)
  • Group: Zero out the intrinsic margin set to every block in the editor. (22209)
  • Unset the inherit for links. (22160)
  • Template Loader: Get rid of _wp_current_template_part_ids globals. (22143)
  • Block Library: Post Author: Reference attributes by argument. (22114)
  • Remove pass by reference of the $scripts and $styles attributes in client-assets.php. (21987)
  • Use optional chaining, optional catch binding. (21967)
  • Extract block mover buttons so that they can be individually imported. (22122)sss

Documentation

  • Scripts: Mark env script as deprecated. (22158)
  • Docs: Use InspectorControls from wordpress/block-editor. (22153)
  • Fix bundle analysis change location in the changelog. (22136)
  • Documentation: Improve the way CHANGELOG files are maintained. (22126)
  • ESLint Plugin: Add missing rules to root README. (22042)
  • Fix props, in example, code for Edit Post module. (21976)
  • Document e2e test command options. (21962)
  • Add an example for how to choose a style variation for a block variation. (21927)
  • Add documentation for onSelectURL property. (20799)
  • Document the old patterns API deprecation. (22177)
  • Coding Guidelines:
  • Document 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/. language support commitment. (22030)
  • Add “gotchas” section about ES2020 optional chaining. (22029)
  • Recommend function components. (22090)

Various

  • Expose presets declared via add_theme_support in global styles. (22076)
  • Update is-promise package to the latest version. (21940)
  • Blocks: Register FSE blocks if the experiment is enabled. (21536)

Mobile App

  • Add missing RTL support for some mobile components. (21502)
  • Remove separatorType prop from TextControl, RangeControl… (21365)
  • Color settings. (21326)
  • Global styles provider. (21637)
  • Update existing templates to use new blocks. (21857)
  • Enable pullquote block. (21930)
  • Merge release 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". back to master for v1.27.1. (22234)
  • Wrap button blocks with buttons blocks in page templates. (21939)
  • Components: Create a separate .native entry for ToolbarItem. (22229)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 8.1.0 10.88s 43.61ms
Gutenberg 8.0.0 13.30s 42.97ms
WordPress 5.4 10.80s 52.87ms
#core-editor, #editor, #gutenberg-new

What’s new in Gutenberg (29 April)

In this releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 8.0, there is a continued effort to refine the experience around the 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. patterns feature. Additional formatting options for subscript and superscript text have been added, and the code editor has been improved to be more like how one would expect a code editor to look and feel.

Patterns Inserter

To allow a user to browse and insert block patterns, a new tab-panel interface has been added to the Block Inserter. In order to afford additional space for browsing patterns, the top-level inserter has been redesigned to appear as a panel that appears adjacent to the block list when toggled.

Animation inserting a block pattern using the inserter

Inline Formatting

Previously, the availability of formatting options was constrained by the limited space available in a block toolbar. The inclusion of a collapsible dropdown list of formatting options opens the possibility to add a variety of new formatting options for more niche use-cases. This release adds two new formatting options: subscript and superscript.

Animation formatting text of chemical formula using subscript

Code Editor

This release improves the code editor by embracing what it is: a code editor. The Code Editor now uses a monospace font for the title, and the editor resizes to the viewport.

Screenshot of code editor as it appears in Gutenberg 8.0

8.0 🇧🇬

Features

  • Add subscript and superscript formatting options. (21819)
  • Move the Block Patterns UIUI User interface to the inserter. (20951)
  • Improve layout and usability of code editor. (21643)

Enhancements

  • Add inserter previews to more blocks. (21740)
  • Performance improvements:
    • Import from individual reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dates component. (21914)
    • Upgrade showdown Markdown processor library. (21862)
  • Allow title and button-based appender to inherit styles. (21749)
  • Output float clearing for all centered blocks. (21608)
  • Update ‘Welcome Guide’ illustrations. (21515)

New APIs

  • A new Block Context API has been partially implemented, currently limited to block settings and editor APIs. PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 APIs will be implemented in the next 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 releases. (21467, 21868, 21921)
  • Add new “G2”-styled icons to the Icons package. (21209)

Bug Fixes

  • Change wp_make_content_images_responsive to wp_filter_content_tags to resolve warnings in WordPress 5.5-alpha. (21514)
  • Collapse selection to end after link insertion. (17126)
  • Fix selected categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. on existing Latest Posts blocks. (21359)
  • Fix overlapping column contents for embeds. (21570)
  • Fix focus styling for date picker calendar days. (21600)
  • NPM Packages
    • Fix “Cannot find module ‘../utils'” error. (21609)
    • Types: Hide element, primitives, icons declarations. (21613, 21784)
  • Inherit font styles in block appender placeholder. (21725)
  • Allow default pasting behavior in FontSizePicker. (21812)
  • Prevent negative custom text sizes. (21815)
  • Fix image center alignment behavior. (21911)
  • Fix centered buttons margins. (21947)
  • Revert the button block to the previous markup. (21923)
  • Avoid using inline RichText element for navigation link. (21856)
  • Ensure resetEditorBlocks is synchronous. (21839)
  • Fix the button outline style for the old button markup. (21816)
  • Fix default attribute on audio preload. (21735)
  • Fix gradient picker double-click 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.. (21732)
  • Fix broken links in handbook. (21686)
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). useMediaQuery return the correct value on the first render. (21682)
  • Fix visual issue on windows with 782px. (21661)
  • Allow wrapping for Navigation block links. (21632)
  • Remove redundant margins from the columns block. (21615)
  • Fix media Text padding on inner blocks. (21612)
  • Restore floated image margins. (21500)
  • Fix URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org display for scheduled posts. (21410)
  • Test keycode modifiers for keyboard event as exclusive set. (20733)
  • Fix focus loss for Guide “Finish” button in Internet Explorer. (20599)
  • Replace incorrect Snackbar label attribute with aria-label. (20540)

Experiments

  • Add experimental useEditorFeature hook to simplify access to editor features. (21646)
  • 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. page:
    • Try a fixed toolbar in the navigation page. (21340)
    • Fix panel collapsing in navigation page. (21633)
    • Fix mobile layout for navigation menu page. (21638)
    • Delete empty spaces in menu REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. endpoint strings. (21453)
  • Edit sitesite (versus network, blog):
    • Add current theme to template switcher. (21578, 21768)
    • Declare attributes for Template Part block in block.json. (21796)
    • Update end-to-end test for multi-entity saving in site editor. (21363)
    • Add preview options component. (21309)
    • Improve template parts resolution and saving behavior. (21766)
    • Support REST API 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. queries. (21851)
    • Add extra validation when loading template parts. (21636)
  • Block directory:
    • Add InserterPanel around block directory results. (21748)
  • Widgets:
    • Fix legacy widgets z-index issue. (21586)
    • Fix legacy widgets visual issues. (21585)

Deprecations

  • Add deprecation notice to useApiFetch hook. (21723)

Code Quality

  • Remove nested breakpoint in fullscreen mode CSSCSS Cascading Style Sheets.. (21496)
  • Update npm-package-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.-lint from 4.0.3 to 5.0.0. (21597)
  • Update npm dependencies that warn. (21596)
  • Fix license check script to ignore sub-dependencies of ignored packages. (21606)
  • Package TypeScript types improvements:
    • Mark addQueryArgs arguments parameter as optional. (21926)
    • Relax 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. sprintf arguments type. (21919)
  • Update PHPCS to latest version. (21680)
  • Unify how editor alignments are applied across blocks. (21822)
  • Remove obsolete editor alignment classes. (21906)
  • Remove old icons. (21821)
  • Implement block.json for blocks. (21794, 21783, 21782, 21775, 21787, 21774, 21792)
  • Use register_block_type_from_metadata in Latest Posts block. (21788)
  • Polish RSS block code. (21773)
  • Move camelCaseDash to the package where it is consumed. (21736)
  • Improve URLPopover code from review comments. (21621)

Documentation

  • Remove duplicate sentence in glossary documentation. (21565)
  • Update wp-env docs to reflect current functionality of package. (21809)
  • Extract Block Transforms into its own handbook page. (21734)
  • Update the index of 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. to reflect current contents. (21726)
  • Clarify attribute type documentation. (21694)
  • Add location for components style.css. (21654)
  • Fix the JSDoc return type for getEntityRecords. (21630)
  • Update triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. links to new document. (21629)
  • Update Getting Started instructions for remote server. (21625)
  • Update the “patterns” to reflect “user interface” instead. (21562)
  • Create document for contributing with triage. (21350)
  • Update triage.md to add more clarity and relevant links. (21802)

Project Management

  • Update bug report template to help identify the editor version. (21564)

Various

  • End-to-end tests:
    • Add test for template part block creation and insertion. (21849)
    • Add test that template part block customizations are loaded from slug and theme attributes. (21852)
    • Fix tests by removing unnecessary assertions and properly install dependencies in @wordpress/api-fetch. (21780)
    • Add end-to-end test for pinned 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. items. (21652)
    • Add test which verifies reusable block after refresh. (20605)
  • Update cleanForSlug() to remove additional non-word characters. (21007)
  • @wordpress/scripts:
    • Support debugging with test-unit-js. (21631, 21861)
    • Install Chromium on demand together with test-e2e script. (20215)
  • @wordpress/create-block block scaffold tool:
    • Make it easier to provide most popular CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. options. (21751)
    • Split 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/. source files into parts for ESNext template. (21750)
  • @wordpress/env development environment:
    • Expose port 3306 of MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. container. (21545)
  • @wordpress/eslint-plugin:
    • Add the recommended Prettier config to enforce WP coding styles. (21602)
    • Fix no-unused-vars-before-return JSX identifier reference. (21358)
  • Navigation block:
    • Revert changes to data fetching mechanics. (21721)
  • Bundle the block autocompleter in the block-editor package. (21534)
  • Storybook:
    • Add FormToggle component. (18085)
  • Simplify Reusable Block description. (21470)
  • Build tooling:
    • Install Composer dependencies as pre-lint step. (21537)
    • Configure Webpack to watch only build files. (21489)
    • Exit with non-zero status on docgen failed parse. (21690)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36000 words, ~1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 8.0 9.8s 31.4ms
Gutenberg 7.9 12.0s 36.0ms
WordPress 5.4 9.2s 29.4ms

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

What’s new in Gutenberg (15 April)

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. Design Tools

This releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. features a few additions to the design tools for the blocks, including height unit control for the Cover block, line-height control for the Paragraph and Heading blocks, and background gradient support for Group, Columns, and Media & Text blocks.

Patterns

Work on patterns has continued and 7.9 comes with three new ones:

Block markup

The work to lighten the DOM in the editor and makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). it as close as possible to the front-end has been advancing as well.

The 7.9 version also comes with a simplified and more semantic button block, although the pre-existing classes have been left untouched to minimize breakage.

Before this release:

<div class="wp-block-button">
  <a class="wp-block-button__link">Text</a>
</div>

After:

<a class="wp-block-button wp-block-button__link">Text</a>

We try hard to avoid block markup changes and we reckon that the button block changes may require some themes to adapt some of their style selectors. We hope that the improved markup will serve us better going forward.

7.9 🇧🇪

Features

  • Add gradients support to Group, Columns and Media & Text blocks. 21375
  • Add line height support to the Paragraph block. 20775
  • Add font size support to the Heading block. 21431
  • Add line height support to the Heading block. 21215
  • Add custom height unit support to the Cover block. 20888

Enhancements

  • New Patterns:
  • Add a new keyboard shortcut to toggle Fullscreen Mode. 21436
  • Insert post title instead of URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, when adding a link to an existing post 21240
  • Social links block:
    • Update tumblr icon 21329
    • Update and massage social links colors. 21474
  • Allow reusable block top and bottom paddings to collapse. 21472
  • Update all block previews to use the auto-height behavior. 21014
  • Disable autocomplete for custom class name inputs. 21110
  • Several small tweaks to the new Block UIUI User interface. 21476
  • Unify the focus styles across the UI. 21141
  • Improve block focus style. 21498
  • Remove the post permalink UI from the post title. 21099
  • Style the default toolbar buttons. 21252
  • Style tweaks to the patterns library 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.. 21263
  • Smaller space between toolbar and block. 21166

Performance

  • Add block selection performance test. 21230
  • Improve the performance of the block moving animation. 21231
  • Render the patterns list asynchronously. 21322

Bug Fixes

  • Improve WordPress logo rendering for non-retina displays. 21217
  • Fix inserter popover direction. 21556
  • Fix Snackbar notice bottom margin. 18858
  • Fix YouTube Embed block from flickering and crashing on Safari. 21225
  • Fix sibling inserter being unclickable. 21232
  • Fix block duplication using keyboard shortcut 21317
  • Avoid creating an empty paragraph when selecting the parent’s group block 21318
  • Fix the Buttons block margins. 21376
  • Prevent typing on a Popover from closing the block toolbar 21421
  • Prevent copy/paste on number inputs from copying the post content. 21457
  • Prevent scroll jumps when focusing long blocks. 21460
  • Fix Separator block RTL styles. 21525
  • Make dateI18n returns be affected by gmt parameter. 18982
  • Fixes the read more link added by themes in the Latest Posts block. 20541
  • Fix the Latest Posts block when imageDimensions is empty 21070
  • Fix transparent images used as Cover block backgrounds. 20904
  • IE11: fix focus on backspace. 21092
  • Fix IE11 breakage when hitting Enter. 21361 21366
  • Fix block movers on full-wide blocks. 21097
  • Fix Annotations classNames. 21184
  • RangeControl: Fix zero value handling with number input. 21187
  • Fix reusable block horizontal 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.. 21312
  • Fix fullwide margins regression. 21201
  • Prevent the Cover block from overriding the children blocks colors 21254
  • Fix overly verbose aria-label in Social Link block 21369
  • Fix container block appenders and sibling inserters. 21149 21142 21143

New APIs

  • wordpress/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 create-i18n function. 21182
  • wordpress/interface:
    • Add screen sidebar extensibility APIs. 20698 21260
    • Prepare for npm release. 21417
    • Add Fullscreen mode component. 21334
    • Add InterfaceSkeleton component. 21335
  • wordpress/icons: Add new icons: tablet, mobile, desktop, font, share… 21261 21278
  • Support changing the Group block’s DOM element. 20218
  • 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.: Add new utility to register block types from metadata in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 20794
  • Add radio option to the ButtonGroup component. 20805

Experiments

  • Full sitesite (versus network, blog) editing and Site Editor screen:
    • Use the default post comments template for the Post Comments block. 21012
    • Use slug as template part display label.21161
    • Remove duplicate queries fetching template parts 18878
    • Preload the edited template to avoid the white page effect. 21214
    • Move the menu item to the top level. 21273
    • Add block breadcrumb; 21274
    • Prevent template switcher jumpiness. 21280
    • Increase the viewport width used for template previews. 21287
    • Add top level inserter. 21328
    • Apply the editor styles. 20982
    • Update the multi-entity saving flow UI. 21159
    • Small updates to template selector. 21202
  • New navigation screen:
    • Bootstrap the screen. 21036
    • Implement the initial styling. 21314
    • Add save shortcut. 21342
    • Fix editor shortcuts. 21338
    • Basic responsive styles. 21414
  • Navigation block:
    • Make the submenus usable on mobile. 21471
    • Fix block for contributor users 18669
    • Fix submenus being overlapped by wrapping top-level nav links. 21140
    • Add vertical variation. 21296
    • Show color controls in toolbar only. 20884
    • Add capture toolbars prop to inner blocks. 21095
  • Block API Support flags:
    • Introduce a support key for support global style colors in blocks. 21021 21428
    • Add the possibility to support gradients using the experimental color support flag; 21481
    • Add a block support flag for font size. 21153
  • Remove experimentalUIParts API. 20979
  • Add experimental Text component. 21088

Documentation

  • Docs: Describe tools used in E2E testing. 21295
  • WP-env: Add reference to docker log command to show error logs in terminal. 21308
  • Docs: Add section in block RFC about register_block_type_from_metadata. 21501
  • Update serverSideRender docs to include how to use from the wp global. 18722
  • Prescribe latest NPM for development environment. 21017
  • Update Documentation on how to update post 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. values from a block. 21155
  • Document getAnchorRect prop for Popover component. 17709
  • Typos and tweaks: 21228, 21364, 21405, 20660, 21297.

Code Quality

  • Add types to WordPress packages:
    • wordpress/element 21248
    • wordpress/primitives 21482
    • wordpress/icons 21487
    • wordpress/autop, wordpress/escape-htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and wordpress/html-entities 20669
    • wordpress/i18n 21224
    • wordpress/prettier-config 21381 21053
    • wordpress/block-editor DOM utils. 21362
  • Update the Buttons block to use the new color support flag. 21266
  • Update the Paragraph block to use the colors support flag. 21037
  • Update the Columns block to use the colors support flag. 21038
  • Update the Heading block to use the colors support flag. 21039
  • Update the Media & Text block to use the colors support flag. 21169
  • Refactor env commands into separate files .21353
  • Remove the deprecated request dependency. 21398
  • Move default styles to editor normalisation stylesheet. 19837
  • Replace lodash.assign with vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.. 21054
  • Remove the old block preview implementation. 21096
  • Make RichText window/document agnostic. 21105
  • Polish 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) package. 21148
  • Fix two typos in lib rest menu controller. 21418
  • Global tips: Add period at the end of sentence. 20601
  • Lighter block DOM:
  • Update the padding values on the Card component to align with proposed spacing system. 21111
  • Disable scroll in PlainText component. 21115
  • Simplify inserter hasItems check. 21138
  • Avoid string concatenation for the Latest Post block read more link. 21170

Various

  • 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: Bump tested up to info to WP 5.4 21400
  • Output package type declarations. 18942
  • Exclude native files from type checking. 21491
  • docgen: Optimize README update script. 18840
  • Check Latest NPM on npm install. 21521
  • E2E Tests:
    • Improve stability of image block test 21174
    • Improve Allowed Inner Blocks test stability 21175
    • Use waitForSelector to wait for sidebar presence 21180
  • Unit Tests:
    • Fix wordpress/env testPortNumberValidation unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. 21394
    • Introduce reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-testing-library to some existing unit tests. 20428
    • Components: Add SlotFill test. 21226
    • Fail E2E when page displays warning notices 13452
  • Project Management: Prompt user to link 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/ account to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile 21221 21384
  • wordpress/env: Bind "coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress." files to tests environment 21195
  • ESLint Plugin: Continue considering unused variables after encountering exception 21354
  • Enable prettier for JSX files 21151
  • Increase severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs. of JSDoc linting to error. 20427
  • Add I18N specific ESLint rules. 20555 20574
  • Update uuid to v7.0.2. 21258
  • Upgrade Reakit to version 1.0.0-rc.0; 21300
  • Framework: Add package-lock precommit check for latest NPM. 21306
  • Babel Preset: Update Babel version to 7.9.x. 21419
  • ESLint Plugin: Update ESLint and related dependencies to 6.8.x. 21424
  • Framework: Configure ESLint JSDoc plugin to target TypeScript mode. 18998
  • Major version upgrade for Jest in all packages. 20766
  • Storybook:
    • Add TreeSelect component. 20496
    • Update AnglePickerControl title. 21089
  • Automated Testing: composer non-interactive flag for Travis. 21118
  • 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/. error message: Remove unnecessary space. 21178
  • SlotFill: Guard property access to possibly-undefined slot. 21205
  • Build: Add TypeScript version validation 21208

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36000 words, ~1000 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.

Version Loading Time KeyPress event (typing)
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/ 7.9 16.8s 49.87ms
Gutenberg 7.8 16.9s 46.75ms
WordPress 5.4 13.8s 42.31ms

#core-editor #editor #gutenberg

#gutenberg-new

What’s new in Gutenberg? (25 March)

This releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. is mostly focused on polish work for 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. UIUI User interface redesign.

Screen Capture on 2020-03-16 at 15-49-00

It also includes an official 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 register custom Block patterns from themes and plugins. The API is still a work-in-progress and might evolve before reaching WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

register_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'   => __( 'Two buttons' ),
        'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
    )
);

7.8

Enhancements

  • Add visible labels to BlockPatternPicker pattern selection buttons 19789
  • Adds always on display of media URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org 19504
  • Adds current menu class to navigation block 20076
  • Block: Outline when interacting with Toolbar Block Type/Movers 20938
  • Create block: Improve how prompts and values provided are handled 20756
  • Expand create block options and add readme.txt template 20694
  • Patterns: Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). adding patterns easier 20854
  • Polish a few icons 20980
  • Polish date-picker component 20824
  • Improve permalink editing 12009
  • Nicer block footprint for social links 20978
  • Show inserter only when block selected for nesting contexts 20753
  • URL: Use test data from web-platform-tests for isURL spec conformance 20537
  • Adds multi-select to categories on Latest Posts 20781
  • Add basic nav block example for inserter and styles previews 21011

Bug Fixes

  • Allow media library in gallery mode to be reset 20675
  • Autocomplete: Add support for results with long titles 20962
  • Compat: Conditionally 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. editor settings for image dimensions 20939
  • Compat: Use core-js-url-browser for URL polyfill 20225
  • Data: Migrate post editor persistence with fullscreenMode false 21082
  • Edit Post: Make 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. 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. focusable for button focus normalization 21031
  • Fix auto-hiding appender 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. 20780
  • Fix fullscreen mode device preview 21010
  • Fix link control search results spacing. 21003
  • Fix snackbar container block portion of UI while present 21000
  • Make the inner button block not allowed as a reusable block or editable as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 20948
  • URL: Fix getQueryString incorrect handling of hash fragment 20738
  • Update social links block to output a custom class on each individual link 20998
  • Update the inserter’s block preview to use the AutoHeightPreview 20817
  • Latest Posts:
    • Fix link for read more markup 20917
    • Fixes the categories selector crash when categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. does not exist 20960
  • Fix input rules 20964
  • Trim input value in navigation search input field 19832
  • Fix mobile header 20946
  • Fix visually hidden classnames 20649
  • Fix/screen reader text 20607
  • Fix SelectControl example code synax highlight 19803

New APIs

  • Add initial API to register patterns from themes and plugins 21074
  • Convert __experimentalCreateInterpolateElement to a stable API 20699

Experiments

  • Sitesite (versus network, blog) Editor:
    • Add Fullscreen mode 20691
    • Add fullscreen close button 20989
    • Add more menu and fullscreen toggle 21006
    • Style resets for top level page 20886
    • Get current template part correctly for auto drafts 20438
    • Add template preview to the edit site template switcher 20958
    • Add things required to load custom blocks to Site Editor page 20549
    • Avoid page templates overwriting page title 20865
  • Lighter block DOM:
  • Navigation Block:
    • Fix dynamic rendering recursive function name typo 21078
    • Avoid hiding submenu when adding a link 21035
    • Fix toolbar overlap on navigation links 21033
  • PlainText v2 21076
    • Editable Component 18361

Documentation

  • Add ESNext example for unregisterBlockType 20784
  • Docs/SlotFills: Small update for consistency 20767
  • Correct 2nd param of useViewportMatch() usage 20911
  • Include npm run dev guidance in “Getting Started” 21015
  • Document default login credentials and wp-env run command 20678
  • Fixes docblockdocblock (phpdoc, xref, inline docs) for useViewportMatch 20919
  • Lowercase visual editor and code editor to match block editor and classic editor 20968
  • Update README.md 20913
  • Add Custom Block Editor to TOC and Manifest 20749
  • Add tutorial link to Table of Contents for Custom Block Editor 20750

Code Quality

  • Block Editor: Use useResizeObserver in place of direct reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-resize-aware dependency 20889
  • E2E Test Utils: Improve durability of embedding matcher 20811
  • Framework: Migrate/remove temporary compatibility script initialization 19178
  • Framework: Use WHATWG URL in place of legacy url module 19823
  • Nav Block: Remove ‘frontend’ from style comments 21034
  • Project Management Automation: Add TypeScript type-checking 20850
  • Refactor the inserter menu component and split into multiple smaller components 20880
  • Remove 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. from content elements 20976
  • Update Search/RSS block render method 20977

Various

  • Update glossary 20934
  • Improve performance testing 20802
  • Edit Post: Register block patterns as separate 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 20871
  • 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): updated headings to reflect semantic relationship between html 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.) and it’s content. 16444
  • Add Prettier shared config package 20026
  • Add default styles to the TabPanel component 20872
  • Add isFileURL method and use it on all native media upload checks. 20985
  • Add menus endpoints. 20292
  • Block Patterns: Update text-two-columns.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. 20890
  • Block Styles: Remove the block margin in the style selector 19983
  • Block patterns: improve success notice 21005
  • Blocks: Allow the Default Style selector to be hidden. 20620
  • E2E Tests: Mock Embed response for InnerBlocks locking test 20481
  • ESLint Plugin: Relax prefer-const for destructuring assignment 20737
  • Gallery: Update UI of controls 20776
  • Improves RTL style conversion 20503
  • Minor change to switch Help link target to _blank, add rels 20800
  • Mobile: Add accessibility label to Block List Footer 20633
  • Moves category multi select from LatestPosts to QueryControls 20832
  • Paste: replace iframes with url 20983
  • Polish poster image button arrangement. 20754
  • Preview Button: Remove the separator and border, and reduce the size of the icon. 20683
  • RangeControl: Improve disabled rendering and interactions 20723
  • Reduce gap between block library and preview 20777
  • Remove aria-expanded from close button in Publish panel 20993
  • Remove feature flag for mobile page templates 20718
  • Remove inaccurate message from image block 20909
  • Removed the textarea width restriction for the ShortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. block 20624
  • Revert “Framework: Travis: Avoid skipping Puppeteer download” 20828
  • Show errors in the media replace control 19244
  • Styles Panel: Don’t force it to be closed by default. 20617
  • Update 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. Item icon 20763
  • Update page template picker after design review 20883
  • Latest Posts: Testing larger margins 20563
  • Add codeowners for env package 20667
  • Scripts: Update all webpack related dependencies 20916
  • Dependencies webpack plugin: Let the output file be specified when output is combined 20844

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36000 words, ~1000 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.

Version Loading Time KeyPress event (typing)
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/ 7.8 5193ms 23.05ms
Gutenberg 7.7 5134ms 22.79ms
WordPress 5.3 9512ms 25.83ms

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

What’s new in Gutenberg? (11 March)

With WordPress 5.4 around the corner, 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/ 7.7 is another exciting releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. It introduces patterns and the first iteration of a 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. UIUI User interface design which aims to synthetize the learnings from these past couple years of Gutenberg being out in the wild.

New Block UI

After more than a year from its first production release, the community pushed the boundaries of the editor further than we’d have expected. The number of third-party blocks exploded and millions of users are interacting with the editor in different ways. This led to a refresh of the Block UI to apply some of the lessons learned in the meantime.

The redesign includes:

  • A simpler Block Toolbar.
  • Better UI color contrast.
  • Consistent focus styles.
  • Redesigned icons.
  • Grid-based spacing and sizes.
  • And more.

As with any feature in the editor, this is the initial release and there’s still more work planned to bring more consistency in the remaining UI elements: 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. panels, drop-down menus, etc.

Block Patterns

While the editor has a rich set of built-in blocks, it is sometimes challenging for users to compose these blocks together in order to achieve the best designs for their pages. And as we accelerate towards Full Sitesite (versus network, blog) Editing, this becomes an important challenge to solve.

Different existing community-provided solutions have addressed this by providing rich sets of templates/layout that are ready to use and prevent that dreaded “white page syndrome”. There is a need to bring some consistency and coherence to these features. Gutenberg 7.7 introduces Block Patterns: predefined block layouts, ready to insert and tweak to address that problem.

As a first iteration, the Block Patterns UI has been added as a sidebar 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 from where you can pick and insert the patterns. This is considered an MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia and the UI is expected to evolve over the next releases.

As a start, the plugin comes with a small limited set of patterns. The list will ultimately grow and be opened to third-party authors.

7.7 🇵🇭

Features

  • Add the initial version of the Patterns UI as a sidebar plugin (this is not the final interface and work is in progress to integrate with the main block inserter). 20354, 20715.
    • Add an initial set of patterns 20724.

Enhancements

  • Update the Block and editor UI. 19344
  • Improve the Back to WP Adminadmin (and super admin) button in Fullscreen Mode. 20603
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). the editor Fullscreen by default. 20611
  • Remove template locking from the columns block 20465
  • Make the inserter full height. 20526

Bug Fixes

  • 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):
    • Deselect first/last gallery images on blur. 14930
    • Revert top toolbar tab order 20571
  • Add an overlay to the htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block preview to fix block selection in Firefox. 20425
  • Add missing 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) attributes in the SVG icons. 20538
  • Fix 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. syntax error on Safari 12. 20507
  • Use a consistent width for the link suggetions. 20448
  • Use full labels for directional block movers. 20664
  • Columns block: Force 50% column width at mid-range viewport. 20597
  • Media & Text block: Fix frontend styles when “Crop image to fill” is selected 20539
  • Latest Post block:
    • Fix the excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. length. 20313
    • Don’t trim manual exerptts 20432
  • Fix sidebar scroll issue on small viewports. 20491
  • Social Link block:
    • Escape generated class name. 20479
    • Fix label attribute type as string. 20468
    • 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.: Use placeholder for the default label 20475
  • Simulated Queries (Device previews):
    • Check for match in stylesheet host and protocol to prevent Chrome breakage. 20673
    • Fix IE11 editor breakage. 20226
    • Fix incorrectly displayed preview option for private post types. 20604
    • Focus preview button after opening preview. 20570
  • Fix isURL regex to take account file urls. 20435
  • Fix error when deleting empty paragraphs in IE11. 20594
  • Fix hidden inserter toggle behind the popover. 20663
  • Fix block registration shared defaults reuse across blocks. 20565
  • Shim 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. attributes for early block registrations. 20544
  • Fix bouncing Custom color formatter. 20612
  • Fix Gallery block styles in Edge causing editor breakage. 20690

New APIs:

  • wordpress/env: Add support for ZIP URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org sources. 20426

Experiments

  • Lighter Block DOM:
    • allow block types to render their own wrapper 19701
    • Lighter InnerBlocks. 19910
    • Automatically add block class. 20658
  • BlockPreview: Add __experimentalOnReady prop. 17242
  • Edit Site:
    • Update template navigation to use new link control. 20366
    • Update the edit site save modal UI. 20608
  • Fix the block toolbar in the Widgets and Site Edit screens. 20458
  • Fix widgets screen inserter 20680

Documentation

Code Quality

  • Refactoring to existing blocks to use a lighter DOM:
    • List block. 20498
    • Image block. 20576
    • Heading block. 20493
  • Consistent block focus behavior on mount. 20577
  • Cleanup CSSCSS Cascading Style Sheets. variables. 20529
  • Use the EditorSkeleton component in the widgets and Edit Site pages. 20440, 20431.
  • Refactor SlotFill components. 19242
  • Remove useless style override for floats. 20501
  • Block popover: remove data-type. 20531
  • Resizable editor improvements. 20259

Various

  • wordpress/env:
    • Save the database as a volume. 20648
    • Fix accidental quotes in Site Title. 20520
    • Set owner of wp-content to www-data. 20406
  • wordpress/create-block:
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning triggered by the BlockToolbar component. 20546
  • Skip the Type Writer effect component in IE 11. 20485
  • Update browserslist to fix out-of-date caniuse-lite messages 20709
  • Add storybook stories:
  • E2E Tests:
    • Add test for the Image block. 20622
    • More stable embed test. 20668
    • Fix intermittent RichText e2e test failure. 20457
  • Travis: Avoid skipping Puppeteer download. 20547
  • Plugin: Bump minimum WordPress version to 5.3 20628
  • @wordrpess/priority-queue: Fix for environments that don’t have window defined. 20486
  • Update jest configuration to only ignore tests from /wordpress/ as a subdirectory 20420

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 7.7.0 7.7s 37.86ms
Gutenberg 7.6.0 7.0s 34.97ms
WordPress 5.3 7.2s 66ms

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

What’s new in Gutenberg? (26 February)

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/ 7.6 brings considerable progress on the full-sitesite (versus network, blog) editing (FSE) front, including four new FSE blocks:

  • Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.
  • Post Tags
  • Comments Count
  • Comments Form

In addition, this releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. includes many enhancements and fixes to existing blocks and features.

Any help testing FSE work is much appreciated. So, if possible, please enable FSE in your testing environments and share your feedback.

Gutenberg 7.6 also brings a rotating list of tips that appear in 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. Inserter to provide useful information to users:

The release also comes with developer-focused enhancements to wp-env and wp-scripts, thus improving the experience of building with WordPress.

Last but not least, this release cycle has prioritized 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. fixing, and as a result this release brings numerous fixes that were also included in Betas 2 and 3 of WordPress 5.4.

Read on for the full change log.

7.6 🇱🇹

Features

  • Add a rotating list of tips to the inserter help panel 20163

Experimental

  • New blocks:
    • Post Featured Image. 19875
    • Comments Count block. 19953
    • Comments Form block. 19954
    • Post Tags block. 19580
  • Add new features to the Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. block. 19715
  • Allow changing Site Title block heading level. 20361
  • Render the post comments form properly 20279
  • Add new features to the Post Date block. 19857
  • Add multiple template loading 19141
  • Show error when resolved block template is empty 20239

Enhancements

  • Improve find-ability for social/video embeds 20224

New APIs

  • Ensure packages-update wp-scripts command works with missing dependencies 20408
  • Add new option in dependencies webpack pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to combine assets files into one file 20330
  • Environment:
    • Add custom port numbers to .wp-env.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. 20158
    • Add support for local override files. 20341
    • Add debug mode. 20348

Bug Fixes

  • Overflowing LinkControl block editor component. 20154
  • Broken gallery to image transform and inconsistent types used in the gallery block 20084
  • Missing label on heading toolbar. 20248
  • 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. jumpiness. 20355
  • Fix wrong imports in PluginBlockSettingsMenuItem 20356
  • Color formatter appears when color choosing is not possible 20222
  • Crash when updating a post with the latest post block 20289
  • Inconsistency on Import from JSON button look 20416
  • Inline image width pop-up ‘wanders’ down page 20232
  • Styling problem on vertically aligned blocks 20368
  • Remove unnecessary aria-label from link formatter 18742
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). navigation button expand to fit longer nav link text 20230
  • Flow for gallery creation and editing 20287
  • Fix background color for dark themes on the spacer block 20296
  • Show metaboxes peeking in even on tiny screens. 20262
  • Add an edit state to media frames to fix an issue when opening a new tab. 17642

Documentation

Various

  • Create block: Add support for format:js to ESNext template 20335
  • Add check for minimum system requirements on create block 20398
  • Conditionally apply Editor Skeleton htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element styles 20245
  • Environment:
    • Check for legacy installs and provide the option to delete them. 20340
    • Fix testsPath on local sources 20353
    • Use user with UID=33 to run WP CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. commands 20403
    • Fix issue where docker & wp had different URLs 20228
    • No longer show error message twice 20157
    • Support wp-config.php overrides. 20352
    • Support overwriting generated file directory with an environment variable 20253

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 7.6.0 7.7s 48.59ms
Gutenberg 7.5.0 8.5s 55.45ms
WordPress 5.3 7.9s 77.23ms

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

What’s new in Gutenberg? (27 November)

More than 51 contributors helped shape the 7.0.0 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/ releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. It’s one of the biggest number of contributors we’ve ever had.

The release includes a big number of fixes and enhancements to the 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. and marks it as a stable feature.

Navigation block in action

In terms of APIs, developers will be happy to know that this PR introduced some new APIs like allowing the internationalization of strings containing safe HTML, a new Card component in wordpress/components and a few other enhancements we encourage you to try and provide feedback.

7.0

Features

Enhancements

Bug Fixes

New APIs

Experiments

Documentation

Various

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 7.0.0 5.1s 67.7ms
Gutenberg 6.9.0 6.6s 53.5ms
WordPress 5.3 6.3s 61.44ms

👏 Kudos to all the contributors. Thank you.

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

What’s new in Gutenberg? (13 November)

In this newest releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/, 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. content areas and the navigation block continue to be iterated upon. An experimental block pattern API has been added, and themes can now define custom gradient presets!

The navigation block, demonstrating newly improved horizontal block movers.
The navigation block, demonstrating newly improved horizontal block movers.

The block editor provides default gradient presets. Now, a theme can overwrite them and provide its own:

add_theme_support(
    '__experimental-editor-gradient-presets',
    array(
        array(
            'name'     => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
            'slug'     => 'vivid-cyan-blue-to-vivid-purple'
        ),
    )
);

Note that this feature is currently experimental and subject to change.

6.9 🇦🇷

Features

Bugs

Enhancements

New APIs

  • Add theme support 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 define custom gradients presets.
  • Mark the AsyncMode data module API as stable.
  • Mark the mediaUpload @wordpress/block-editor setting as stable.
  • Add a wpenv.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. config file support for @wordpress/env.

Various

Experimental

Documentation

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 6.9.0 11s 77.36ms
Gutenberg 6.8.0 11s 74.78ms
WordPress 5.3 10.6s 80.85ms

👏 Kudos to all the contributors. Thank you.

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

What’s new in Gutenberg? (30 October)

Work on 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. content areas and the 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. block is accelerating in this releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software..

In the meantime, this release continues the work on Gradients support and expand it to the Cover block while relying on classnames instead of inline styles

Screenshot 2019-10-17 at 14 59 27

Block Nested selection and interactions is still being improved with a new Block Breadcrumb Bar allowing to quickly navigate the block hierarchy of . the current selection.

Capture d’écran 2019-10-16 à 11 34 50 AM

6.8

Features

Enhancements

Bugs

  • Clear local autosaves after successful saves.
  • Fix the columns block width overflow issue when using more than two columns.
  • Fix the Link Rel input not showing the saved value of the link rel attribute.
  • Fix 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/. errors triggered when using links without href in HTML mode.
  • Move the default list styles to the theme editor styles.
  • Fix Invalid import statement for deprecated call in the Modal component.
  • Fix a small visual glitch in the Publish button.
  • Prevent blank page when using the Media Modal Edit Image “back” button.
  • Allow the shortcode transform to apply to all the provided shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. aliases. 
  • Fix JavaScript error triggered when using arrows on an empty URLInput.
  • Fix extra margins added to Gallery blocks by list editor styles.
  • Fix custom button background color not reflected on reload.
  • Preserve List block attributes when splitting into multiple lists. 
  • Fix checkbox styles when used in metaboxes.
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). the FontSizePicker style independent from WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. styles.
  • Fix overlapping controls in the Inline Image formatting toolbar.
  • Fix strikethrough formatting when copy/pasting from Google Docs in Safari.
  • Allow media upload post processing for all 5xx 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/. responses.

Experiments

New APIs

Various

Add knobs to the ColorIndicator Story.

  • Several other enhancements to existing stories.
  • Linting fixes for Storybook config.
  • Fix Lint warnings triggered by JSDoc definitions.
  • Reorganize e2e tests specs into three folders: editor, experimental and 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.
  • Cleanup skipped e2e tests.
  • Add a link to Storybook from 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/ playground.
  • Optimize the wordpress/compose package to support tree-shaking.
  • Code Quality:
  • Fix several issues related to Node 12 becoming LTS.
  • Add the Block Inspector to the Gutenberg playground.

Documentation

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 6.8.0 5.68s 47.28ms
Gutenberg 6.7.0 5.83s 47.92ms
WordPress 5.2 6.1s 63.22ms

👏 Kudos to all the contributors. Thank you.

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