@wordpress/block-editor 12.4.0 → 12.6.0

package/src/components/use-block-drop-zone/index.native.js

@@ -1,14 +1,17 @@
 /**
  * External dependencies
  */
-import { useSharedValue } from 'react-native-reanimated';
+import {
+	runOnJS,
+	useDerivedValue,
+	useSharedValue,
+} from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { useThrottle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -18,6 +21,8 @@ import { useBlockListContext } from '../block-list/block-list-context';
 import { getDistanceToNearestEdge } from '../../utils/math';
 import useOnBlockDrop from '../use-on-block-drop';
 
+const UPDATE_TARGET_BLOCK_INDEX_THRESHOLD = 20; // In pixels
+
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 
 /**
@@ -111,6 +116,14 @@ export default function useBlockDropZone( {
 	rootClientId: targetRootClientId = '',
 } = {} ) {
 	const targetBlockIndex = useSharedValue( null );
+	const dragPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
+	const prevDragPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
 
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
 	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
@@ -118,43 +131,67 @@ export default function useBlockDropZone( {
 
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
+		// We use the value of `blocksLayouts` as the dependency.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ blocksLayouts.current ] );
 
 	const isRTL = getSettings().isRTL;
 
 	const onBlockDrop = useOnBlockDrop();
 
-	const throttled = useThrottle(
-		useCallback(
-			( event ) => {
-				const sortedBlockLayouts = getSortedBlocksLayouts();
-
-				const targetIndex = getNearestBlockIndex(
-					sortedBlockLayouts,
-					{ x: event.x, y: event.y },
-					getBlockListSettings( targetRootClientId )?.orientation,
-					isRTL
-				);
-				if ( targetIndex !== null ) {
-					targetBlockIndex.value = targetIndex ?? 0;
-				}
-			},
-			[
-				getSortedBlocksLayouts,
-				getNearestBlockIndex,
-				getBlockListSettings,
-				targetBlockIndex,
-			]
-		),
-		200
+	const updateTargetBlockIndex = useCallback(
+		( event ) => {
+			const sortedBlockLayouts = getSortedBlocksLayouts();
+
+			const targetIndex = getNearestBlockIndex(
+				sortedBlockLayouts,
+				{ x: event.x, y: event.y },
+				getBlockListSettings( targetRootClientId )?.orientation,
+				isRTL
+			);
+			if ( targetIndex !== null ) {
+				targetBlockIndex.value = targetIndex ?? 0;
+			}
+		},
+		[
+			getSortedBlocksLayouts,
+			getBlockListSettings,
+			targetRootClientId,
+			isRTL,
+			targetBlockIndex,
+		]
 	);
 
+	useDerivedValue( () => {
+		const x = dragPosition.x.value;
+		const y = dragPosition.y.value;
+		const prevX = prevDragPosition.x.value;
+		const prevY = prevDragPosition.y.value;
+		// `updateTargetBlockIndex` performs expensive calculations, so we throttle
+		// the call using a offset threshold based on the dragging position.
+		if (
+			Math.abs( x - prevX ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD ||
+			Math.abs( y - prevY ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD
+		) {
+			runOnJS( updateTargetBlockIndex )( { x, y } );
+			prevDragPosition.x.value = x;
+			prevDragPosition.y.value = y;
+			return true;
+		}
+		return false;
+	} );
+
 	return {
-		onBlockDragOver( event ) {
-			throttled( event );
+		onBlockDragOver( { x, y } ) {
+			dragPosition.x.value = x;
+			dragPosition.y.value = y;
+		},
+		onBlockDragOverWorklet( { x, y } ) {
+			'worklet';
+			dragPosition.x.value = x;
+			dragPosition.y.value = y;
 		},
 		onBlockDragEnd() {
-			throttled.cancel();
 			targetBlockIndex.value = null;
 		},
 		onBlockDrop: ( event ) => {

package/src/components/use-setting/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,7 @@ import { applyFilters } from '@wordpress/hooks';
  */
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
+import { getValueFromObjectPath } from '../../utils/object';
 
 const blockedPaths = [
 	'color',
@@ -165,11 +161,14 @@ export default function useSetting( path ) {
 							candidateClientId
 						);
 					result =
-						get(
+						getValueFromObjectPath(
 							candidateAtts,
 							`settings.blocks.${ blockName }.${ normalizedPath }`
 						) ??
-						get( candidateAtts, `settings.${ normalizedPath }` );
+						getValueFromObjectPath(
+							candidateAtts,
+							`settings.${ normalizedPath }`
+						);
 					if ( result !== undefined ) {
 						// Stop the search for more distant ancestors and move on.
 						break;
@@ -183,7 +182,8 @@ export default function useSetting( path ) {
 				const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
 				const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
 				result =
-					get( settings, blockPath ) ?? get( settings, defaultsPath );
+					getValueFromObjectPath( settings, blockPath ) ??
+					getValueFromObjectPath( settings, defaultsPath );
 			}
 
 			// Return if the setting was found in either the block instance or the store.

package/src/components/writing-flow/use-tab-nav.js

@@ -11,6 +11,7 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
 
 export default function useTabNav() {
 	const container = useRef();
@@ -116,41 +117,20 @@ export default function useTabNav() {
 				return;
 			}
 
+			const nextTabbable = focus.tabbable[ direction ]( event.target );
+
 			// We want to constrain the tabbing to the block and its child blocks.
 			// If the preceding form element is within a different block,
 			// such as two sibling image blocks in the placeholder state,
 			// we want shift + tab from the first form element to move to the image
 			// block toolbar and not the previous image block's form element.
-			// TODO: Should this become a utility function?
-			/**
-			 * Determine whether an element is part of or is the selected block.
-			 *
-			 * @param {Object} selectedBlockElement
-			 * @param {Object} element
-			 * @return {boolean} Whether the element is part of or is the selected block.
-			 */
-			const isElementPartOfSelectedBlock = (
-				selectedBlockElement,
-				element
-			) => {
-				// Check if the element is or is within the selected block by finding the
-				// closest element with a data-block attribute and seeing if
-				// it matches our current selected block ID
-				const elementBlockId = element
-					.closest( '[data-block]' )
-					?.getAttribute( 'data-block' );
-				const isElementSameBlock =
-					elementBlockId === getSelectedBlockClientId();
-
-				// Check if the element is a child of the selected block. This could be a
-				// child block in a group or column block, etc.
-				const isElementChildOfBlock =
-					selectedBlockElement.contains( element );
-
-				return isElementSameBlock || isElementChildOfBlock;
-			};
+			const currentBlock = event.target.closest( '[data-block]' );
+			const isElementPartOfSelectedBlock =
+				currentBlock &&
+				nextTabbable &&
+				( isInSameBlock( currentBlock, nextTabbable ) ||
+					isInsideRootBlock( currentBlock, nextTabbable ) );
 
-			const nextTabbable = focus.tabbable[ direction ]( event.target );
 			// Allow tabbing from the block wrapper to a form element,
 			// and between form elements rendered in a block and its child blocks,
 			// such as inside a placeholder. Form elements are generally
@@ -159,10 +139,7 @@ export default function useTabNav() {
 			// future they can be rendered in an iframe or shadow DOM.
 			if (
 				isFormElement( nextTabbable ) &&
-				isElementPartOfSelectedBlock(
-					event.target.closest( '[data-block]' ),
-					nextTabbable
-				)
+				isElementPartOfSelectedBlock
 			) {
 				return;
 			}

package/src/components/writing-mode-control/index.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { textHorizontal, textVertical } from '@wordpress/icons';
+
+const WRITING_MODES = [
+	{
+		name: __( 'Horizontal' ),
+		value: 'horizontal-tb',
+		icon: textHorizontal,
+	},
+	{
+		name: __( 'Vertical' ),
+		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
+		icon: textVertical,
+	},
+];
+
+/**
+ * Control to facilitate writing mode selections.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className Class name to add to the control.
+ * @param {string}   props.value     Currently selected writing mode.
+ * @param {Function} props.onChange  Handles change in the writing mode selection.
+ *
+ * @return {WPElement} Writing Mode control.
+ */
+export default function WritingModeControl( { className, value, onChange } ) {
+	return (
+		<fieldset
+			className={ classnames(
+				'block-editor-writing-mode-control',
+				className
+			) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Orientation' ) }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-writing-mode-control__buttons">
+				{ WRITING_MODES.map( ( writingMode ) => {
+					return (
+						<Button
+							key={ writingMode.value }
+							icon={ writingMode.icon }
+							label={ writingMode.name }
+							isPressed={ writingMode.value === value }
+							onClick={ () => {
+								onChange(
+									writingMode.value === value
+										? undefined
+										: writingMode.value
+								);
+							} }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}

package/src/components/writing-mode-control/style.scss

@@ -0,0 +1,18 @@
+.block-editor-writing-mode-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	.block-editor-writing-mode-control__buttons {
+		// 4px of padding makes the row 40px high, same as an input.
+		padding: $grid-unit-05 0;
+		display: flex;
+	}
+
+	.components-button.has-icon {
+		height: $grid-unit-40;
+		margin-right: $grid-unit-05;
+		min-width: $grid-unit-40;
+		padding: 0;
+	}
+}

package/src/hooks/behaviors.js

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -65,35 +66,40 @@ function BehaviorsControl( {
 		...behaviorsOptions,
 	];
 
+	const { behaviors, behaviorsValue } = useMemo( () => {
+		const mergedBehaviors = {
+			...themeBehaviors,
+			...( blockBehaviors || {} ),
+		};
+
+		let value = '';
+		if ( blockBehaviors === undefined ) {
+			value = 'default';
+		}
+		if ( blockBehaviors?.lightbox.enabled ) {
+			value = 'lightbox';
+		}
+		return {
+			behaviors: mergedBehaviors,
+			behaviorsValue: value,
+		};
+	}, [ blockBehaviors, themeBehaviors ] );
 	// If every behavior is disabled, do not show the behaviors inspector control.
 	if ( behaviorsOptions.length === 0 ) {
 		return null;
 	}
-	// Block behaviors take precedence over theme behaviors.
-	const behaviors = { ...themeBehaviors, ...( blockBehaviors || {} ) };
 
 	const helpText = disabled
 		? __( 'The lightbox behavior is disabled for linked images.' )
 		: '';
 
-	const value = () => {
-		if ( blockBehaviors === undefined ) {
-			return 'default';
-		}
-		if ( behaviors?.lightbox.enabled ) {
-			return 'lightbox';
-		}
-		return '';
-	};
-
 	return (
 		<InspectorControls group="advanced">
-			{ /* This div is needed to prevent a margin bottom between the dropdown and the button. */ }
 			<div>
 				<SelectControl
 					label={ __( 'Behaviors' ) }
 					// At the moment we are only supporting one behavior (Lightbox)
-					value={ value() }
+					value={ behaviorsValue }
 					options={ options }
 					onChange={ onChangeBehavior }
 					hideCancelButton={ true }
@@ -101,7 +107,7 @@ function BehaviorsControl( {
 					size="__unstable-large"
 					disabled={ disabled }
 				/>
-				{ behaviors?.lightbox.enabled && (
+				{ behaviorsValue === 'lightbox' && (
 					<SelectControl
 						label={ __( 'Animation' ) }
 						// At the moment we are only supporting one behavior (Lightbox)
@@ -115,7 +121,10 @@ function BehaviorsControl( {
 								value: 'zoom',
 								label: __( 'Zoom' ),
 							},
-							{ value: 'fade', label: 'Fade' },
+							{
+								value: 'fade',
+								label: __( 'Fade' ),
+							},
 						] }
 						onChange={ onChangeAnimation }
 						hideCancelButton={ false }

package/src/hooks/margin.js

@@ -23,7 +23,10 @@ export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	const margin = attributes?.style?.spacing?.margin;
 
 	useEffect( () => {
-		if ( ! blockElement ) {
+		if (
+			! blockElement ||
+			null === blockElement.ownerDocument.defaultView
+		) {
 			return;
 		}
 

package/src/hooks/padding.js

@@ -23,7 +23,10 @@ export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 	const padding = attributes?.style?.spacing?.padding;
 
 	useEffect( () => {
-		if ( ! blockElement ) {
+		if (
+			! blockElement ||
+			null === blockElement.ownerDocument.defaultView
+		) {
 			return;
 		}
 

package/src/hooks/supports.js

@@ -30,11 +30,17 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
  * decorations e.g. settings found in `block.json`.
  */
 const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+/**
+ * Key within block settings' supports array indicating support for writing mode
+ * e.g. settings found in `block.json`.
+ */
+const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 /**
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
  */
 const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+
 /**
  * Key within block settings' supports array indicating support for letter-spacing
  * e.g. settings found in `block.json`.
@@ -50,6 +56,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
+	WRITING_MODE_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
 ];
 const SPACING_SUPPORT_KEY = 'spacing';

package/src/hooks/typography.js

@@ -30,6 +30,7 @@ const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
@@ -39,6 +40,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_FAMILY_SUPPORT_KEY,
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
+	WRITING_MODE_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
 ];

package/src/hooks/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,7 +9,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { useSetting } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
-import { setImmutably } from '../utils/object';
+import { getValueFromObjectPath, setImmutably } from '../utils/object';
 
 /**
  * Removed falsy values from nested object.
@@ -79,7 +74,10 @@ export function transformStyles(
 	Object.entries( activeSupports ).forEach( ( [ support, isActive ] ) => {
 		if ( isActive ) {
 			migrationPaths[ support ].forEach( ( path ) => {
-				const styleValue = get( referenceBlockAttributes, path );
+				const styleValue = getValueFromObjectPath(
+					referenceBlockAttributes,
+					path
+				);
 				if ( styleValue ) {
 					returnBlock = {
 						...returnBlock,
@@ -136,6 +134,7 @@ export function useBlockSettings( name, parentLayout ) {
 	const lineHeight = useSetting( 'typography.lineHeight' );
 	const textColumns = useSetting( 'typography.textColumns' );
 	const textDecoration = useSetting( 'typography.textDecoration' );
+	const writingMode = useSetting( 'typography.writingMode' );
 	const textTransform = useSetting( 'typography.textTransform' );
 	const letterSpacing = useSetting( 'typography.letterSpacing' );
 	const padding = useSetting( 'spacing.padding' );
@@ -211,6 +210,7 @@ export function useBlockSettings( name, parentLayout ) {
 				textDecoration,
 				textTransform,
 				letterSpacing,
+				writingMode,
 			},
 			spacing: {
 				spacingSizes: {
@@ -244,6 +244,7 @@ export function useBlockSettings( name, parentLayout ) {
 		textDecoration,
 		textTransform,
 		letterSpacing,
+		writingMode,
 		padding,
 		margin,
 		blockGap,

package/src/private-apis.js

@@ -4,7 +4,8 @@
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
-import { getRichTextValues } from './components/rich-text/content';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
+import { kebabCase } from './utils/object';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
@@ -16,6 +17,12 @@ import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
 import { useLayoutClasses, useLayoutStyles } from './hooks';
+import DimensionsTool from './components/dimensions-tool';
+import ResolutionTool from './components/resolution-tool';
+import {
+	default as ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
+} from './components/inserter/reusable-block-rename-hint';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -25,6 +32,7 @@ lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
 	getRichTextValues,
+	kebabCase,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
@@ -37,4 +45,8 @@ lock( privateApis, {
 	BlockRemovalWarningModal,
 	useLayoutClasses,
 	useLayoutStyles,
+	DimensionsTool,
+	ResolutionTool,
+	ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
 } );

package/src/private-apis.native.js

@@ -3,6 +3,7 @@
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
+import { kebabCase } from './utils/object';
 import { lock } from './lock-unlock';
 
 /**
@@ -11,5 +12,6 @@ import { lock } from './lock-unlock';
 export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
+	kebabCase,
 	ExperimentalBlockEditorProvider,
 } );