build 12/25

changelog.txt

@@ -1,5 +1,13 @@
 == Changelog ==
 
+= 9.6.2 =
+
+### Bug Fixes
+
+ - Fix toolbar controls in the widgets screen.
+ - Fix the slash inserter in the widgets screen.
+
+
 = 9.6.1 =
 
 ### Bugfixes

docs/designers-developers/developers/block-api/block-templates.md

@@ -1,6 +1,6 @@
 # Templates
 
-A block template is defined as a list of block items. Such blocks can have predefined attributes, placeholder content, and be static or dynamic. Block templates allow to specify a default initial state for an editor session.
+A block template is defined as a list of block items. Such blocks can have predefined attributes, placeholder content, and be static or dynamic. Block templates allow specifying a default initial state for an editor session.
 
 The scope of templates include:
 
@@ -110,6 +110,8 @@ add_action( 'init', 'myplugin_register_template' );
 - `all` — prevents all operations. It is not possible to insert new blocks, move existing blocks, or delete blocks.
 - `insert` — prevents inserting or removing blocks, but allows moving existing blocks.
 
+Lock settings can be inherited by InnerBlocks. If `templateLock` is not set in an InnerBlocks area, the locking of the parent InnerBlocks area is used. If the block is a top level block, the locking configuration of the current post type is used.
+
 ## Nested Templates
 
 Container blocks like the columns blocks also support templates. This is achieved by assigning a nested template to the block.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "9.6.1",
+	"version": "9.6.2",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

packages/block-editor/src/components/block-list/index.js

@@ -121,6 +121,7 @@ function Items( {
 						value={ ! isBlockInSelection }
 					>
 						<BlockListBlock
+							rootClientId={ rootClientId }
 							clientId={ clientId }
 							// This prop is explicitely computed and passed down
 							// to avoid being impacted by the async mode

packages/block-editor/src/components/block-selection-clearer/index.js

@@ -19,25 +19,20 @@ export function useBlockSelectionClearer( ref ) {
 			return;
 		}
 
-		function onMouseDown( event ) {
-			// Only handle clicks on the canvas, not the content.
-			if ( event.target.closest( '.wp-block' ) ) {
-				return;
-			}
-
+		function onFocus() {
 			clearSelectedBlock();
 		}
 
-		ref.current.addEventListener( 'mousedown', onMouseDown );
+		ref.current.addEventListener( 'focus', onFocus );
 
 		return () => {
-			ref.current.removeEventListener( 'mousedown', onMouseDown );
+			ref.current.removeEventListener( 'focus', onFocus );
 		};
 	}, [ hasSelection, clearSelectedBlock ] );
 }
 
 export default function BlockSelectionClearer( props ) {
 	const ref = useRef();
 	useBlockSelectionClearer( ref );
-	return <div ref={ ref } { ...props } />;
+	return <div tabIndex={ -1 } ref={ ref } { ...props } />;
 }

packages/block-editor/src/components/contrast-checker/README.md

@@ -0,0 +1,73 @@
+# ContrastChecker
+
+ContrastChecker component determines if contrast for text styles is sufficient (WCAG 2.0 AA) when used with a given background color. ContrastCheker also accounts for background color transparency (alpha) as well as font sizes.
+
+A notice will be rendered if the color combination of text and background colors are low.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+
+## Developer guidelines
+
+### Usage
+
+Checks the contrast of a `13px` dark gray font against a light gray background.
+
+```jsx
+import { ContrastChecker } from '@wordpress/block-editor';
+
+const Example = () => {
+	return (
+		<ContrastChecker
+			fontSize={ 13 }
+			textColor="#111"
+			backgroundColor="#eee"
+		/>
+	);
+};
+```
+
+### Props
+
+#### backgroundColor
+
+The background color to check the contrast of text against.
+
+-   Type: `String`
+-   Required: No
+
+#### fallbackBackgroundColor
+
+A fallback background color value, in case `backgroundColor` is not available.
+
+-   Type: `String`
+-   Required: No
+
+#### fallbackTextColor
+
+A fallback text color value, in case `textColor` is not available.
+
+-   Type: `String`
+-   Required: No
+
+#### fontSize
+
+The font-size (as a `px` value) of the text to check the contrast against.
+
+-   Type: `Number`
+-   Required: No
+
+#### isLargeText
+
+Whether the text is large (approximately `24px` or higher).
+
+-   Type: `Boolean`
+-   Required: No
+
+#### textColor
+
+The text color to check the contrast of the background against.
+
+-   Type: `String`
+-   Required: No

packages/block-editor/src/components/inserter/block-patterns-tab.js

@@ -103,7 +103,6 @@ function BlockPatternsCategory( {
 		<>
 			{ !! currentCategoryPatterns.length && (
 				<PatternInserterPanel
-					key={ patternCategory.name }
 					title={ patternCategory.title }
 					selectedCategory={ patternCategory }
 					patternCategories={ populatedCategories }

packages/block-editor/src/components/link-control/style.scss

@@ -171,6 +171,7 @@ $block-editor-link-control-number-of-actions: 1;
 		display: block;
 		margin-bottom: 0.2em;
 		font-weight: 500;
+		position: relative;
 
 		mark {
 			font-weight: 700;

packages/components/src/base-control/README.md

@@ -82,7 +82,7 @@ import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
 	<BaseControl
-		help="Pressing the Select an author buttom will open a modal that allows an advanced mechanism for author selection"
+		help="Pressing the Select an author button will open a modal that allows an advanced mechanism for author selection"
 	>
 		<BaseControl.VisualLabel>
 			Author

packages/components/src/focal-point-picker/README.md

@@ -65,7 +65,7 @@ Autoplays HTML5 video. This only applies to video sources (`url`).
 -   Type: `Object`
 -   Required: Yes
 
-An object describing the height and width of the image. Requires two paramaters: `height`, `width`.
+An object describing the height and width of the image. Requires two parameters: `height`, `width`.
 
 ### `value`
 

packages/components/src/higher-order/with-notices/README.md

@@ -1,5 +1,38 @@
 # withNotices
 
+`withNotices` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) used typically in adding the ability to post notice messages within the original component.
+
+Wrapping the original component with `withNotices` encapsulates the component with the additional props `noticeOperations` and `noticeUI`.
+
+**noticeOperations** 
+Contains a number of useful functions to add notices to your site.
+
+<a  name="createNotice"  href="#createNotice">#</a> **createNotice**
+Function passed down as a prop that adds a new notice.
+
+_Parameters_
+-  _notice_  `object`: Notice to add.
+
+<a  name="createErrorNotice"  href="#createErrorNotice">#</a> **createErrorNotice**
+Function passed as a prop that adds a new error notice.
+
+_Parameters_
+-  _msg_  `string`: Error message of the notice.
+
+
+<a  name="removeAllNotices"  href="#removeAllNotices">#</a> **removeAllNotices**
+Function that removes all notices.
+
+<a  name="removeNotice"  href="#removeNotice">#</a> **removeNotice**
+Function that removes notice by ID.
+
+_Parameters_
+-  _id_  `string`: ID of notice to remove.
+
+<a  name="noticeUi"  href="#noticeUi">#</a>**noticeUi**
+The rendered `NoticeList`.
+
+
 ## Usage
 
 ```jsx

packages/components/src/popover/README.md

@@ -138,7 +138,7 @@ A callback function which is used to override the anchor value computation algor
 
 If you need the `DOMRect` object i.e., the position of popover to be calculated on every time, the popover re-renders, then use `getAnchorRect`.
 
-`getAnchorRect` callback function receives a reference to the popover anchor element as a function parameter and it should return a `DOMRect` objcet.
+`getAnchorRect` callback function receives a reference to the popover anchor element as a function parameter and it should return a `DOMRect` object.
 
 - Type: `Function`
 - Required: No

packages/components/src/range-control/README.md

@@ -213,7 +213,7 @@ const MyRangeControl() {
 
 #### onChange
 
-A function that receives the new value. The value will be less than `max` and more than `min` unless a reset (enabled by `allowReset`) has occured. In which case the value will be either that of `resetFallbackValue` if it has been specified or otherwise `undefined`.
+A function that receives the new value. The value will be less than `max` and more than `min` unless a reset (enabled by `allowReset`) has occurred. In which case the value will be either that of `resetFallbackValue` if it has been specified or otherwise `undefined`.
 
 -   Type: `function`
 -   Required: Yes

packages/components/src/text-highlight/README.md

@@ -1,12 +1,12 @@
 # TextHighlight
 
-Highlights occurances of a given string within another string of text. Wraps each match with a [`<mark>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) which provides browser default styling.
+Highlights occurrences of a given string within another string of text. Wraps each match with a [`<mark>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) which provides browser default styling.
 
 ## Usage
 
-Pass in the `text` and the `highlight` string to be matched against. 
+Pass in the `text` and the `highlight` string to be matched against.
 
-In the example below, the string `Gutenberg` would be highlighted twice. 
+In the example below, the string `Gutenberg` would be highlighted twice.
 
 ```jsx
 import { TextHighlight } from '@wordpress/components';
@@ -21,11 +21,11 @@ const MyTextHighlight = () => (
 
 ## Props
 
-The component accepts the following props. 
+The component accepts the following props.
 
 ### text
 
-The string of text to be tested for occurances of then given `highlight`.
+The string of text to be tested for occurrences of then given `highlight`.
 
 - Type: `String`
 - Required: Yes

packages/components/src/toolbar-button/README.md

@@ -27,7 +27,7 @@ function MyToolbar() {
 
 ### Inside BlockControls
 
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optinally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
 
 ```jsx
 import { BlockControls } from '@wordpress/block-editor';

packages/components/src/toolbar-item/README.md

@@ -49,7 +49,7 @@ function MyToolbar() {
 
 ### Inside BlockControls
 
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optinally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
 
 ```jsx
 import { BlockControls } from '@wordpress/block-editor';

packages/e2e-tests/specs/editor/various/change-detection.test.js

@@ -138,9 +138,11 @@ describe( 'Change detection', () => {
 		await page.type( '.editor-post-title__input', '!' );
 
 		await Promise.all( [
-			page.waitForSelector( '.editor-post-publish-button.is-busy' ),
 			page.waitForSelector(
-				'.editor-post-publish-button:not( .is-busy )'
+				'.editor-post-publish-button[aria-disabled="true"]'
+			),
+			page.waitForSelector(
+				'.editor-post-publish-button[aria-disabled="false"]'
 			),
 			page.evaluate( () =>
 				window.wp.data.dispatch( 'core/editor' ).autosave()

packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -108,10 +108,10 @@ describe( 'Order of block keyboard navigation', () => {
 			await page.keyboard.type( paragraphBlock );
 		}
 
-		// Clear the selected block.
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
+		// Clear the selected block and put focus in front of the block list.
+		await page.evaluate( () => {
+			document.querySelector( '.editor-styles-wrapper' ).focus();
+		} );
 
 		await page.keyboard.press( 'Tab' );
 		await expect(
@@ -143,13 +143,9 @@ describe( 'Order of block keyboard navigation', () => {
 			await page.keyboard.type( paragraphBlock );
 		}
 
-		// Clear the selected block.
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		// Put focus behind the block list.
+		// Clear the selected block and put focus behind the block list.
 		await page.evaluate( () => {
+			document.querySelector( '.editor-styles-wrapper' ).focus();
 			document
 				.querySelector( '.interface-interface-skeleton__sidebar' )
 				.focus();

packages/edit-post/src/components/visual-editor/index.js

@@ -65,6 +65,7 @@ export default function VisualEditor() {
 			<div
 				ref={ ref }
 				className="editor-styles-wrapper"
+				tabIndex="-1"
 				style={ resizedCanvasStyles || desktopCanvasStyles }
 			>
 				<WritingFlow>

packages/edit-site/src/components/block-editor/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	BlockEditorProvider,
@@ -12,7 +12,6 @@ import {
 	WritingFlow,
 	ObserveTyping,
 	BlockList,
-	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 } from '@wordpress/block-editor';
 
 /**
@@ -40,11 +39,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		'postType',
 		templateType
 	);
-	const { setPage } = useDispatch( 'core/edit-site' );
-	const ref = useRef();
-
-	useBlockSelectionClearer( ref );
 
+	const { setPage } = useDispatch( 'core/edit-site' );
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -70,10 +66,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<div
-				ref={ ref }
-				className="editor-styles-wrapper edit-site-block-editor__editor-styles-wrapper"
-			>
+			<div className="editor-styles-wrapper edit-site-block-editor__editor-styles-wrapper">
 				<WritingFlow>
 					<ObserveTyping>
 						<BlockList className="edit-site-block-editor__block-list" />