@wordpress/block-editor 12.3.4 → 12.5.0

package/src/components/panel-color-settings/README.md

@@ -0,0 +1,98 @@
+# PanelColorSettings
+
+`PanelColorSettings` is a React component that renders a UI for managing various color settings.
+It is essentially a wrapper around the `PanelColorGradientSettings` component, but specifically disables the gradient features.
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import { PanelColorSettings } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+// ...
+
+const MyPanelColorSettings = () => {
+	const [ textColor, setTextColor ] = useState( { color: '#000' } );
+	const [ backgroundColor, setBackgroundColor ] = useState( {
+		color: '#fff',
+	} );
+	const [ overlayTextColor, setOverlayTextColor ] = useState( {
+		color: '#000',
+	} );
+	const [ overlayBackgroundColor, setOverlayBackgroundColor ] = useState( {
+		color: '#eee',
+	} );
+
+	return (
+		<PanelColorSettings
+			__experimentalIsRenderedInSidebar
+			title={ __( 'Color' ) }
+			colorSettings={ [
+				{
+					value: textColor.color,
+					onChange: setTextColor,
+					label: __( 'Text' ),
+				},
+				{
+					value: backgroundColor.color,
+					onChange: setBackgroundColor,
+					label: __( 'Background' ),
+				},
+				{
+					value: overlayTextColor.color,
+					onChange: setOverlayTextColor,
+					label: __( 'Submenu & overlay text' ),
+				},
+				{
+					value: overlayBackgroundColor.color,
+					onChange: setOverlayBackgroundColor,
+					label: __( 'Submenu & overlay background' ),
+				},
+			] }
+		/>
+	);
+};
+
+/// ...
+
+<MyPanelColorSettings />;
+```
+
+## Props
+
+The component accepts the following props:
+
+### colorSettings
+
+A user-provided set of color settings.
+
+- Type: `Array`
+- Required: No
+
+Colors settings are provided as an array of objects with the following schema:
+
+| Property | Description                       | Type     |
+| -------- | --------------------------------- | -------- |
+| value    | The current color of the setting  | string   |
+| onChange | Callback on change of the setting | Function |
+| label    | Label of the setting              | string   |
+
+Additionally, the following `PanelColorGradientSettings` props are supported and directly passed down to the underlying `PanelColorGradientSettings` instance:
+
+- `className` - added to the underlying `ToolsPanel` instance.
+- `colors` - array of colors to be used.
+- `gradients` - not recommended to be used since `PanelColorSettings` resets it.
+- `disableCustomColors` - whether addition of custom colors is enabled
+- `disableCustomGradients` - not recommended to be used since `PanelColorSettings` sets it.
+- `children` - displayed below the underlying `PanelColorGradientSettings` instance.
+- `settings` - not recommended to be used, since `PanelColorSettings` builds it from the `colorSettings` prop.
+- `title` - title of the underlying `ToolsPanel`.
+- `showTitle` - whether to show the title of the `ToolsPanel`.
+- `__experimentalIsRenderedInSidebar`
+- `enableAlpha` - whether to enable setting opacity when specifying a color.
+
+Please refer to the `PanelColorGradientSettings` component for more information.

package/src/components/provider/index.js

@@ -28,9 +28,16 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 					...settings,
 					__internalIsInitialized: true,
 				},
-				stripExperimentalSettings
+				{
+					stripExperimentalSettings,
+					reset: true,
+				}
 			);
-		}, [ settings ] );
+		}, [
+			settings,
+			stripExperimentalSettings,
+			__experimentalUpdateSettings,
+		] );
 
 		// Syncs the entity provider with changes in the block-editor store.
 		useBlockSync( props );

package/src/components/recursion-provider/README.md

@@ -0,0 +1,101 @@
+# RecursionProvider
+
+According to Gutenberg's block rendering architecture, any block type capable of recursion should be responsible for handling its own infinite loops. 
+
+To help with detecting infinite loops on the client, the `RecursionProvider` component and the `useHasRecursion()` hook are used to identify if a block has already been rendered. 
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
+	useBlockProps,
+	Warning,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function MyRecursiveBlockEdit( { attributes: { ref } } ) {
+	const hasAlreadyRendered = useHasRecursion( ref );
+	const blockProps = useBlockProps( {
+		className: 'my-block__custom-class',
+	} );
+
+	if ( hasAlreadyRendered ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __( 'Block cannot be rendered inside itself.' ) }
+				</Warning>
+			</div>
+		);
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			Block editing code here....
+		</RecursionProvider>
+	);
+}
+
+/// ...
+
+<MyRecursiveBlockEdit />;
+```
+
+## Props
+
+The component accepts the following props:
+
+### uniqueId
+
+Any value that acts as a unique identifier for a block instance.
+
+- Type: `any`
+- Required: Yes
+
+### children
+
+Components to be rendered as content.
+
+- Type: `Element`
+- Required: Yes.
+
+### blockName
+
+Optional block name.
+
+- Type: `String`
+- Required: No
+- Default: ''
+
+# `useHasRecursion()`
+
+Used in conjunction with `RecursionProvider`, this hook is used to identify if a block has already been rendered.
+
+## Usage
+
+For example usage, refer to the example above.
+
+## Props
+
+The component accepts the following props:
+
+### uniqueId
+
+Any value that acts as a unique identifier for a block instance.
+
+- Type: `any`
+- Required: Yes
+
+### blockName
+
+Optional block name.
+
+- Type: `String`
+- Required: No
+- Default: ''
+

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/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

@@ -136,6 +136,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 +212,7 @@ export function useBlockSettings( name, parentLayout ) {
 				textDecoration,
 				textTransform,
 				letterSpacing,
+				writingMode,
 			},
 			spacing: {
 				spacingSizes: {
@@ -244,6 +246,7 @@ export function useBlockSettings( name, parentLayout ) {
 		textDecoration,
 		textTransform,
 		letterSpacing,
+		writingMode,
 		padding,
 		margin,
 		blockGap,

package/src/private-apis.js

@@ -5,6 +5,7 @@ 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 { kebabCase } from './utils/object';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
@@ -27,6 +28,7 @@ lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
 	getRichTextValues,
+	kebabCase,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,

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,
 } );