@wordpress/block-editor 11.6.0 → 11.8.0

package/src/components/media-replace-flow/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -58,6 +63,7 @@ const MediaReplaceFlow = ( {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
+	const canUpload = !! mediaUpload;
 	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
@@ -152,7 +158,7 @@ const MediaReplaceFlow = ( {
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
-						<>
+						<MediaUploadCheck>
 							<MediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
@@ -171,28 +177,26 @@ const MediaReplaceFlow = ( {
 									</MenuItem>
 								) }
 							/>
-							<MediaUploadCheck>
-								<FormFileUpload
-									onChange={ ( event ) => {
-										uploadFiles( event, onClose );
-									} }
-									accept={ accept }
-									multiple={ multiple }
-									render={ ( { openFileDialog } ) => {
-										return (
-											<MenuItem
-												icon={ upload }
-												onClick={ () => {
-													openFileDialog();
-												} }
-											>
-												{ __( 'Upload' ) }
-											</MenuItem>
-										);
-									} }
-								/>
-							</MediaUploadCheck>
-						</>
+							<FormFileUpload
+								onChange={ ( event ) => {
+									uploadFiles( event, onClose );
+								} }
+								accept={ accept }
+								multiple={ multiple }
+								render={ ( { openFileDialog } ) => {
+									return (
+										<MenuItem
+											icon={ upload }
+											onClick={ () => {
+												openFileDialog();
+											} }
+										>
+											{ __( 'Upload' ) }
+										</MenuItem>
+									);
+								} }
+							/>
+						</MediaUploadCheck>
 						{ onToggleFeaturedImage && (
 							<MenuItem
 								icon={ postFeaturedImage }
@@ -206,7 +210,15 @@ const MediaReplaceFlow = ( {
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-						<form className="block-editor-media-flow__url-input">
+						<form
+							className={ classnames(
+								'block-editor-media-flow__url-input',
+								{
+									'has-siblings':
+										canUpload || onToggleFeaturedImage,
+								}
+							) }
+						>
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>

package/src/components/media-replace-flow/style.scss

@@ -10,12 +10,15 @@
 }
 
 .block-editor-media-flow__url-input {
-	border-top: $border-width solid $gray-900;
-	margin-top: $grid-unit-10;
 	margin-right: -$grid-unit-10;
 	margin-left: -$grid-unit-10;
 	padding: $grid-unit-20;
 
+	&.has-siblings {
+		border-top: $border-width solid $gray-900;
+		margin-top: $grid-unit-10;
+	}
+
 	.block-editor-media-replace-flow__image-url-label {
 		display: block;
 		top: $grid-unit-20;

package/src/components/off-canvas-editor/block-contents.js

@@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
 import { updateAttributes } from './update-attributes';
 import { LinkUI } from './link-ui';
 import { useInsertedBlock } from './use-inserted-block';
+import { useListViewContext } from './context';
 
 const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
@@ -90,6 +91,8 @@ const ListViewBlockContents = forwardRef(
 			hasExistingLinkValue,
 		] );
 
+		const { renderAdditionalBlockUI } = useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -107,6 +110,7 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
+				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
 				{ isLinkUIOpen && (
 					<LinkUI
 						clientId={ lastInsertedBlockClientId }

package/src/components/off-canvas-editor/index.js

@@ -54,17 +54,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                 Components props.
- * @param {string}  props.id              An HTML element id for the root element of ListView.
- * @param {string}  props.parentClientId  The client id of the parent block.
- * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showBlockMovers Flag to enable block movers
- * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
- * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
- * @param {string}  props.description     Optional accessible description for the tree grid component.
- * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
- * @param {string}  props.showAppender    Flag to show or hide the block appender.
- * @param {Object}  ref                   Forwarded ref
+ * @param {Object}   props                         Components props.
+ * @param {string}   props.id                      An HTML element id for the root element of ListView.
+ * @param {string}   props.parentClientId          The client id of the parent block.
+ * @param {Array}    props.blocks                  Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean}  props.showBlockMovers         Flag to enable block movers
+ * @param {boolean}  props.isExpanded              Flag to determine whether nested levels are expanded by default.
+ * @param {Object}   props.LeafMoreMenu            Optional more menu substitution.
+ * @param {string}   props.description             Optional accessible description for the tree grid component.
+ * @param {string}   props.onSelect                Optional callback to be invoked when a block is selected.
+ * @param {string}   props.showAppender            Flag to show or hide the block appender.
+ * @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI.
+ * @param {Object}   ref                           Forwarded ref.
  */
 function OffCanvasEditor(
 	{
@@ -77,6 +78,7 @@ function OffCanvasEditor(
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -200,6 +202,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		} ),
 		[
 			isMounted.current,
@@ -208,6 +211,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		]
 	);
 

package/src/components/resizable-box-popover/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+
+export default function ResizableBoxPopover( {
+	clientId,
+	resizableBoxProps,
+	...props
+} ) {
+	return (
+		<BlockPopover
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstablePopoverSlot="block-toolbar"
+			shift={ false }
+			{ ...props }
+		>
+			<ResizableBox { ...resizableBoxProps } />
+		</BlockPopover>
+	);
+}

package/src/components/rich-text/format-edit.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	getActiveFormat,
-	getActiveObject,
-	isCollapsed,
-} from '@wordpress/rich-text';
+import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -22,37 +18,11 @@ export default function FormatEdit( {
 		}
 
 		const activeFormat = getActiveFormat( value, name );
-		let isActive = activeFormat !== undefined;
+		const isActive = activeFormat !== undefined;
 		const activeObject = getActiveObject( value );
 		const isObjectActive =
 			activeObject !== undefined && activeObject.type === name;
 
-		// Edge case: un-collapsed link formats.
-		// If there is a missing link format at either end of the selection
-		// then we shouldn't show the Edit UI because the selection has exceeded
-		// the bounds of the link format.
-		// Also if the format objects don't match then we're dealing with two separate
-		// links so we should not allow the link to be modified over the top.
-		if ( name === 'core/link' && ! isCollapsed( value ) ) {
-			const formats = value.formats;
-
-			const linkFormatAtStart = formats[ value.start ]?.find(
-				( { type } ) => type === 'core/link'
-			);
-
-			const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
-				( { type } ) => type === 'core/link'
-			);
-
-			if (
-				! linkFormatAtStart ||
-				! linkFormatAtEnd ||
-				linkFormatAtStart !== linkFormatAtEnd
-			) {
-				isActive = false;
-			}
-		}
-
 		return (
 			<Edit
 				key={ name }

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

@@ -66,7 +66,6 @@ function removeNativeProps( props ) {
 		textAlign,
 		selectionColor,
 		tagsToEliminate,
-		rootTagsToEliminate,
 		disableEditingMenu,
 		fontSize,
 		fontFamily,

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

@@ -46,7 +46,6 @@ import { useBlockEditContext } from '../block-edit';
 import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 import { filePasteHandler } from './file-paste-handler';
 import FormatToolbarContainer from './format-toolbar-container';
-import { useNativeProps } from './use-native-props';
 import { store as blockEditorStore } from '../../store';
 import {
 	addActiveFormats,
@@ -97,7 +96,6 @@ function RichTextWrapper(
 		textAlign,
 		selectionColor,
 		tagsToEliminate,
-		rootTagsToEliminate,
 		disableEditingMenu,
 		fontSize,
 		fontFamily,
@@ -121,7 +119,6 @@ function RichTextWrapper(
 
 	const fallbackRef = useRef();
 	const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
-	const nativeProps = useNativeProps();
 	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
@@ -220,6 +217,7 @@ function RichTextWrapper(
 				selectionChangeEnd
 			);
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, identifier ]
 	);
 
@@ -373,6 +371,7 @@ function RichTextWrapper(
 				}
 			}
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			onReplace,
 			onSplit,
@@ -615,7 +614,6 @@ function RichTextWrapper(
 			}
 			__unstableMultilineRootTag={ __unstableMultilineRootTag }
 			// Native props.
-			{ ...nativeProps }
 			blockIsSelected={
 				originalIsSelected !== undefined
 					? originalIsSelected
@@ -628,7 +626,6 @@ function RichTextWrapper(
 			textAlign={ textAlign }
 			selectionColor={ selectionColor }
 			tagsToEliminate={ tagsToEliminate }
-			rootTagsToEliminate={ rootTagsToEliminate }
 			disableEditingMenu={ disableEditingMenu }
 			fontSize={ fontSize }
 			fontFamily={ fontFamily }

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

@@ -20,6 +20,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,6 +72,15 @@ export default function SpacingInputControl( {
 			! isValueSpacingPreset( value )
 	);
 
+	const previousValue = usePrevious( value );
+	if (
+		previousValue !== value &&
+		! isValueSpacingPreset( value ) &&
+		showCustomValueControl !== true
+	) {
+		setShowCustomValueControl( true );
+	}
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );

package/src/components/spacing-sizes-control/style.scss

@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	grid-template-rows: 16px auto;
+	grid-template-rows: $grid-unit-30 auto;
 }
 
 .component-spacing-sizes-control {
@@ -19,7 +19,7 @@
 	}
 
 	.components-base-control__label {
-		margin-bottom: 0;
+		margin-bottom: $grid-unit-10;
 		height: $grid-unit-20;
 	}
 
@@ -55,6 +55,7 @@
 		grid-row: 1 / 1;
 		align-self: center;
 		margin-left: $grid-unit-05;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.components-spacing-sizes-control__custom-toggle-all {
@@ -85,20 +86,20 @@
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
 		margin-left: $grid-unit-20;
-		margin-top: 8px;
 	}
 
-	.components-spacing-sizes-control__custom-value-input {
+	.components-base-control.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
-		margin-top: 8px;
 		grid-column: 1;
+		margin-bottom: 0;
 	}
 
-	.components-range-control {
+	.components-base-control.components-range-control {
 		height: 40px;
 		/* Vertically center the RangeControl until it has true 40px height. */
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
 
 		> .components-base-control__field {
 			/* Fixes RangeControl contents when the outer wrapper is flex */
@@ -108,7 +109,6 @@
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		margin-top: 8px;
 	}
 
 	.components-range-control__mark {

package/src/components/writing-flow/use-input.js

@@ -31,11 +31,10 @@ export default function useInput() {
 
 	return useRefEffect( ( node ) => {
 		function onBeforeInput( event ) {
-			if ( ! hasMultiSelection() ) {
-				return;
-			}
-			// Prevent the browser to format something when we have multiselection.
-			if ( event.inputType?.startsWith( 'format' ) ) {
+			// If writing flow is editable, NEVER allow the browser to alter the
+			// DOM. This will cause React errors (and the DOM should only be
+			// altered in a controlled fashion).
+			if ( node.contentEditable === 'true' ) {
 				event.preventDefault();
 			}
 		}

package/src/hooks/anchor.js

@@ -80,7 +80,7 @@ export const withInspectorControl = createHigherOrderComponent(
 								{ isWeb && (
 									<ExternalLink
 										href={ __(
-											'https://wordpress.org/support/article/page-jumps/'
+											'https://wordpress.org/documentation/article/page-jumps/'
 										) }
 									>
 										{ __( 'Learn more about anchors' ) }

package/src/hooks/border.js

@@ -84,7 +84,7 @@ function styleToAttributes( style ) {
 
 	const borderColorValue = style?.border?.color;
 	const borderColorSlug = borderColorValue?.startsWith( 'var:preset|color|' )
-		? borderColorSlug.substring( 'var:preset|color|'.length )
+		? borderColorValue.substring( 'var:preset|color|'.length )
 		: undefined;
 	const updatedStyle = { ...style };
 	updatedStyle.border = {
@@ -163,7 +163,6 @@ export function BorderPanel( props ) {
 		<StylesBorderPanel
 			as={ BordersInspectorControl }
 			panelId={ clientId }
-			name={ name }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }