@wordpress/block-editor 12.15.0 → 12.16.0

package/src/components/inserter-button/style.native.scss

@@ -0,0 +1,72 @@
+/** @format */
+.touchableArea {
+	border-radius: 8px 8px 8px 8px;
+}
+
+.disabled {
+	opacity: 0.3;
+}
+
+.modalIconWrapper {
+	width: 104px;
+	height: 64px;
+	background-color: $gray-light; //#f3f6f8
+	border-radius: 8px 8px 8px 8px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalIconWrapperDark {
+	background-color: rgba($white, 0.07);
+}
+
+.newIndicator {
+	height: 22;
+	left: 6;
+	position: absolute;
+	top: 6;
+	width: 22;
+}
+
+.modalIcon {
+	width: 32px;
+	height: 32px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalItemLabel {
+	background-color: transparent;
+	padding-left: 2;
+	padding-right: 2;
+	padding-top: 4;
+	padding-bottom: 0;
+	justify-content: center;
+	text-align: center;
+	font-size: 12;
+	color: $gray-dark;
+}
+
+.modalItemLabelDark {
+	color: $white;
+}
+
+.clipboardBlock {
+	background-color: transparent;
+	border-width: 1px;
+	border-color: $light-gray-400;
+}
+
+.clipboardBlockDark {
+	border-color: $gray-70;
+}
+
+.modalItem {
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	padding-left: $grid-unit-20 * 0.5;
+	padding-right: $grid-unit-20 * 0.5;
+	padding-top: 0;
+	padding-bottom: 0;
+}

package/src/components/inserter-draggable-blocks/index.js

@@ -2,19 +2,24 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import { serialize, store as blocksStore } from '@wordpress/blocks';
+import {
+	createBlock,
+	serialize,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
+import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const InserterDraggableBlocks = ( {
 	isEnabled,
 	blocks,
 	icon,
 	children,
-	isPattern,
+	pattern,
 } ) => {
 	const transferData = {
 		type: 'inserter',
@@ -36,13 +41,21 @@ const InserterDraggableBlocks = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				event.dataTransfer.setData( 'text/html', serialize( blocks ) );
+				const parsedBlocks =
+					pattern?.type === PATTERN_TYPES.user &&
+					pattern?.syncStatus !== 'unsynced'
+						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+						: blocks;
+				event.dataTransfer.setData(
+					'text/html',
+					serialize( parsedBlocks )
+				);
 			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }
-					icon={ icon || ( ! isPattern && blockTypeIcon ) }
-					isPattern={ isPattern }
+					icon={ icon || ( ! pattern && blockTypeIcon ) }
+					isPattern={ !! pattern }
 				/>
 			}
 		>

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

@@ -12,7 +12,10 @@ import { useEffect, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import groups from './groups';
 
 export default function InspectorControlsFill( {
@@ -33,13 +36,13 @@ export default function InspectorControlsFill( {
 		group = __experimentalGroup;
 	}
 
-	const isDisplayed = useDisplayBlockControls();
+	const context = useBlockEditContext();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 

package/src/components/inspector-controls/fill.native.js

@@ -15,7 +15,10 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import groups from './groups';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
@@ -35,14 +38,14 @@ export default function InspectorControlsFill( {
 		);
 		group = __experimentalGroup;
 	}
-	const isDisplayed = useDisplayBlockControls();
+	const context = useBlockEditContext();
 
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 

package/src/components/link-control/style.scss

@@ -74,7 +74,7 @@ $preview-image-height: 140px;
 		border-radius: $radius-block-ui;
 		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
-		padding: $grid-unit-10 $grid-unit-20;
+		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
 		position: relative;
 		width: 100%;
 	}

package/src/components/link-control/test/index.js

@@ -2140,7 +2140,7 @@ describe( 'Post types', () => {
 describe( 'Rich link previews', () => {
 	const selectedLink = {
 		id: '1',
-		title: 'Wordpress.org', // Customize this for differentiation in assertions.
+		title: 'WordPress.org', // Customize this for differentiation in assertions.
 		url: 'https://www.wordpress.org',
 		type: 'URL',
 	};

package/src/components/navigable-toolbar/README.md

@@ -8,6 +8,8 @@ The component accepts the following props. Props not included in this set will b
 
 ## `focusOnMount`
 
+_Note: this prop is deprecated._
+
 Whether to immediately focus when the component mounts.
 
 - Type: `Boolean`

package/src/components/navigable-toolbar/index.js

@@ -162,7 +162,7 @@ function useToolbarFocus( {
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};
-	}, [ initialIndex, initialFocusOnMount, toolbarRef ] );
+	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
 
 	const { lastFocus } = useSelect( ( select ) => {
 		const { getLastFocus } = select( blockEditorStore );
@@ -210,9 +210,9 @@ export default function NavigableToolbar( {
 	useToolbarFocus( {
 		toolbarRef,
 		focusOnMount,
-		isAccessibleToolbar,
 		defaultIndex: initialIndex,
 		onIndexChange,
+		isAccessibleToolbar,
 		shouldUseKeyboardFocusShortcut,
 		focusEditorOnEscape,
 	} );

package/src/components/preview-options/index.js

@@ -1,91 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check, desktop, mobile, tablet } from '@wordpress/icons';
-
-export default function PreviewOptions( {
-	children,
-	viewLabel,
-	className,
-	isEnabled = true,
-	deviceType,
-	setDeviceType,
-	label,
-	showIconLabels,
-} ) {
-	const isMobile = useViewportMatch( 'small', '<' );
-	if ( isMobile ) return null;
-
-	const popoverProps = {
-		className: classnames(
-			className,
-			'block-editor-post-preview__dropdown-content'
-		),
-		placement: 'bottom-end',
-	};
-	const toggleProps = {
-		className: 'block-editor-post-preview__button-toggle',
-		disabled: ! isEnabled,
-		__experimentalIsFocusable: ! isEnabled,
-		children: viewLabel,
-		showTooltip: ! showIconLabels,
-	};
-	const menuProps = {
-		'aria-label': __( 'View options' ),
-	};
-
-	const deviceIcons = {
-		mobile,
-		tablet,
-		desktop,
-	};
+import deprecated from '@wordpress/deprecated';
 
-	return (
-		<DropdownMenu
-			className="block-editor-post-preview__dropdown"
-			popoverProps={ popoverProps }
-			toggleProps={ toggleProps }
-			menuProps={ menuProps }
-			icon={ deviceIcons[ deviceType.toLowerCase() ] }
-			label={ label || __( 'Preview' ) }
-			disableOpenOnArrowDown={ ! isEnabled }
-		>
-			{ ( renderProps ) => (
-				<>
-					<MenuGroup>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
-					</MenuGroup>
-					{ children?.( renderProps ) }
-				</>
-			) }
-		</DropdownMenu>
-	);
+export default function PreviewOptions() {
+	deprecated( 'wp.blockEditor.PreviewOptions', {
+		version: '6.5',
+	} );
+	return null;
 }

package/src/components/rich-text/content.js

@@ -5,36 +5,43 @@ import { RawHTML } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * Internal dependencies
+ */
+import RichText from './';
+
 /**
  * Internal dependencies
  */
 import { getMultilineTag } from './utils';
 
-export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
+export function Content( {
+	value,
+	tagName: Tag,
+	multiline,
+	format,
+	...props
+} ) {
+	if ( RichText.isEmpty( value ) ) {
+		const MultilineTag = getMultilineTag( multiline );
+		value = MultilineTag ? <MultilineTag /> : null;
+	} else if ( Array.isArray( value ) ) {
 		deprecated( 'wp.blockEditor.RichText value prop as children type', {
 			since: '6.1',
 			version: '6.3',
 			alternative: 'value prop as string',
 			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
 		} );
-
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
-
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
+		value = <RawHTML>{ childrenSource.toHTML( value ) }</RawHTML>;
+	} else if ( typeof value === 'string' ) {
+		// To do: deprecate.
+		value = <RawHTML>{ value }</RawHTML>;
+	} else {
+		// To do: create a toReactComponent method on RichTextData, which we
+		// might in the future also use for the editable tree. See
+		// https://github.com/WordPress/gutenberg/pull/41655.
+		value = <RawHTML>{ value.toHTMLString() }</RawHTML>;
 	}
 
-	return content;
-};
+	return Tag ? <Tag { ...props }>{ value }</Tag> : value;
+}

package/src/components/rich-text/get-rich-text-values.js

@@ -6,6 +6,7 @@ import {
 	getSaveElement,
 	__unstableGetBlockProps as getBlockProps,
 } from '@wordpress/blocks';
+import { RichTextData } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -95,5 +96,9 @@ export function getRichTextValues( blocks = [] ) {
 	const values = [];
 	addValuesForBlocks( values, blocks );
 	getBlockProps.skipFilters = false;
-	return values;
+	return values.map( ( value ) =>
+		value instanceof RichTextData
+			? value
+			: RichTextData.fromHTMLString( value )
+	);
 }

package/src/components/rich-text/index.js

@@ -13,14 +13,11 @@ import {
 	createContext,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { children as childrenSource } from '@wordpress/blocks';
-import { useInstanceId, useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
-	__unstableCreateElement,
 	removeFormat,
 } from '@wordpress/rich-text';
-import deprecated from '@wordpress/deprecated';
 import { Popover } from '@wordpress/components';
 
 /**
@@ -46,7 +43,7 @@ import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content } from './content';
-import RichTextMultiline from './multiline';
+import { withDeprecations } from './with-deprecations';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -387,47 +384,9 @@ export function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextWrapper = forwardRef( RichTextWrapper );
-
-function RichTextSwitcher( props, ref ) {
-	let value = props.value;
-	let onChange = props.onChange;
-
-	// Handle deprecated format.
-	if ( Array.isArray( value ) ) {
-		deprecated( 'wp.blockEditor.RichText value prop as children type', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'value prop as string',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
-		} );
-
-		value = childrenSource.toHTML( props.value );
-		onChange = ( newValue ) =>
-			props.onChange(
-				childrenSource.fromDOM(
-					__unstableCreateElement( document, newValue ).childNodes
-				)
-			);
-	}
-
-	const Component = props.multiline
-		? RichTextMultiline
-		: ForwardedRichTextWrapper;
-	const instanceId = useInstanceId( RichTextSwitcher );
-
-	return (
-		<Component
-			{ ...props }
-			identifier={ props.identifier || instanceId }
-			value={ value }
-			onChange={ onChange }
-			ref={ ref }
-		/>
-	);
-}
-
-const ForwardedRichTextContainer = forwardRef( RichTextSwitcher );
+const ForwardedRichTextContainer = withDeprecations(
+	forwardRef( RichTextWrapper )
+);
 
 ForwardedRichTextContainer.Content = Content;
 ForwardedRichTextContainer.isEmpty = ( value ) => {

package/src/components/rich-text/index.native.js

@@ -39,17 +39,17 @@ import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import {
 	addActiveFormats,
-	getMultilineTag,
 	getAllowedFormats,
 	createLinkInParagraph,
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
 import { Content } from './content';
 import RichText from './native';
+import { withDeprecations } from './with-deprecations';
 
 const classes = 'block-editor-rich-text__editable';
 
-function RichTextWrapper(
+export function RichTextWrapper(
 	{
 		children,
 		tagName,
@@ -58,7 +58,6 @@ function RichTextWrapper(
 		value: originalValue,
 		onChange: originalOnChange,
 		isSelected: originalIsSelected,
-		multiline,
 		inlineToolbar,
 		wrapperClassName,
 		autocompleters,
@@ -80,7 +79,6 @@ function RichTextWrapper(
 		disableLineBreaks,
 		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
-		__unstableMultilineRootTag,
 		// Native props.
 		__unstableMobileNoFocusOnMount,
 		deleteEnter,
@@ -179,7 +177,6 @@ function RichTextWrapper(
 		selectionChange,
 		__unstableMarkAutomaticChange,
 	} = useDispatch( blockEditorStore );
-	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
 		disableFormats,
@@ -261,10 +258,7 @@ function RichTextWrapper(
 			if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
 				blocks.push(
 					onSplit(
-						toHTMLString( {
-							value: before,
-							multilineTag,
-						} ),
+						toHTMLString( { value: before } ),
 						! isAfterOriginal
 					)
 				);
@@ -288,13 +282,7 @@ function RichTextWrapper(
 					: ! onSplitMiddle || ! isEmpty( after )
 			) {
 				blocks.push(
-					onSplit(
-						toHTMLString( {
-							value: after,
-							multilineTag,
-						} ),
-						isAfterOriginal
-					)
+					onSplit( toHTMLString( { value: after } ), isAfterOriginal )
 				);
 			}
 
@@ -308,7 +296,7 @@ function RichTextWrapper(
 
 			onReplace( blocks, indexToSelect, initialPosition );
 		},
-		[ onReplace, onSplit, multilineTag, onSplitMiddle ]
+		[ onReplace, onSplit, onSplitMiddle ]
 	);
 
 	const onEnter = useCallback(
@@ -370,7 +358,6 @@ function RichTextWrapper(
 			onReplace,
 			onSplit,
 			__unstableMarkAutomaticChange,
-			multiline,
 			splitValue,
 			onSplitAtEnd,
 		]
@@ -392,9 +379,6 @@ function RichTextWrapper(
 			if ( isInternal ) {
 				const pastedValue = create( {
 					html,
-					multilineTag,
-					multilineWrapperTags:
-						multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
 					preserveWhiteSpace,
 				} );
 				addActiveFormats( pastedValue, activeFormats );
@@ -496,7 +480,6 @@ function RichTextWrapper(
 			onSplit,
 			splitValue,
 			__unstableEmbedURLOnPaste,
-			multilineTag,
 			preserveWhiteSpace,
 			pastePlainText,
 		]
@@ -568,7 +551,6 @@ function RichTextWrapper(
 			onPaste={ onPaste }
 			__unstableIsSelected={ isSelected }
 			__unstableInputRule={ inputRule }
-			__unstableMultilineTag={ multilineTag }
 			__unstableOnEnterFormattedText={ enterFormattedText }
 			__unstableOnExitFormattedText={ exitFormattedText }
 			__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }
@@ -582,7 +564,6 @@ function RichTextWrapper(
 			__unstableAllowPrefixTransformations={
 				__unstableAllowPrefixTransformations
 			}
-			__unstableMultilineRootTag={ __unstableMultilineRootTag }
 			// Native props.
 			blockIsSelected={
 				originalIsSelected !== undefined
@@ -675,7 +656,9 @@ function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
+const ForwardedRichTextContainer = withDeprecations(
+	forwardRef( RichTextWrapper )
+);
 
 ForwardedRichTextContainer.Content = Content;