@wordpress/block-editor 12.4.0 → 12.6.0

package/src/components/block-controls/README.md

@@ -0,0 +1,89 @@
+# BlockControls
+
+When the user selects a particular block, a toolbar positioned above the selected block displays a set of control buttons. Certain block-level controls are automatically included in the toolbar under specific circumstances. For example, there is a control for converting the block into a different type or when the focused element is a RichText component.
+
+With `BlockControls`, you can customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, the controls nested inside it will be shown in the selected block's toolbar.
+
+![Screenshot of the block controls of a Paragraph block inside the block editor](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/toolbar-text.png)
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function MyBlockEdit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps( {
+		className: 'my-block__custom-class',
+	} );
+	const { contentPosition } = attributes;
+
+	return (
+		<div { ...blockProps }>
+			{
+				<BlockControls>
+					<BlockAlignmentMatrixControl
+						label={ __( 'Change content position' ) }
+						value={ contentPosition }
+						onChange={ ( nextPosition ) =>
+							setAttributes( {
+								contentPosition: nextPosition,
+							} )
+						}
+					/>
+				</BlockControls>
+			}
+		</div>
+	);
+}
+
+/// ...
+
+<MyBlockEdit />;
+```
+
+See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more information and block controls examples.
+
+Furthermore, the READMEs of various components inside the block editor package and the components package include examples that also utilize `BlockControls` and can be a good reference.
+
+### Props
+
+The component accepts the following props:
+
+### `group`
+
+Group of the block controls. Allows you to create and render multiple groups of block controls.
+
+- Type: `string`
+- Default: `default`
+- Required: No
+
+### `controls`
+
+Allows overriding the default `controls` if the `default` group is used. 
+
+See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more details and examples with block controls.
+
+- Type: `array`
+
+### `children`
+
+Additional control components to be rendered.
+
+- Type: `Element`
+- Required: No.
+
+
+### `__experimentalShareWithChildBlocks`
+
+Whether the additional block controls should be added to the block toolbars of child blocks.
+
+- Type: `boolean`
+- Default: `false`

package/src/components/block-draggable/index.js

@@ -22,16 +22,25 @@ const BlockDraggable = ( {
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
-			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
-				select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
+			const {
+				canMoveBlocks,
+				getBlockRootClientId,
+				getBlockName,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
+			const variation = getActiveBlockVariation(
+				blockName,
+				getBlockAttributes( clientIds[ 0 ] )
+			);
 
 			return {
 				srcRootClientId: rootClientId,
 				isDraggable: canMoveBlocks( clientIds, rootClientId ),
-				icon: getBlockType( blockName )?.icon,
+				icon: variation?.icon || getBlockType( blockName )?.icon,
 			};
 		},
 		[ clientIds ]

package/src/components/block-draggable/index.native.js

@@ -109,8 +109,12 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		draggingScrollHandler( event );
 	};
 
-	const { onBlockDragOver, onBlockDragEnd, onBlockDrop, targetBlockIndex } =
-		useBlockDropZone();
+	const {
+		onBlockDragOverWorklet,
+		onBlockDragEnd,
+		onBlockDrop,
+		targetBlockIndex,
+	} = useBlockDropZone();
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
@@ -184,7 +188,7 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		chip.y.value = dragPosition.y;
 		currentYPosition.value = dragPosition.y;
 
-		runOnJS( onBlockDragOver )( { x, y: y + scroll.offsetY.value } );
+		onBlockDragOverWorklet( { x, y: y + scroll.offsetY.value } );
 
 		// Update scrolling velocity
 		scrollOnDragOver( dragPosition.y );

package/src/components/block-draggable/style.scss

@@ -15,6 +15,7 @@
 	height: $block-toolbar-height;
 	padding: 0 ( $grid-unit-15 + $border-width );
 	user-select: none;
+	width: max-content;
 
 	svg {
 		fill: currentColor;

package/src/components/block-draggable/test/index.native.js

@@ -133,16 +133,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'does not enable drag mode when selected and editing text', async () =>
@@ -243,16 +233,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						imageBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -301,16 +281,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						galleryBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'enables drag mode when nested block is selected', async () =>
@@ -336,20 +306,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// After dropping the block, the gallery item gets automatically selected.
-					// Hence, we have to select the gallery item again.
-					fireEvent.press( galleryItem );
-
-					// Start dragging from nested block's mobile toolbar
-					fireLongPress(
-						galleryItem,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -390,16 +346,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						spacerBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 	} );

package/src/components/block-edit/edit.js

@@ -29,7 +29,25 @@ import BlockContext from '../block-context';
  */
 const DEFAULT_BLOCK_CONTEXT = {};
 
-export const Edit = ( props ) => {
+const Edit = ( props ) => {
+	const { name } = props;
+	const blockType = getBlockType( name );
+
+	if ( ! blockType ) {
+		return null;
+	}
+
+	// `edit` and `save` are functions or components describing the markup
+	// with which a block is displayed. If `blockType` is valid, assign
+	// them preferentially as the render value for the block.
+	const Component = blockType.edit || blockType.save;
+
+	return <Component { ...props } />;
+};
+
+const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
+
+const EditWithGeneratedProps = ( props ) => {
 	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
@@ -49,13 +67,8 @@ export const Edit = ( props ) => {
 		return null;
 	}
 
-	// `edit` and `save` are functions or components describing the markup
-	// with which a block is displayed. If `blockType` is valid, assign
-	// them preferentially as the render value for the block.
-	const Component = blockType.edit || blockType.save;
-
 	if ( blockType.apiVersion > 1 ) {
-		return <Component { ...props } context={ context } />;
+		return <EditWithFilters { ...props } context={ context } />;
 	}
 
 	// Generate a class name for the block's editable form.
@@ -69,8 +82,12 @@ export const Edit = ( props ) => {
 	);
 
 	return (
-		<Component { ...props } context={ context } className={ className } />
+		<EditWithFilters
+			{ ...props }
+			context={ context }
+			className={ className }
+		/>
 	);
 };
 
-export default withFilters( 'editor.BlockEdit' )( Edit );
+export default EditWithGeneratedProps;

package/src/components/block-edit/test/edit.js

@@ -15,7 +15,7 @@ import {
 /**
  * Internal dependencies
  */
-import { Edit } from '../edit';
+import Edit from '../edit';
 import { BlockContextProvider } from '../../block-context';
 
 const noop = () => {};

package/src/components/block-heading-level-dropdown/heading-level-icon.js

@@ -10,6 +10,7 @@ import {
 	headingLevel6,
 	paragraph,
 } from '@wordpress/icons';
+import { Icon } from '@wordpress/components';
 
 /** @typedef {import('@wordpress/element').WPComponent} WPComponent */
 
@@ -39,5 +40,9 @@ const LEVEL_TO_PATH = {
  * @return {?WPComponent} The icon.
  */
 export default function HeadingLevelIcon( { level } ) {
-	return LEVEL_TO_PATH[ level ] ?? null;
+	if ( LEVEL_TO_PATH[ level ] ) {
+		return <Icon icon={ LEVEL_TO_PATH[ level ] } />;
+	}
+
+	return null;
 }

package/src/components/block-heading-level-dropdown/index.native.js

@@ -30,7 +30,11 @@ const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
  *
  * @return {WPComponent} The toolbar.
  */
-export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
+export default function HeadingLevelDropdown( {
+	options = HEADING_LEVELS,
+	value,
+	onChange,
+} ) {
 	const createLevelControl = (
 		targetLevel,
 		currentLevel,
@@ -53,9 +57,9 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 
 	return (
 		<DropdownMenu
-			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-			controls={ HEADING_LEVELS.map( ( index ) =>
-				createLevelControl( index, selectedLevel, onChange )
+			icon={ <HeadingLevelIcon level={ value } /> }
+			controls={ options.map( ( index ) =>
+				createLevelControl( index, value, onChange )
 			) }
 			label={ __( 'Change level' ) }
 		/>

package/src/components/block-inspector/style.scss

@@ -20,7 +20,8 @@
 
 	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
 	.components-focal-point-picker-control,
-	.components-query-controls {
+	.components-query-controls,
+	.components-range-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

package/src/components/block-list/block-outline.native.js

@@ -7,51 +7,52 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { alignmentHelpers } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './block.scss';
 
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+
 function BlockOutline( {
-	align,
-	blockWidth,
-	isParentSelected,
+	blockCategory,
+	hasInnerBlocks,
+	isRootList,
 	isSelected,
 	name,
-	screenWidth,
 } ) {
-	const { isFullWidth, isContainerRelated } = alignmentHelpers;
-	const isScreenWidthWider = blockWidth < screenWidth;
+	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+	const hasBlockTextCategory =
+		blockCategory === 'text' && ! textBlockWithOutline;
+	const hasBlockMediaCategory =
+		blockCategory === 'media' ||
+		blockCategory === 'embed' ||
+		! blockCategory;
+	const shouldShowCompactOutline =
+		( hasBlockMediaCategory && ! hasInnerBlocks ) || textBlockWithOutline;
 
 	const styleSolidBorder = [
 		styles.solidBorder,
-		isFullWidth( align ) && isScreenWidthWider && styles.borderFullWidth,
-		isFullWidth( align ) &&
-			isContainerRelated( name ) &&
-			isScreenWidthWider &&
-			styles.containerBorderFullWidth,
 		usePreferredColorSchemeStyle(
 			styles.solidBorderColor,
 			styles.solidBorderColorDark
 		),
+		shouldShowCompactOutline && styles.solidBorderCompact,
+		hasBlockTextCategory && styles.solidBorderTextContent,
 	];
-	const styleDashedBorder = [
-		styles.dashedBorder,
-		usePreferredColorSchemeStyle(
-			styles.dashedBorderColor,
-			styles.dashedBorderColorDark
-		),
-	];
+
+	const shoudlShowOutline =
+		isSelected &&
+		( ( hasBlockTextCategory && hasInnerBlocks ) ||
+			( ! hasBlockTextCategory && hasInnerBlocks ) ||
+			( ! hasBlockTextCategory && isRootList ) ||
+			textBlockWithOutline );
 
 	return (
-		<>
-			{ isSelected && (
-				<View pointerEvents="box-none" style={ styleSolidBorder } />
-			) }
-			{ isParentSelected && <View style={ styleDashedBorder } /> }
-		</>
+		shoudlShowOutline && (
+			<View pointerEvents="box-none" style={ styleSolidBorder } />
+		)
 	);
 }
 

package/src/components/block-list/block.native.js

@@ -1,17 +1,16 @@
 /**
  * External dependencies
  */
-import { Pressable, useWindowDimensions, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
 	useMobileGlobalStylesColors,
-	alignmentHelpers,
 	useGlobalStyles,
 } from '@wordpress/components';
 import {
@@ -36,9 +35,7 @@ import { compose, ifCondition, pure } from '@wordpress/compose';
 import BlockEdit from '../block-edit';
 import BlockDraggable from '../block-draggable';
 import BlockInvalidWarning from './block-invalid-warning';
-import BlockMobileToolbar from '../block-mobile-toolbar';
 import BlockOutline from './block-outline';
-import styles from './block.scss';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import useSetting from '../use-setting';
@@ -63,27 +60,21 @@ function getWrapperProps( value, getWrapperPropsFunction ) {
 
 function BlockWrapper( {
 	accessibilityLabel,
-	align,
-	blockWidth,
+	blockCategory,
 	children,
 	clientId,
 	draggingClientId,
 	draggingEnabled,
+	hasInnerBlocks,
 	isDescendentBlockSelected,
-	isParentSelected,
+	isRootList,
 	isSelected,
-	isStackedHorizontally,
 	isTouchable,
 	marginHorizontal,
 	marginVertical,
-	onDeleteBlock,
+	name,
 	onFocus,
 } ) {
-	const { width: screenWidth } = useWindowDimensions();
-	const anchorNodeRef = useRef();
-	const { isFullWidth } = alignmentHelpers;
-	const isScreenWidthEqual = blockWidth === screenWidth;
-	const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
 	const blockWrapperStyles = { flex: 1 };
 	const blockWrapperStyle = [
 		blockWrapperStyles,
@@ -104,9 +95,11 @@ function BlockWrapper( {
 			style={ blockWrapperStyle }
 		>
 			<BlockOutline
+				blockCategory={ blockCategory }
+				hasInnerBlocks={ hasInnerBlocks }
+				isRootList={ isRootList }
 				isSelected={ isSelected }
-				isParentSelected={ isParentSelected }
-				screenWidth={ screenWidth }
+				name={ name }
 			/>
 			<BlockDraggable
 				clientId={ clientId }
@@ -116,19 +109,6 @@ function BlockWrapper( {
 			>
 				{ children }
 			</BlockDraggable>
-			<View style={ styles.neutralToolbar } ref={ anchorNodeRef }>
-				{ isSelected && (
-					<BlockMobileToolbar
-						anchorNodeRef={ anchorNodeRef.current }
-						blockWidth={ blockWidth }
-						clientId={ clientId }
-						draggingClientId={ draggingClientId }
-						isFullWidth={ isFullWidthToolbar }
-						isStackedHorizontally={ isStackedHorizontally }
-						onDelete={ onDeleteBlock }
-					/>
-				) }
-			</View>
 		</Pressable>
 	);
 }
@@ -159,9 +139,11 @@ function BlockListBlock( {
 } ) {
 	const {
 		baseGlobalStyles,
+		blockCategory,
 		blockType,
 		draggingClientId,
 		draggingEnabled,
+		hasInnerBlocks,
 		isDescendantOfParentSelected,
 		isDescendentBlockSelected,
 		isParentSelected,
@@ -178,6 +160,7 @@ function BlockListBlock( {
 				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
 			const currentBlockType = getBlockType( name || 'core/missing' );
+			const currentBlockCategory = currentBlockType?.category;
 			const blockOrder = getBlockIndex( clientId );
 			const descendentBlockSelected = hasSelectedInnerBlock(
 				clientId,
@@ -194,13 +177,15 @@ function BlockListBlock( {
 			const selectedParents = clientId ? parents : [];
 			const descendantOfParentSelected =
 				selectedParents.includes( rootClientId );
-			const hasInnerBlocks = getBlockCount( clientId ) > 0;
+			const blockHasInnerBlocks = getBlockCount( clientId ) > 0;
 
 			// For blocks with inner blocks, we only enable the dragging in the nested
 			// blocks if any of them are selected. This way we prevent the long-press
 			// gesture from being disabled for elements within the block UI.
 			const isDraggingEnabled =
-				! hasInnerBlocks || isSelected || ! descendentBlockSelected;
+				! blockHasInnerBlocks ||
+				isSelected ||
+				! descendentBlockSelected;
 			// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
 			// will be the top in the hierarchy.
 			const currentDraggingClientId =
@@ -211,9 +196,11 @@ function BlockListBlock( {
 
 			return {
 				baseGlobalStyles: globalStylesBaseStyles,
+				blockCategory: currentBlockCategory,
 				blockType: currentBlockType,
 				draggingClientId: currentDraggingClientId,
 				draggingEnabled: isDraggingEnabled,
+				hasInnerBlocks: blockHasInnerBlocks,
 				isDescendantOfParentSelected: descendantOfParentSelected,
 				isDescendentBlockSelected: descendentBlockSelected,
 				isParentSelected: parentSelected,
@@ -295,7 +282,6 @@ function BlockListBlock( {
 		),
 	] );
 
-	const { align } = attributes;
 	const isFocused = isSelected || isDescendentBlockSelected;
 	const isTouchable =
 		isSelected ||
@@ -312,20 +298,20 @@ function BlockListBlock( {
 	return (
 		<BlockWrapper
 			accessibilityLabel={ accessibilityLabel }
-			align={ align }
-			blockWidth={ blockWidth }
+			blockCategory={ blockCategory }
 			clientId={ clientId }
 			draggingClientId={ draggingClientId }
 			draggingEnabled={ draggingEnabled }
-			isFocused={ isFocused }
+			hasInnerBlocks={ hasInnerBlocks }
 			isDescendentBlockSelected={ isDescendentBlockSelected }
-			isParentSelected={ isParentSelected }
+			isFocused={ isFocused }
+			isRootList={ ! rootClientId }
 			isSelected={ isSelected }
 			isStackedHorizontally={ isStackedHorizontally }
 			isTouchable={ isTouchable }
 			marginHorizontal={ marginHorizontal }
 			marginVertical={ marginVertical }
-			onDeleteBlock={ onDeleteBlock }
+			name={ name }
 			onFocus={ onFocus }
 		>
 			{ () =>