prep build 1/27

bin/packages/build-worker.js

@@ -111,7 +111,8 @@ const BUILD_TASK_BY_EXTENSION = {
 					// Editor styles should be excluded from the default CSS vars output.
 					.concat(
 						file.includes( 'common.scss' ) ||
-							! file.includes( 'block-library' )
+							( ! file.includes( 'block-library' ) &&
+								! file.includes( 'editor-styles.scss' ) )
 							? [ 'default-custom-properties' ]
 							: []
 					)

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

@@ -56,9 +56,9 @@ Blocks are grouped into categories to help users browse and discover them.
 
 The core provided categories are:
 
--   common
--   formatting
--   layout
+-   text
+-   media
+-   design
 -   widgets
 -   embed
 
@@ -259,6 +259,7 @@ An object describing a variation defined for the block type can contain the foll
 -   `name` (type `string`) – The unique and machine-readable name.
 -   `title` (type `string`) – A human-readable variation title.
 -   `description` (optional, type `string`) – A detailed variation description.
+-   `category` (optional, type `string`) - A category classification, used in search interfaces to arrange block types by category.
 -   `icon` (optional, type `string` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type.
 -   `isDefault` (optional, type `boolean`) – Indicates whether the current variation is the default one. Defaults to `false`.
 -   `attributes` (optional, type `Object`) – Values that override block attributes.

docs/designers-developers/developers/filters/block-filters.md

@@ -319,6 +319,30 @@ wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-nam
 ```
 {% end %}
 
+#### `media.crossOrigin`
+
+Used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e  `<img>`, `<audio>` , `<img>` , `<link>` , `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information the `crossOrigin` attribute, its values and how it applies to each element.
+
+One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`.
+
+_Example:_
+
+```js
+addFilter(
+	'media.crossOrigin',
+	'my-plugin/with-cors-media',
+	// The callback accepts a second `mediaSrc` argument which references
+	// the url to actual foreign media, useful if you want to decide
+	// the value of crossOrigin based upon it.
+	( crossOrigin, mediaSrc ) => {
+		if ( mediaSrc.startsWith( 'https://example.com' ) ) {
+			return 'use-credentials';
+		}
+		return crossOrigin;
+	}
+);
+```
+
 ## Removing Blocks
 
 ### Using a deny list

docs/manifest.json

@@ -1277,12 +1277,24 @@
 		"markdown_source": "../packages/components/src/tree-select/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Truncate",
+		"slug": "truncate",
+		"markdown_source": "../packages/components/src/truncate/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "UnitControl",
 		"slug": "unit-control",
 		"markdown_source": "../packages/components/src/unit-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "View",
+		"slug": "view",
+		"markdown_source": "../packages/components/src/view/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "VisuallyHidden",
 		"slug": "visually-hidden",

packages/block-editor/README.md

@@ -394,7 +394,7 @@ Undocumented declaration.
 
 _Related_
 
--   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls-advanced/README.md>
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-advanced-controls/README.md>
 
 <a name="InspectorControls" href="#InspectorControls">#</a> **InspectorControls**
 

packages/block-editor/src/components/block-list/insertion-point.js

@@ -23,7 +23,11 @@ import { isRTL } from '@wordpress/i18n';
 import Inserter from '../inserter';
 import { getBlockDOMNode } from '../../utils/dom';
 
-function InsertionPointInserter( { clientId, setIsInserterForced } ) {
+function InsertionPointInserter( {
+	clientId,
+	rootClientId,
+	setIsInserterForced,
+} ) {
 	return (
 		<div
 			className={ classnames(
@@ -33,6 +37,7 @@ function InsertionPointInserter( { clientId, setIsInserterForced } ) {
 			<Inserter
 				position="bottom center"
 				clientId={ clientId }
+				rootClientId={ rootClientId }
 				__experimentalIsQuick
 				onToggle={ setIsInserterForced }
 				onSelectOrClose={ () => setIsInserterForced( false ) }
@@ -43,7 +48,7 @@ function InsertionPointInserter( { clientId, setIsInserterForced } ) {
 
 function InsertionPointPopover( {
 	clientId,
-	rootClientId,
+	selectedRootClientId,
 	isInserterShown,
 	isInserterForced,
 	setIsInserterForced,
@@ -53,7 +58,14 @@ function InsertionPointPopover( {
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 	const ref = useRef();
 
-	const { previousElement, nextElement, orientation, isHidden } = useSelect(
+	const {
+		previousElement,
+		nextElement,
+		orientation,
+		isHidden,
+		nextClientId,
+		rootClientId,
+	} = useSelect(
 		( select ) => {
 			const {
 				getBlockOrder,
@@ -67,15 +79,18 @@ function InsertionPointPopover( {
 			const { ownerDocument } = containerRef.current;
 			const targetRootClientId = clientId
 				? getBlockRootClientId( clientId )
-				: rootClientId;
+				: selectedRootClientId;
 			const blockOrder = getBlockOrder( targetRootClientId );
-			if ( blockOrder.length < 2 ) {
+			if ( ! blockOrder.length ) {
 				return {};
 			}
-			const next = clientId
+			const previous = clientId
 				? clientId
 				: blockOrder[ blockOrder.length - 1 ];
-			const previous = blockOrder[ blockOrder.indexOf( next ) - 1 ];
+			const isLast = previous === blockOrder[ blockOrder.length - 1 ];
+			const next = isLast
+				? null
+				: blockOrder[ blockOrder.indexOf( previous ) + 1 ];
 			const { hasReducedUI } = getSettings();
 			const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
 			const selectedBlockClientId = getSelectedBlockClientId();
@@ -86,53 +101,77 @@ function InsertionPointPopover( {
 			return {
 				previousElement: getBlockDOMNode( previous, ownerDocument ),
 				nextElement: getBlockDOMNode( next, ownerDocument ),
+				nextClientId: next,
 				isHidden:
 					hasReducedUI ||
 					( hasMultiSelection()
-						? multiSelectedBlockClientIds.includes( clientId )
-						: blockOrientation === 'vertical' &&
-						  clientId === selectedBlockClientId ),
+						? next && multiSelectedBlockClientIds.includes( next )
+						: next &&
+						  blockOrientation === 'vertical' &&
+						  next === selectedBlockClientId ),
 				orientation: blockOrientation,
+				rootClientId: targetRootClientId,
 			};
 		},
-		[ clientId, rootClientId ]
+		[ clientId, selectedRootClientId ]
 	);
 
 	const style = useMemo( () => {
-		if ( ! previousElement || ! nextElement ) {
+		if ( ! previousElement ) {
 			return {};
 		}
 		const previousRect = previousElement.getBoundingClientRect();
-		const nextRect = nextElement.getBoundingClientRect();
-
-		return orientation === 'vertical'
-			? {
-					width: previousElement.offsetWidth,
-					height: nextRect.top - previousRect.bottom,
-			  }
-			: {
-					width: isRTL()
-						? previousRect.left - nextRect.right
-						: nextRect.left - previousRect.right,
-					height: previousElement.offsetHeight,
-			  };
+		const nextRect = nextElement
+			? nextElement.getBoundingClientRect()
+			: null;
+
+		if ( orientation === 'vertical' ) {
+			return {
+				width: previousElement.offsetWidth,
+				height: nextRect ? nextRect.top - previousRect.bottom : 0,
+			};
+		}
+
+		let width = 0;
+		if ( nextElement ) {
+			width = isRTL()
+				? previousRect.left - nextRect.right
+				: nextRect.left - previousRect.right;
+		}
+
+		return {
+			width,
+			height: previousElement.offsetHeight,
+		};
 	}, [ previousElement, nextElement ] );
 
 	const getAnchorRect = useCallback( () => {
 		const previousRect = previousElement.getBoundingClientRect();
-		const nextRect = nextElement.getBoundingClientRect();
+		const nextRect = nextElement
+			? nextElement.getBoundingClientRect()
+			: null;
 		if ( orientation === 'vertical' ) {
 			return {
 				top: previousRect.bottom,
 				left: previousRect.left,
 				right: previousRect.right,
-				bottom: nextRect.top,
+				bottom: nextRect ? nextRect.top : previousRect.bottom,
+			};
+		}
+
+		if ( isRTL() ) {
+			return {
+				top: previousRect.top,
+				left: nextRect ? nextRect.right : previousRect.left,
+				right: previousRect.left,
+				bottom: previousRect.bottom,
 			};
 		}
+
 		return {
 			top: previousRect.top,
-			left: isRTL() ? nextRect.right : previousRect.right,
-			right: isRTL() ? previousRect.left : nextRect.left,
+			left: previousRect.right,
+			right: nextRect ? nextRect.left : previousRect.right,
 			bottom: previousRect.bottom,
 		};
 	}, [ previousElement, nextElement ] );
@@ -147,8 +186,8 @@ function InsertionPointPopover( {
 	);
 
 	function onClick( event ) {
-		if ( event.target === ref.current ) {
-			selectBlock( clientId, -1 );
+		if ( event.target === ref.current && nextClientId ) {
+			selectBlock( nextClientId, -1 );
 		}
 	}
 
@@ -192,7 +231,8 @@ function InsertionPointPopover( {
 					) }
 				{ ! isHidden && ( isInserterShown || isInserterForced ) && (
 					<InsertionPointInserter
-						clientId={ clientId }
+						rootClientId={ rootClientId }
+						clientId={ nextClientId }
 						setIsInserterForced={ setIsInserterForced }
 					/>
 				) }
@@ -228,7 +268,7 @@ export default function useInsertionPoint( ref ) {
 			getBlockListSettings: _getBlockListSettings,
 			isMultiSelecting: _isMultiSelecting(),
 			isInserterVisible: isBlockInsertionPointVisible(),
-			selectedClientId: order[ insertionPoint.index ],
+			selectedClientId: order[ insertionPoint.index - 1 ],
 			selectedRootClientId: insertionPoint.rootClientId,
 		};
 	}, [] );
@@ -261,16 +301,20 @@ export default function useInsertionPoint( ref ) {
 			const rect = event.target.getBoundingClientRect();
 			const offsetTop = event.clientY - rect.top;
 			const offsetLeft = event.clientX - rect.left;
-			let element = Array.from( event.target.children ).find(
-				( blockEl ) => {
-					return (
-						( orientation === 'vertical' &&
-							blockEl.offsetTop > offsetTop ) ||
-						( orientation === 'horizontal' &&
-							blockEl.offsetLeft > offsetLeft )
-					);
-				}
-			);
+
+			const children = Array.from( event.target.children );
+			const nextElement = children.find( ( blockEl ) => {
+				return (
+					( orientation === 'vertical' &&
+						blockEl.offsetTop > offsetTop ) ||
+					( orientation === 'horizontal' &&
+						blockEl.offsetLeft > offsetLeft )
+				);
+			} );
+
+			let element = nextElement
+				? children[ children.indexOf( nextElement ) - 1 ]
+				: children[ children.length - 1 ];
 
 			if ( ! element ) {
 				return;
@@ -337,7 +381,7 @@ export default function useInsertionPoint( ref ) {
 				clientId={
 					isInserterVisible ? selectedClientId : inserterClientId
 				}
-				rootClientId={ selectedRootClientId }
+				selectedRootClientId={ selectedRootClientId }
 				isInserterShown={ isInserterShown }
 				isInserterForced={ isInserterForced }
 				setIsInserterForced={ ( value ) => {

packages/block-editor/src/components/block-mover/index.native.js

@@ -117,7 +117,7 @@ export const BlockMover = ( {
 				ref={ pickerRef }
 				options={ blockPageMoverOptions }
 				onChange={ onPickerSelect }
-				title={ __( 'Move block position' ) }
+				title={ __( 'Change block position' ) }
 				leftAlign={ true }
 				hideCancelButton={ Platform.OS !== 'ios' }
 			/>

packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -45,7 +45,7 @@ exports[`Block Mover Picker should match snapshot 1`] = `
     leftAlign={true}
     onChange={[Function]}
     options={Array []}
-    title="Move block position"
+    title="Change block position"
   />
 </Fragment>
 `;

packages/block-editor/src/components/block-navigation/block-select-button.js

@@ -6,10 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalGetBlockLabel as getBlockLabel,
-	getBlockType,
-} from '@wordpress/blocks';
 import { Button, VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
@@ -22,11 +18,12 @@ import BlockIcon from '../block-icon';
 import Indentation from './indentation';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
+import BlockTitle from '../block-title';
 
 function BlockNavigationBlockSelectButton(
 	{
 		className,
-		block: { clientId, name, attributes },
+		block: { clientId },
 		isSelected,
 		onClick,
 		position,
@@ -43,12 +40,6 @@ function BlockNavigationBlockSelectButton(
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId( BlockNavigationBlockSelectButton );
 	const descriptionId = `block-navigation-block-select-button__${ instanceId }`;
-	const blockType = getBlockType( name );
-	const blockLabel = getBlockLabel( blockType, attributes );
-	// If label is defined we prioritize it over possible possible
-	// block variation match title.
-	const blockDisplayName =
-		blockLabel !== blockType.title ? blockLabel : blockInformation?.title;
 	const blockPositionDescription = getBlockPositionDescription(
 		position,
 		siblingBlockCount,
@@ -73,7 +64,7 @@ function BlockNavigationBlockSelectButton(
 			>
 				<Indentation level={ level } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				{ blockDisplayName }
+				<BlockTitle clientId={ clientId } />
 				{ isSelected && (
 					<VisuallyHidden>
 						{ __( '(selected block)' ) }