@wordpress/block-editor 12.2.0 → 12.3.1

package/src/components/alignment-control/ui.js

@@ -24,8 +24,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 ];
 
 const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 function AlignmentUI( {

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

@@ -32,6 +32,15 @@ export default function BlockActions( {
 
 	const blocks = getBlocksByClientId( clientIds );
 	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+
+	const canCopyStyles = blocks.every( ( block ) => {
+		return (
+			!! block &&
+			( hasBlockSupport( block.name, 'color' ) ||
+				hasBlockSupport( block.name, 'typography' ) )
+		);
+	} );
+
 	const canDuplicate = blocks.every( ( block ) => {
 		return (
 			!! block &&
@@ -64,6 +73,7 @@ export default function BlockActions( {
 	const pasteStyles = usePasteStyles();
 
 	return children( {
+		canCopyStyles,
 		canDuplicate,
 		canInsertDefaultBlock,
 		canMove,

package/src/components/block-alignment-control/constants.js

@@ -39,7 +39,3 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 };
 
 export const DEFAULT_CONTROL = 'none';
-
-export const POPOVER_PROPS = {
-	variant: 'toolbar',
-};

package/src/components/block-alignment-control/ui.js

@@ -18,11 +18,7 @@ import {
  * Internal dependencies
  */
 import useAvailableAlignments from './use-available-alignments';
-import {
-	BLOCK_ALIGNMENTS_CONTROLS,
-	DEFAULT_CONTROL,
-	POPOVER_PROPS,
-} from './constants';
+import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from './constants';
 
 function BlockAlignmentUI( {
 	value,
@@ -69,7 +65,6 @@ function BlockAlignmentUI( {
 		  }
 		: {
 				toggleProps: { describedBy: __( 'Change alignment' ) },
-				popoverProps: POPOVER_PROPS,
 				children: ( { onClose } ) => {
 					return (
 						<>

package/src/components/block-alignment-matrix-control/index.js

@@ -23,7 +23,7 @@ function BlockAlignmentMatrixControl( props ) {
 
 	return (
 		<Dropdown
-			popoverProps={ { variant: 'toolbar', placement: 'bottom-start' } }
+			popoverProps={ { placement: 'bottom-start' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

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

@@ -26,15 +26,11 @@ function BlockBreadcrumb( { rootLabelText } ) {
 		const {
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getBlockParents,
-			getBlockEditingMode,
+			getEnabledBlockParents,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
-			parents: getBlockParents( selectedBlockClientId ).filter(
-				( parentClientId ) =>
-					getBlockEditingMode( parentClientId ) !== 'disabled'
-			),
+			parents: getEnabledBlockParents( selectedBlockClientId ),
 			clientId: selectedBlockClientId,
 			hasSelection: !! getSelectionStart().clientId,
 		};

package/src/components/block-controls/fill.js

@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalStyleProvider as StyleProvider,
-	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 } from '@wordpress/components';
 
@@ -31,21 +25,25 @@ export default function BlockControlsFill( {
 		return null;
 	}
 
+	const innerMarkup = (
+		<>
+			{ group === 'default' && <ToolbarGroup controls={ controls } /> }
+			{ children }
+		</>
+	);
+
 	return (
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to BlockControlsFill will not have access to any
-					// React Context whose Provider is part of the BlockControlsSlot tree.
-					// So we re-create the Provider in this subtree.
-					const value = ! isEmpty( fillProps ) ? fillProps : null;
-					return (
-						<ToolbarContext.Provider value={ value }>
-							{ group === 'default' && (
-								<ToolbarGroup controls={ controls } />
-							) }
-							{ children }
-						</ToolbarContext.Provider>
+					// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
+					// that should wrap the fill markup.
+					const { forwardedContext = [] } = fillProps;
+					return forwardedContext.reduce(
+						( inner, [ Provider, props ] ) => (
+							<Provider { ...props }>{ inner }</Provider>
+						),
+						innerMarkup
 					);
 				} }
 			</Fill>

package/src/components/block-controls/slot.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import {
+	privateApis,
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 	__experimentalUseSlotFills as useSlotFills,
@@ -13,9 +14,23 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import groups from './groups';
+import { unlock } from '../../lock-unlock';
+
+const { ComponentsContext } = unlock( privateApis );
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
+	const toolbarState = useContext( ToolbarContext );
+	const contextState = useContext( ComponentsContext );
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ ToolbarContext.Provider, { value: toolbarState } ],
+				[ ComponentsContext.Provider, { value: contextState } ],
+			],
+		} ),
+		[ toolbarState, contextState ]
+	);
+
 	const Slot = groups[ group ]?.Slot;
 	const fills = useSlotFills( Slot?.__unstableName );
 	if ( ! Slot ) {
@@ -27,23 +42,11 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		return null;
 	}
 
+	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
+
 	if ( group === 'default' ) {
-		return (
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		);
+		return slot;
 	}
 
-	return (
-		<ToolbarGroup>
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		</ToolbarGroup>
-	);
+	return <ToolbarGroup>{ slot }</ToolbarGroup>;
 }

package/src/components/block-controls/slot.native.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalToolbarContext as ToolbarContext,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
@@ -14,7 +10,6 @@ import warning from '@wordpress/warning';
 import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
 		warning( `Unknown BlockControls group "${ group }" provided.` );
@@ -22,11 +17,11 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	}
 
 	if ( group === 'default' ) {
-		return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+		return <Slot { ...props } />;
 	}
 
 	return (
-		<Slot { ...props } fillProps={ accessibleToolbarState }>
+		<Slot { ...props }>
 			{ ( fills ) => {
 				if ( ! fills.length ) {
 					return null;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -24,6 +24,7 @@ const BlockDraggable = ( {
 		( select ) => {
 			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
 				select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
 

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

@@ -29,11 +29,9 @@ export default function BlockEdit( props ) {
 		__unstableLayoutClassNames,
 	} = props;
 	const { layout = null } = attributes;
-	const layoutSupport = hasBlockSupport(
-		name,
-		'__experimentalLayout',
-		false
-	);
+	const layoutSupport =
+		hasBlockSupport( name, 'layout', false ) ||
+		hasBlockSupport( name, '__experimentalLayout', false );
 	const context = {
 		name,
 		isSelected,

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

@@ -107,7 +107,7 @@ describe( 'Edit', () => {
 		it( 'should assign context', () => {
 			const edit = ( { context } ) => context.value;
 			registerBlockType( 'core/test-block', {
-				apiVersion: 2,
+				apiVersion: 3,
 				category: 'text',
 				title: 'block title',
 				usesContext: [ 'value' ],

package/src/components/block-heading-level-dropdown/README.md

@@ -0,0 +1,52 @@
+# Heading Level Dropdown
+
+`<HeadingLevelDropdown>` Adds a dropdown for selecting H1-H6 and paragraph HTML tags from the block toolbar.
+Uses `<ToolbarDropdownMenu>`.
+
+## Usage
+
+```jsx
+
+import { BlockControls, HeadingLevelDropdown } from '@wordpress/block-editor';
+
+const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
+
+const MyHeadingLevelToolbar = () => (
+	<BlockControls group="block">
+		<HeadingLevelDropdown
+			options={ HEADING_LEVELS }
+			value={ tag }
+			onChange={ ( newTag ) =>
+				setAttributes( { tag: newTag } )
+			}
+		/>
+	</BlockControls>
+);
+```
+
+### Props
+
+#### options
+
+The list of available HTML tags, passed from the block.
+
+-   Type: `Object`
+-   Required: no
+
+#### value
+
+The chosen HTML tag.
+
+-   Type: `string`
+-   Required: no
+
+#### onChange
+
+Callback to run when toolbar value is changed.
+
+-   Type: `string`
+-   Required: yes
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	headingLevel1,
+	headingLevel2,
+	headingLevel3,
+	headingLevel4,
+	headingLevel5,
+	headingLevel6,
+	paragraph,
+} from '@wordpress/icons';
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelIcon props.
+ *
+ * @typedef WPHeadingLevelIconProps
+ *
+ * @property {number} level The heading level to show an icon for.
+ */
+
+const LEVEL_TO_PATH = {
+	0: paragraph,
+	1: headingLevel1,
+	2: headingLevel2,
+	3: headingLevel3,
+	4: headingLevel4,
+	5: headingLevel5,
+	6: headingLevel6,
+};
+
+/**
+ * Heading level icon.
+ *
+ * @param {WPHeadingLevelIconProps} props Component props.
+ *
+ * @return {?WPComponent} The icon.
+ */
+export default function HeadingLevelIcon( { level } ) {
+	return LEVEL_TO_PATH[ level ] ?? null;
+}

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

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarDropdownMenu } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelIcon from './heading-level-icon';
+
+const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
+
+const POPOVER_PROPS = {
+	className: 'block-library-heading-level-dropdown',
+};
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}                 value    The chosen heading level.
+ * @property {number[]}               options  An array of supported heading levels.
+ * @property {(newValue:number)=>any} onChange Callback to run when
+ *                                             toolbar value is changed.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6) or paragraph (0).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {WPComponent} The toolbar.
+ */
+export default function HeadingLevelDropdown( {
+	options = HEADING_LEVELS,
+	value,
+	onChange,
+} ) {
+	return (
+		<ToolbarDropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			icon={ <HeadingLevelIcon level={ value } /> }
+			label={ __( 'Change level' ) }
+			controls={ options.map( ( targetLevel ) => {
+				{
+					const isActive = targetLevel === value;
+
+					return {
+						icon: (
+							<HeadingLevelIcon
+								level={ targetLevel }
+								isPressed={ isActive }
+							/>
+						),
+						label:
+							targetLevel === 0
+								? __( 'Paragraph' )
+								: sprintf(
+										// translators: %s: heading level e.g: "1", "2", "3"
+										__( 'Heading %d' ),
+										targetLevel
+								  ),
+						isActive,
+						onClick() {
+							onChange( targetLevel );
+						},
+						role: 'menuitemradio',
+					};
+				}
+			} ) }
+		/>
+	);
+}

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

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { DropdownMenu } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelIcon from './heading-level-icon';
+
+const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}                 selectedLevel The chosen heading level.
+ * @property {(newValue:number)=>any} onChange      Callback to run when
+ *                                                  toolbar value is changed.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {WPComponent} The toolbar.
+ */
+export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
+	const createLevelControl = (
+		targetLevel,
+		currentLevel,
+		onChangeCallback
+	) => {
+		const isActive = targetLevel === currentLevel;
+		return {
+			icon: (
+				<HeadingLevelIcon
+					level={ targetLevel }
+					isPressed={ isActive }
+				/>
+			),
+			// translators: %s: heading level e.g: "1", "2", "3"
+			title: sprintf( __( 'Heading %d' ), targetLevel ),
+			isActive,
+			onClick: () => onChangeCallback( targetLevel ),
+		};
+	};
+
+	return (
+		<DropdownMenu
+			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
+			controls={ HEADING_LEVELS.map( ( index ) =>
+				createLevelControl( index, selectedLevel, onChange )
+			) }
+			label={ __( 'Change level' ) }
+		/>
+	);
+}

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

@@ -8,16 +8,8 @@ import {
 	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import {
-	FlexItem,
-	PanelBody,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Button,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback } from '@wordpress/element';
+import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -28,7 +20,6 @@ import MultiSelectionInspector from '../multi-selection-inspector';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import BlockStyles from '../block-styles';
 import DefaultStylePicker from '../default-style-picker';
 import { default as InspectorControls } from '../inspector-controls';
@@ -38,77 +29,26 @@ import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
-
-function useContentBlocks( blockTypes, block ) {
-	const contentBlocksObjectAux = useMemo( () => {
-		return blockTypes.reduce( ( result, blockType ) => {
-			if (
-				blockType.name !== 'core/list-item' &&
-				Object.entries( blockType.attributes ).some(
-					( [ , { __experimentalRole } ] ) =>
-						__experimentalRole === 'content'
-				)
-			) {
-				result[ blockType.name ] = true;
-			}
-			return result;
-		}, {} );
-	}, [ blockTypes ] );
-	const isContentBlock = useCallback(
-		( blockName ) => {
-			return !! contentBlocksObjectAux[ blockName ];
-		},
-		[ contentBlocksObjectAux ]
-	);
-	return useMemo( () => {
-		return getContentBlocks( [ block ], isContentBlock );
-	}, [ block, isContentBlock ] );
-}
-
-function getContentBlocks( blocks, isContentBlock ) {
-	const result = [];
-	for ( const block of blocks ) {
-		if ( isContentBlock( block.name ) ) {
-			result.push( block );
-		}
-		result.push( ...getContentBlocks( block.innerBlocks, isContentBlock ) );
-	}
-	return result;
-}
-
-function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
-	const blockType = blockTypes.find( ( { name } ) => name === block.name );
-	const isSelected =
-		selectedBlock && selectedBlock.clientId === block.clientId;
-	return (
-		<Button
-			isPressed={ isSelected }
-			onClick={ () => selectBlock( block.clientId ) }
-		>
-			<HStack justify="flex-start">
-				<BlockIcon icon={ blockType.icon } />
-				<FlexItem>{ blockType.title }</FlexItem>
-			</HStack>
-		</Button>
-	);
-}
+import BlockQuickNavigation from '../block-quick-navigation';
+import { unlock } from '../../lock-unlock';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
-	const { blockTypes, block, selectedBlock } = useSelect(
+	const contentClientIds = useSelect(
 		( select ) => {
-			return {
-				blockTypes: select( blocksStore ).getBlockTypes(),
-				block: select( blockEditorStore ).getBlock(
-					topLevelLockedBlock
-				),
-				selectedBlock: select( blockEditorStore ).getSelectedBlock(),
-			};
+			const {
+				getClientIdsOfDescendants,
+				getBlockName,
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+			return getClientIdsOfDescendants( [ topLevelLockedBlock ] ).filter(
+				( clientId ) =>
+					getBlockName( clientId ) !== 'core/list-item' &&
+					getBlockEditingMode( clientId ) === 'contentOnly'
+			);
 		},
 		[ topLevelLockedBlock ]
 	);
 	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
-	const contentBlocks = useContentBlocks( blockTypes, block );
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard
@@ -117,23 +57,9 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<BlockInfo.Slot />
-			<VStack
-				spacing={ 1 }
-				padding={ 4 }
-				className="block-editor-block-inspector__block-buttons-container"
-			>
-				<h2 className="block-editor-block-card__title">
-					{ __( 'Content' ) }
-				</h2>
-				{ contentBlocks.map( ( contentBlock ) => (
-					<BlockNavigationButton
-						selectedBlock={ selectedBlock }
-						key={ contentBlock.clientId }
-						block={ contentBlock }
-						blockTypes={ blockTypes }
-					/>
-				) ) }
-			</VStack>
+			<PanelBody title={ __( 'Content' ) }>
+				<BlockQuickNavigation clientIds={ contentClientIds } />
+			</PanelBody>
 		</div>
 	);
 }
@@ -356,6 +282,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						</div>
 					) }
 					<InspectorControls.Slot />
+					<InspectorControls.Slot group="list" />
 					<InspectorControls.Slot
 						group="color"
 						label={ __( 'Color' ) }

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

@@ -55,8 +55,3 @@
 .block-editor-block-inspector__tab-item {
 	flex: 1 1 0px;
 }
-
-.block-editor-block-inspector__block-buttons-container {
-	border-top: $border-width solid $gray-200;
-	padding: $grid-unit-20;
-}