@wordpress/block-editor 12.3.4 → 12.5.0

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-parent-selector/index.js

@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -24,14 +25,15 @@ import { store as blockEditorStore } from '../../store';
 export default function BlockParentSelector() {
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
+	const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
 				getSelectedBlockClientId,
 				getSettings,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const parents = getBlockParents( selectedBlockClientId );
@@ -41,11 +43,14 @@ export default function BlockParentSelector() {
 			const settings = getSettings();
 			return {
 				firstParentClientId: _firstParentClientId,
-				shouldHide: ! hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
+				isVisible:
+					_firstParentClientId &&
+					getBlockEditingMode( _firstParentClientId ) === 'default' &&
+					hasBlockSupport(
+						_parentBlockType,
+						'__experimentalParentSelector',
+						true
+					),
 				isDistractionFree: settings.isDistractionFree,
 			};
 		},
@@ -66,7 +71,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 

package/src/components/block-removal-warning-modal/index.js

@@ -16,38 +16,26 @@ import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-// In certain editing contexts, we'd like to prevent accidental removal of
-// important blocks. For example, in the site editor, the Query Loop block is
-// deemed important. In such cases, we'll ask the user for confirmation that
-// they intended to remove such block(s).
-//
-// @see https://github.com/WordPress/gutenberg/pull/51145
-export const blockTypePromptMessages = {
-	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
-	'core/post-content': __(
-		'Post Content displays the content of a post or page.'
-	),
-};
-
-export function BlockRemovalWarningModal() {
+export function BlockRemovalWarningModal( { rules } ) {
 	const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
 		( select ) =>
 			unlock( select( blockEditorStore ) ).getRemovalPromptData()
 	);
 
 	const {
-		clearRemovalPrompt,
-		toggleRemovalPromptSupport,
+		clearBlockRemovalPrompt,
+		setBlockRemovalRules,
 		privateRemoveBlocks,
 	} = unlock( useDispatch( blockEditorStore ) );
 
-	// Signalling the removal prompt is in place.
+	// Load block removal rules, simultaneously signalling that the block
+	// removal prompt is in place.
 	useEffect( () => {
-		toggleRemovalPromptSupport( true );
+		setBlockRemovalRules( rules );
 		return () => {
-			toggleRemovalPromptSupport( false );
+			setBlockRemovalRules();
 		};
-	}, [ toggleRemovalPromptSupport ] );
+	}, [ rules, setBlockRemovalRules ] );
 
 	if ( ! blockNamesForPrompt ) {
 		return;
@@ -55,22 +43,23 @@ export function BlockRemovalWarningModal() {
 
 	const onConfirmRemoval = () => {
 		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
-		clearRemovalPrompt();
+		clearBlockRemovalPrompt();
 	};
 
 	return (
 		<Modal
 			title={ __( 'Are you sure?' ) }
-			onRequestClose={ clearRemovalPrompt }
+			onRequestClose={ clearBlockRemovalPrompt }
+			style={ {
+				maxWidth: '40rem',
+			} }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
-				<p>{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }</p>
+				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>
 			) : (
 				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
 					{ blockNamesForPrompt.map( ( name ) => (
-						<li key={ name }>
-							{ blockTypePromptMessages[ name ] }
-						</li>
+						<li key={ name }>{ rules[ name ] }</li>
 					) ) }
 				</ul>
 			) }
@@ -80,7 +69,7 @@ export function BlockRemovalWarningModal() {
 					: __( 'Removing this block is not advised.' ) }
 			</p>
 			<HStack justify="right">
-				<Button variant="tertiary" onClick={ clearRemovalPrompt }>
+				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button variant="primary" onClick={ onConfirmRemoval }>

package/src/components/block-tools/block-contextual-toolbar.js

@@ -15,7 +15,7 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { levelUp } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import { unlock } from '../../lock-unlock';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
@@ -57,6 +56,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
+					getBlockEditingMode( firstParentClientId ) === 'default' &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',
@@ -93,6 +93,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 			{ isFixed && isLargeViewport && blockType && (
 				<ToolbarGroup
 					className={
@@ -104,13 +105,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					<ToolbarItem
 						as={ ToolbarButton }
 						ref={ toolbarButtonRef }
-						icon={
-							isCollapsed ? (
-								<BlockIcon icon={ blockType.icon } />
-							) : (
-								levelUp
-							)
-						}
+						icon={ isCollapsed ? next : previous }
 						onClick={ () => {
 							setIsCollapsed( ( collapsed ) => ! collapsed );
 							toolbarButtonRef.current.focus();
@@ -118,12 +113,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						label={
 							isCollapsed
 								? __( 'Show block tools' )
-								: __( 'Show document tools' )
+								: __( 'Hide block tools' )
 						}
 					/>
 				</ToolbarGroup>
 			) }
-			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }

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

@@ -131,11 +131,11 @@
 	@include break-medium() {
 		&.is-fixed {
 
-			// leave room for block inserter
-			margin-left: $grid-unit-80;
+			// leave room for block inserter, undo and redo, list view
+			margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 			// position on top of interface header
 			position: fixed;
-			top: $admin-bar-height + $grid-unit;
+			top: $admin-bar-height + $grid-unit - $border-width;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
@@ -145,32 +145,63 @@
 
 			&.is-collapsed {
 				width: initial;
-				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
 			}
 
 			.is-fullscreen-mode & {
-				// leave room for block inserter
-				margin-left: $grid-unit-80 + $grid-unit-70;
-				top: $grid-unit;
+				// leave room for block inserter, undo and redo, list view
+				// and some margin left
+				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+				top: $grid-unit - $border-width;
 				&.is-collapsed {
 					width: initial;
-					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar.is-showing-movers {
+				flex-grow: initial;
+				width: initial;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					height: 3 * $grid-unit;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-right: 0;
+					background-color: $gray-300;
+					position: relative;
+					left: math.div(-$grid-unit-05, 2);
+					top: -1px;
 				}
 			}
 
 			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
-				&::after {
+				&::before {
 					content: "";
 					width: $border-width;
-					height: 24px;
+					height: 3 * $grid-unit;
 					margin-top: $grid-unit + $grid-unit-05;
-					margin-bottom: $grid-unit + $grid-unit-05;
+					margin-right: $grid-unit-10;
 					background-color: $gray-300;
-					position: absolute;
-					left: 44px;
+					position: relative;
+					left: 0;
 					top: -1px;
 				}
 			}
@@ -178,6 +209,21 @@
 			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					width: $grid-unit-80 * 4;
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
 				&::before {
 					content: "";
@@ -186,27 +232,20 @@
 					margin-bottom: $grid-unit + $grid-unit-05;
 					background-color: $gray-300;
 					position: relative;
-					left: -12px; //the padding of buttons
-					height: 24px;
+					left: -8px;
+					height: 3 * $grid-unit;
+					top: -1px;
 				}
 			}
 
 			.show-icon-labels & {
 
-				margin-left: $grid-unit-80;
-
-				&.is-collapsed {
-					margin-left: $grid-unit-80 * 6;
-				}
+				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;
 
 				.is-fullscreen-mode & {
-					margin-left: $grid-unit-80 + $grid-unit-80;
-					&.is-collapsed {
-						margin-left: $grid-unit-80 * 7;
-					}
+					margin-left: $grid-unit * 18; // site hub, inserter and margin
 				}
 
-
 				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
 					left: 0;
 				}
@@ -234,12 +273,14 @@
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {
+
 			.block-editor-block-parent-selector__button {
 				position: relative;
 				top: -1px;
 				border: 0;
 				padding-right: 6px;
 				padding-left: 6px;
+
 				&::after {
 					content: "\00B7";
 					font-size: 16px;
@@ -281,7 +322,9 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
-			width: initial;
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 240px - #{4 * $grid-unit-80});
 		}
 	}
 

package/src/components/font-family/README.md

@@ -0,0 +1,71 @@
+# FontFamilyControl
+
+FontFamilyControl is a React component that renders a UI that allows users to select a font family.
+The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets.
+Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families.
+
+![FontFamilyControl component preview](https://i.imgur.com/blS5iA3.png)
+
+## Usage
+
+```jsx
+import { FontFamilyControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+// ...
+
+const MyFontFamilyControl = () => {
+	const [ fontFamily, setFontFamily ] = useState( '' );
+
+	return (
+		<FontFamilyControl
+			value={ fontFamily }
+			onChange={ ( newFontFamily ) => {
+				setFontFamily( newFontFamily );
+			} }
+		/>
+	);
+};
+
+/// ...
+
+<MyFontFamilyControl />
+```
+
+## Props
+
+The component accepts the following props:
+
+### onChange
+
+A function that receives the new font family value.
+If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font family to undefined or set the font family a starting value.
+
+- Type: `function`
+- Required: Yes
+
+### fontFamilies
+
+A user-provided set of font families.
+Optional, used in case we want to override the predefined ones coming from presets.
+
+- Type: `Array`
+- Required: No
+
+The font families are provided as an array of objects with the following schema:
+
+| Property   | Description                               | Type   |
+| ---------- | ----------------------------------------- | ------ |
+| fontFamily | Font family, as used in CSS.              | string |
+| name       | Optional display name of the font family. | string |
+
+### value
+
+The current font family value.
+
+- Type: `String`
+- Required: No
+- Default: ''
+
+The rest of the props are passed down to the underlying `<SelectControl />` instance.

package/src/components/global-styles/color-panel.js

@@ -35,7 +35,7 @@ export function useHasColorPanel( settings ) {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasLinkPanel = useHasLinkPanel( settings );
 	const hasHeadingPanel = useHasHeadingPanel( settings );
-	const hasButtonPanel = useHasHeadingPanel( settings );
+	const hasButtonPanel = useHasButtonPanel( settings );
 	const hasCaptionPanel = useHasCaptionPanel( settings );
 
 	return (

package/src/components/global-styles/hooks.js

@@ -71,6 +71,7 @@ const VALID_SETTINGS = [
 	'typography.textColumns',
 	'typography.textDecoration',
 	'typography.textTransform',
+	'typography.writingMode',
 ];
 
 export const useGlobalStylesReset = () => {
@@ -292,6 +293,7 @@ export function useSettingsForBlockElement(
 			'letterSpacing',
 			'textTransform',
 			'textDecoration',
+			'writingMode',
 		].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.typography = {

package/src/components/global-styles/typography-panel.js

@@ -19,6 +19,7 @@ import LineHeightControl from '../line-height-control';
 import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
+import WritingModeControl from '../writing-mode-control';
 import { getValueFromVariable } from './utils';
 import { setImmutably } from '../../utils/object';
 
@@ -32,6 +33,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasLetterSpacing = useHasLetterSpacingControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasWritingMode = useHasWritingModeControl( settings );
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
 
@@ -43,6 +45,7 @@ export function useHasTypographyPanel( settings ) {
 		hasTextTransform ||
 		hasFontSize ||
 		hasTextDecoration ||
+		hasWritingMode ||
 		hasTextColumns
 	);
 }
@@ -103,6 +106,10 @@ function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
 
+function useHasWritingModeControl( settings ) {
+	return settings?.typography?.writingMode;
+}
+
 function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
@@ -138,6 +145,7 @@ const DEFAULT_CONTROLS = {
 	letterSpacing: true,
 	textTransform: true,
 	textDecoration: true,
+	writingMode: true,
 	textColumns: true,
 };
 
@@ -310,6 +318,21 @@ export default function TypographyPanel( {
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );
 
+	// Text Orientation
+	const hasWritingModeControl = useHasWritingModeControl( settings );
+	const writingMode = decodeValue( inheritedValue?.typography?.writingMode );
+	const setWritingMode = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'writingMode' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasWritingMode = () => !! value?.typography?.writingMode;
+	const resetWritingMode = () => setWritingMode( undefined );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -456,6 +479,23 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasWritingModeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text orientation' ) }
+					hasValue={ hasWritingMode }
+					onDeselect={ resetWritingMode }
+					isShownByDefault={ defaultControls.writingMode }
+					panelId={ panelId }
+				>
+					<WritingModeControl
+						value={ writingMode }
+						onChange={ setWritingMode }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextTransformControl && (
 				<ToolsPanelItem
 					label={ __( 'Letter case' ) }

package/src/components/index.js

@@ -50,6 +50,7 @@ export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
+export { default as __experimentalWritingModeControl } from './writing-mode-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
@@ -164,3 +165,8 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
+
+/*
+ * The following rename hint component can be removed in 6.4.
+ */
+export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';

package/src/components/inserter/media-tab/hooks.js

@@ -9,28 +9,8 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../../store';
 
-/**
- * Interface for inserter media requests.
- *
- * @typedef {Object} InserterMediaRequest
- * @property {number} per_page How many items to fetch per page.
- * @property {string} search   The search term to use for filtering the results.
- */
-
-/**
- * Interface for inserter media responses. Any media resource should
- * map their response to this interface, in order to create the core
- * WordPress media blocks (image, video, audio).
- *
- * @typedef {Object} InserterMediaItem
- * @property {string}        title        The title of the media item.
- * @property {string}        url          The source url of the media item.
- * @property {string}        [previewUrl] The preview source url of the media item to display in the media list.
- * @property {number}        [id]         The WordPress id of the media item.
- * @property {number|string} [sourceId]   The id of the media item from external source.
- * @property {string}        [alt]        The alt text of the media item.
- * @property {string}        [caption]    The caption of the media item.
- */
+/** @typedef {import('./api').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('./api').InserterMediaItem} InserterMediaItem */
 
 /**
  * Fetches media items based on the provided category.