@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/spacing-sizes-control/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -75,7 +70,7 @@ export function getPresetValueFromCustomValue( value, spacingSizes ) {
  *
  * @param {string} value Value to convert.
  *
- * @return {string} CSS var string for given spacing preset value.
+ * @return {string | undefined} CSS var string for given spacing preset value.
  */
 export function getSpacingPresetCssVar( value ) {
 	if ( ! value ) {
@@ -211,5 +206,5 @@ export function isValuesDefined( values ) {
 	if ( values === undefined || values === null ) {
 		return false;
 	}
-	return ! isEmpty( Object.values( values ).filter( ( value ) => !! value ) );
+	return Object.values( values ).filter( ( value ) => !! value ).length > 0;
 }

package/src/components/tool-selector/index.js

@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>

package/src/components/url-input/README.md

@@ -160,6 +160,10 @@ When hiding the URLInput using CSS (as is sometimes done for accessibility purpo
 
 This prop allows the suggestions list to be programmatically not rendered by passing a boolean—it can be `true` to make sure suggestions aren't rendered, or `false`/`undefined` to fall back to the default behaviour of showing suggestions when matching autocompletion items are found.
 
+### `__nextHasNoMarginBottom: Boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
 ## Example
 
 {% codetabs %}
@@ -217,6 +221,7 @@ registerBlockType( /* ... */, {
 	edit( { className, attributes, setAttributes } ) {
 		return (
 			<URLInput
+				__nextHasNoMarginBottom
 				className={ className }
 				value={ attributes.url }
 				onChange={ ( url, post ) => setAttributes( { url, text: (post && post.title) || 'Click here' } ) }

package/src/components/url-input/button.js

@@ -57,6 +57,7 @@ class URLInputButton extends Component {
 								onClick={ this.toggle }
 							/>
 							<URLInput
+								__nextHasNoMarginBottom
 								value={ url || '' }
 								onChange={ onChange }
 							/>

package/src/components/url-input/index.js

@@ -7,6 +7,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
@@ -424,6 +425,8 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
+			/** Start opting into the new margin-free styles that will become the default in a future version. */
+			__nextHasNoMarginBottom = false,
 			label = null,
 			className,
 			isFullWidth,
@@ -477,8 +480,19 @@ class URLInput extends Component {
 			return renderControl( controlProps, inputProps, loading );
 		}
 
+		if ( ! __nextHasNoMarginBottom ) {
+			deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', {
+				since: '6.2',
+				version: '6.5',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			} );
+		}
+
 		return (
-			<BaseControl { ...controlProps }>
+			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				{ ...controlProps }
+			>
 				<input { ...inputProps } />
 				{ loading && <Spinner /> }
 			</BaseControl>

package/src/components/url-input/test/button.js

@@ -4,13 +4,16 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import URLInputButton from '../button';
 
-jest.useFakeTimers();
-
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );
@@ -57,9 +60,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should render a form when `Insert link` button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render( <URLInputButton /> );
 
 		// Click the button to insert a link.
@@ -76,9 +77,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should call `onChange` function once per each value change', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onChangeMock = jest.fn();
 
 		render( <URLInputButton onChange={ onChangeMock } /> );
@@ -104,9 +103,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should close the form when the user clicks the `Close` button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <URLInputButton /> );
 
@@ -135,12 +132,15 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should close the form when user submits it', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onChangeMock = jest.fn();
+		const user = userEvent.setup();
 
-		render( <URLInputButton onChange={ onChangeMock } /> );
+		function TestURLInputButton() {
+			// maintain state for the controlled component and process value changes
+			const [ url, setUrl ] = useState( '' );
+			return <URLInputButton url={ url } onChange={ setUrl } />;
+		}
+
+		render( <TestURLInputButton /> );
 
 		// Click the button to insert a link.
 		await user.click(
@@ -153,15 +153,15 @@ describe( 'URLInputButton', () => {
 		// Type something into the URL field.
 		await user.type( screen.getByRole( 'combobox' ), 'foo' );
 
+		const submitButton = screen.getByRole( 'button', {
+			name: 'Submit',
+		} );
+
+		expect( submitButton ).toBeInTheDocument();
+
 		// Submit the form.
-		await user.click(
-			screen.getByRole( 'button', {
-				name: 'Submit',
-			} )
-		);
+		await user.click( submitButton );
 
-		expect(
-			screen.queryByRole( 'button', { name: 'Submit' } )
-		).not.toBeInTheDocument();
+		expect( submitButton ).not.toBeInTheDocument();
 	} );
 } );

package/src/components/url-popover/image-url-input-ui.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,6 +12,7 @@ import {
 	TextControl,
 	SVG,
 	Path,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { link as linkIcon, close } from '@wordpress/icons';
 
@@ -214,23 +210,26 @@ const ImageURLInputUI = ( {
 	};
 
 	const advancedOptions = (
-		<>
+		<VStack spacing="3">
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link CSS Class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }
 			/>
-		</>
+		</VStack>
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;
@@ -260,7 +259,7 @@ const ImageURLInputUI = ( {
 					additionalControls={
 						! linkEditorValue && (
 							<NavigableMenu>
-								{ map( getLinkDestinations(), ( link ) => (
+								{ getLinkDestinations().map( ( link ) => (
 									<MenuItem
 										key={ link.linkDestination }
 										icon={ link.icon }

package/src/components/url-popover/link-editor.js

@@ -31,6 +31,7 @@ export default function LinkEditor( {
 			{ ...props }
 		>
 			<URLInput
+				__nextHasNoMarginBottom
 				value={ value }
 				onChange={ onChangeInputValue }
 				autocompleteRef={ autocompleteRef }

package/src/components/url-popover/style.scss

@@ -52,12 +52,6 @@
 		transform: rotate(180deg);
 	}
 }
-.block-editor-url-popover__input-container {
-	.components-base-control:last-child,
-	.components-base-control:last-child .components-base-control__field {
-		margin-bottom: 0;
-	}
-}
 
 .block-editor-url-popover__settings {
 	display: block;
@@ -68,10 +62,6 @@
 .block-editor-url-popover__link-editor,
 .block-editor-url-popover__link-viewer {
 	display: flex;
-
-	.block-editor-url-input .components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-url-popover__link-viewer-url {

package/src/components/use-block-display-information/index.js

@@ -34,7 +34,7 @@ import { store as blockEditorStore } from '../../store';
  * 1. Block's client id to extract it's current attributes.
  * 2. A block variation should have set `isActive` prop to a proper function.
  *
- * If for any reason a block variaton match cannot be found,
+ * If for any reason a block variation match cannot be found,
  * the returned information come from the Block Type.
  * If no blockType is found with the provided clientId, returns null.
  *

package/src/components/use-paste-styles/index.js

@@ -0,0 +1,230 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { getBlockType, parse } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import {
+	hasAlignSupport,
+	hasBorderSupport,
+	hasBackgroundColorSupport,
+	hasTextColorSupport,
+	hasGradientSupport,
+	hasCustomClassNameSupport,
+	hasFontFamilySupport,
+	hasFontSizeSupport,
+	hasLayoutSupport,
+	hasStyleSupport,
+} from '../../hooks/supports';
+
+/**
+ * Determine if the copied text looks like serialized blocks or not.
+ * Since plain text will always get parsed into a freeform block,
+ * we check that if the parsed blocks is anything other than that.
+ *
+ * @param {string} text The copied text.
+ * @return {boolean} True if the text looks like serialized blocks, false otherwise.
+ */
+function hasSerializedBlocks( text ) {
+	try {
+		const blocks = parse( text, {
+			__unstableSkipMigrationLogs: true,
+			__unstableSkipAutop: true,
+		} );
+		if ( blocks.length === 1 && blocks[ 0 ].name === 'core/freeform' ) {
+			// It's likely that the text is just plain text and not serialized blocks.
+			return false;
+		}
+		return true;
+	} catch ( err ) {
+		// Parsing error, the text is not serialized blocks.
+		// (Even though that it technically won't happen)
+		return false;
+	}
+}
+
+/**
+ * Style attributes are attributes being added in `block-editor/src/hooks/*`.
+ * (Except for some unrelated to style like `anchor` or `settings`.)
+ * They generally represent the default block supports.
+ */
+const STYLE_ATTRIBUTES = {
+	align: hasAlignSupport,
+	borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ),
+	backgroundColor: hasBackgroundColorSupport,
+	textColor: hasTextColorSupport,
+	gradient: hasGradientSupport,
+	className: hasCustomClassNameSupport,
+	fontFamily: hasFontFamilySupport,
+	fontSize: hasFontSizeSupport,
+	layout: hasLayoutSupport,
+	style: hasStyleSupport,
+};
+
+/**
+ * Get the "style attributes" from a given block to a target block.
+ *
+ * @param {WPBlock} sourceBlock The source block.
+ * @param {WPBlock} targetBlock The target block.
+ * @return {Object} the filtered attributes object.
+ */
+function getStyleAttributes( sourceBlock, targetBlock ) {
+	return Object.entries( STYLE_ATTRIBUTES ).reduce(
+		( attributes, [ attributeKey, hasSupport ] ) => {
+			// Only apply the attribute if both blocks support it.
+			if (
+				hasSupport( sourceBlock.name ) &&
+				hasSupport( targetBlock.name )
+			) {
+				// Override attributes that are not present in the block to their defaults.
+				attributes[ attributeKey ] =
+					sourceBlock.attributes[ attributeKey ];
+			}
+			return attributes;
+		},
+		{}
+	);
+}
+
+/**
+ * Update the target blocks with style attributes recursively.
+ *
+ * @param {WPBlock[]} targetBlocks          The target blocks to be updated.
+ * @param {WPBlock[]} sourceBlocks          The source blocks to get th style attributes from.
+ * @param {Function}  updateBlockAttributes The function to update the attributes.
+ */
+function recursivelyUpdateBlockAttributes(
+	targetBlocks,
+	sourceBlocks,
+	updateBlockAttributes
+) {
+	for (
+		let index = 0;
+		index < Math.min( sourceBlocks.length, targetBlocks.length );
+		index += 1
+	) {
+		updateBlockAttributes(
+			targetBlocks[ index ].clientId,
+			getStyleAttributes( sourceBlocks[ index ], targetBlocks[ index ] )
+		);
+
+		recursivelyUpdateBlockAttributes(
+			targetBlocks[ index ].innerBlocks,
+			sourceBlocks[ index ].innerBlocks,
+			updateBlockAttributes
+		);
+	}
+}
+
+/**
+ * A hook to return a pasteStyles event function for handling pasting styles to blocks.
+ *
+ * @return {Function} A function to update the styles to the blocks.
+ */
+export default function usePasteStyles() {
+	const registry = useRegistry();
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { createSuccessNotice, createWarningNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	return useCallback(
+		async ( targetBlocks ) => {
+			let html = '';
+			try {
+				// `http:` sites won't have the clipboard property on navigator.
+				// (with the exception of localhost.)
+				if ( ! window.navigator.clipboard ) {
+					createErrorNotice(
+						__(
+							'Unable to paste styles. This feature is only available on secure (https) sites in supporting browsers.'
+						),
+						{ type: 'snackbar' }
+					);
+					return;
+				}
+
+				html = await window.navigator.clipboard.readText();
+			} catch ( error ) {
+				// Possibly the permission is denied.
+				createErrorNotice(
+					__(
+						'Unable to paste styles. Please allow browser clipboard permissions before continuing.'
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			// Abort if the copied text is empty or doesn't look like serialized blocks.
+			if ( ! html || ! hasSerializedBlocks( html ) ) {
+				createWarningNotice(
+					__(
+						"Unable to paste styles. Block styles couldn't be found within the copied content."
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			const copiedBlocks = parse( html );
+
+			if ( copiedBlocks.length === 1 ) {
+				// Apply styles of the block to all the target blocks.
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						targetBlocks.map( () => copiedBlocks[ 0 ] ),
+						updateBlockAttributes
+					);
+				} );
+			} else {
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						copiedBlocks,
+						updateBlockAttributes
+					);
+				} );
+			}
+
+			if ( targetBlocks.length === 1 ) {
+				const title = getBlockType( targetBlocks[ 0 ].name )?.title;
+				createSuccessNotice(
+					sprintf(
+						// Translators: Name of the block being pasted, e.g. "Paragraph".
+						__( 'Pasted styles to %s.' ),
+						title
+					),
+					{ type: 'snackbar' }
+				);
+			} else {
+				createSuccessNotice(
+					sprintf(
+						// Translators: The number of the blocks.
+						__( 'Pasted styles to %d blocks.' ),
+						targetBlocks.length
+					),
+					{ type: 'snackbar' }
+				);
+			}
+		},
+		[
+			registry.batch,
+			updateBlockAttributes,
+			createSuccessNotice,
+			createWarningNotice,
+			createErrorNotice,
+		]
+	);
+}

package/src/components/warning/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import Warning from '../index';
 
-jest.useFakeTimers();
-
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
 		const { container } = render( <Warning>error</Warning> );
@@ -33,9 +31,7 @@ describe( 'Warning', () => {
 	} );
 
 	it( 'should show hidden secondary actions', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<Warning secondaryActions={ [ { title: 'test', onClick: null } ] }>

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

@@ -167,6 +167,12 @@ export default function useArrowNav() {
 		}
 
 		function onKeyDown( event ) {
+			// Abort if navigation has already been handled (e.g. RichText
+			// inline boundaries).
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
 			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
 				event;
 			const isUp = keyCode === UP;
@@ -182,24 +188,20 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			if ( ! isNav ) {
+				return;
+			}
+
 			// If there is a multi-selection, the arrow keys should collapse the
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
-				// Only handle if we have a full selection (not a native partial
-				// selection).
-				if ( ! __unstableIsFullySelected() ) {
-					return;
-				}
-
-				if ( event.defaultPrevented ) {
-					return;
-				}
-
-				if ( ! isNav ) {
+				if ( shiftKey ) {
 					return;
 				}
 
-				if ( shiftKey ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
 					return;
 				}
 
@@ -214,6 +216,12 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// Abort if our current target is not a candidate for navigation
+			// (e.g. preserve native input behaviors).
+			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
+				return;
+			}
+
 			// When presing any key other than up or down, the initial vertical
 			// position must ALWAYS be reset. The vertical position is saved so
 			// it can be restored as well as possible on sebsequent vertical
@@ -227,22 +235,6 @@ export default function useArrowNav() {
 				verticalRect = computeCaretRect( defaultView );
 			}
 
-			// Abort if navigation has already been handled (e.g. RichText
-			// inline boundaries).
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if ( ! isNav ) {
-				return;
-			}
-
-			// Abort if our current target is not a candidate for navigation
-			// (e.g. preserve native input behaviors).
-			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
-				return;
-			}
-
 			// In the case of RTL scripts, right means previous and left means
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;

package/src/content.scss

@@ -1,10 +1,18 @@
+@import "./components/block-icon/content.scss";
 @import "./components/block-list/content.scss";
 @import "./components/block-list-appender/content.scss";
 @import "./components/block-content-overlay/content.scss";
 @import "./components/block-draggable/content.scss";
 @import "./components/block-preview/content.scss";
+@import "./components/block-variation-picker/content.scss";
+@import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";
 @import "./components/rich-text/content.scss";
+@import "./components/warning/content.scss";
+
+// To do: ideally the iframe does not contain UI, but there's still the block
+// placeholders that will be moved to shadow DOM in the future.
+@include wordpress-admin-schemes();

package/src/experiments.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+/**
+ * Internal dependencies
+ */
+import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
+import OffCanvasEditor from './components/off-canvas-editor';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/block-editor'
+	);
+
+/**
+ * Experimental @wordpress/block-editor APIs.
+ */
+export const experiments = {};
+lock( experiments, {
+	...globalStyles,
+	ExperimentalBlockEditorProvider,
+	OffCanvasEditor,
+} );