@wordpress/block-editor 14.21.1-next.719a03cbe.0 → 15.0.1-next.46f643fa0.0

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

@@ -91,6 +91,7 @@ export function PrivateBlockToolbar( {
 			getParentSectionBlock,
 			isZoomOut,
 			isNavigationMode: _isNavigationMode,
+			isSectionBlock,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -100,6 +101,7 @@ export function PrivateBlockToolbar( {
 		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
 		const editingMode = getBlockEditingMode( selectedBlockClientId );
+		const isNavigationModeEnabled = _isNavigationMode();
 		const _isDefaultEditingMode = editingMode === 'default';
 		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
@@ -151,9 +153,13 @@ export function PrivateBlockToolbar( {
 			showSlots: ! _isZoomOut,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
-			showSwitchSectionStyleButton: _isZoomOut,
+			showSwitchSectionStyleButton:
+				_isZoomOut ||
+				( isNavigationModeEnabled &&
+					editingMode === 'contentOnly' &&
+					isSectionBlock( selectedBlockClientId ) ), // Zoom out or Write Mode Section Blocks
 			hasFixedToolbar: getSettings().hasFixedToolbar,
-			isNavigationMode: _isNavigationMode(),
+			isNavigationMode: isNavigationModeEnabled,
 		};
 	}, [] );
 

package/src/components/block-variation-transforms/style.scss

@@ -1,3 +1,10 @@
+.block-editor-block-variation-transforms:where(fieldset) {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
 .block-editor-block-variation-transforms {
 	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 	width: 100%;

package/src/components/border-radius-control/style.scss

@@ -1,4 +1,9 @@
 .components-border-radius-control {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	margin-bottom: $grid-unit-15;
 
 	legend {

package/src/components/child-layout-control/index.js

@@ -6,7 +6,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalInputControl as InputControl,
-	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -210,7 +209,7 @@ function GridControls( {
 	panelId,
 } ) {
 	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
-	const { columnCount = 3, rowCount } = parentLayout ?? {};
+	const { columnCount, rowCount } = parentLayout ?? {};
 	const rootClientId = useSelect( ( select ) =>
 		select( blockEditorStore ).getBlockRootClientId( panelId )
 	);
@@ -218,7 +217,7 @@ function GridControls( {
 		useDispatch( blockEditorStore );
 	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
 		rootClientId,
-		columnCount
+		columnCount || 3
 	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
@@ -235,9 +234,20 @@ function GridControls( {
 		} );
 	};
 
+	// Calculate max column span based on current position and grid width
+	const maxColumnSpan = columnCount
+		? columnCount - ( columnStart ?? 1 ) + 1
+		: undefined;
+
+	// Calculate max row span based on current position and grid height
+	const maxRowSpan =
+		window.__experimentalEnableGridInteractivity && rowCount
+			? rowCount - ( rowStart ?? 1 ) + 1
+			: undefined;
+
 	return (
 		<>
-			<HStack
+			<Flex
 				as={ ToolsPanelItem }
 				hasValue={ hasSpanValue }
 				label={ __( 'Grid span' ) }
@@ -245,44 +255,58 @@ function GridControls( {
 				isShownByDefault={ isShownByDefault }
 				panelId={ panelId }
 			>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Column span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newColumnSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							rowSpan,
-							columnSpan: newColumnSpan,
-						} );
-					} }
-					value={ columnSpan ?? 1 }
-					min={ 1 }
-				/>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Row span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newRowSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							columnSpan,
-							rowSpan: newRowSpan,
-						} );
-					} }
-					value={ rowSpan ?? 1 }
-					min={ 1 }
-				/>
-			</HStack>
-			{ window.__experimentalEnableGridInteractivity && columnCount && (
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Column span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							// Don't allow unsetting.
+							const newColumnSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxColumnSpan
+								? Math.min( newColumnSpan, maxColumnSpan )
+								: newColumnSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								rowSpan,
+								columnSpan: constrainedValue,
+							} );
+						} }
+						value={ columnSpan ?? 1 }
+						min={ 1 }
+						max={ maxColumnSpan }
+					/>
+				</FlexItem>
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Row span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							const newRowSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxRowSpan
+								? Math.min( newRowSpan, maxRowSpan )
+								: newRowSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								columnSpan,
+								rowSpan: constrainedValue,
+							} );
+						} }
+						value={ rowSpan ?? 1 }
+						min={ 1 }
+						max={ maxRowSpan }
+					/>
+				</FlexItem>
+			</Flex>
+
+			{ window.__experimentalEnableGridInteractivity && (
 				// Use Flex with an explicit width on the FlexItem instead of HStack to
 				// work around an issue in webkit where inputs with a max attribute are
 				// sized incorrectly.

package/src/components/colors-gradients/style.scss

@@ -10,6 +10,11 @@ $swatch-gap: 12px;
 }
 
 .block-editor-color-gradient-control__fieldset {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	// Prevents the `fieldset` from growing beyond its parent's size
 	// in order to fit its content.
 	min-width: 0;

package/src/components/grid/style.scss

@@ -176,11 +176,12 @@
 
 .editor-collapsible-block-toolbar {
 	.block-editor-grid-item-mover__move-vertical-button-container {
-		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		// Reduce height and move up a little to prevent the toolbar
+		// shift when focus is on the vertical movers.
 		@include break-small() {
 			height: $grid-unit-50;
 			position: relative;
-			top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+			top: #{$grid-unit-05 * -1};
 		}
 	}
 }

package/src/components/iframe/index.js

@@ -131,6 +131,29 @@ function Iframe( {
 		function preventFileDropDefault( event ) {
 			event.preventDefault();
 		}
+		// Prevent clicks on link fragments from navigating away. Note that links
+		// inside `contenteditable` are already disabled by the browser, so
+		// this is for links in blocks outside of `contenteditable`.
+		function interceptLinkClicks( event ) {
+			if (
+				event.target.tagName === 'A' &&
+				event.target.getAttribute( 'href' )?.startsWith( '#' )
+			) {
+				event.preventDefault();
+				// Manually handle link fragment navigation within the iframe. The iframe's
+				// location is a blob URL, which can't be used to resolve relative links like
+				// `#hash`. The relative link would be resolved against the iframe's base URL
+				// or the parent frame's URL, causing the iframe to navigate to a completely
+				// different page. Setting the `location.hash` works because it really sets the
+				// blob URL's hash.
+				//
+				// Links with fragments are used for example with footnotes. Clicking on these
+				// links will scroll smoothly to the anchors in the editor canvas.
+				iFrameDocument.defaultView.location.hash = event.target
+					.getAttribute( 'href' )
+					.slice( 1 );
+			}
+		}
 
 		const { ownerDocument } = node;
 
@@ -185,22 +208,7 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
-			// Prevent clicks on links from navigating away. Note that links
-			// inside `contenteditable` are already disabled by the browser, so
-			// this is for links in blocks outside of `contenteditable`.
-			iFrameDocument.addEventListener( 'click', ( event ) => {
-				if ( event.target.tagName === 'A' ) {
-					event.preventDefault();
-
-					// Appending a hash to the current URL will not reload the
-					// page. This is useful for e.g. footnotes.
-					const href = event.target.getAttribute( 'href' );
-					if ( href?.startsWith( '#' ) ) {
-						iFrameDocument.defaultView.location.hash =
-							href.slice( 1 );
-					}
-				}
-			} );
+			iFrameDocument.addEventListener( 'click', interceptLinkClicks );
 		}
 
 		node.addEventListener( 'load', onLoad );
@@ -216,6 +224,7 @@ function Iframe( {
 				'drop',
 				preventFileDropDefault
 			);
+			iFrameDocument?.removeEventListener( 'click', interceptLinkClicks );
 		};
 	}, [] );
 

package/src/components/image-editor/use-save-image.js

@@ -1,15 +1,18 @@
 /**
  * WordPress dependencies
  */
-// Disable Reason: Needs to be refactored.
-// eslint-disable-next-line no-restricted-imports
-import apiFetch from '@wordpress/api-fetch';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { mediaEditKey } from '../../store/private-keys';
+
 const messages = {
 	crop: __( 'Image cropped.' ),
 	rotate: __( 'Image rotated.' ),
@@ -27,13 +30,31 @@ export default function useSaveImage( {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const [ isInProgress, setIsInProgress ] = useState( false );
+	const { editMediaEntity } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			editMediaEntity: settings?.[ mediaEditKey ],
+		};
+	}, [] );
 
 	const cancel = useCallback( () => {
 		setIsInProgress( false );
 		onFinishEditing();
 	}, [ onFinishEditing ] );
 
-	const apply = useCallback( () => {
+	const apply = useCallback( async () => {
+		if ( ! editMediaEntity ) {
+			onFinishEditing();
+			createErrorNotice(
+				__( 'Sorry, you are not allowed to edit images on this site.' ),
+				{
+					id: 'image-editing-error',
+					type: 'snackbar',
+				}
+			);
+			return;
+		}
+
 		setIsInProgress( true );
 
 		const modifiers = [];
@@ -71,16 +92,22 @@ export default function useSaveImage( {
 		const modifierType =
 			modifiers.length === 1 ? modifiers[ 0 ].type : 'cropAndRotate';
 
-		apiFetch( {
-			path: `/wp/v2/media/${ id }/edit`,
-			method: 'POST',
-			data: { src: url, modifiers },
-		} )
-			.then( ( response ) => {
+		try {
+			const savedImage = await editMediaEntity(
+				id,
+				{
+					src: url,
+					modifiers,
+				},
+				{ throwOnError: true }
+			);
+
+			if ( savedImage ) {
 				onSaveImage( {
-					id: response.id,
-					url: response.source_url,
+					id: savedImage.id,
+					url: savedImage.source_url,
 				} );
+
 				createSuccessNotice( messages[ modifierType ], {
 					type: 'snackbar',
 					actions: [
@@ -95,24 +122,23 @@ export default function useSaveImage( {
 						},
 					],
 				} );
-			} )
-			.catch( ( error ) => {
-				createErrorNotice(
-					sprintf(
-						/* translators: %s: Error message. */
-						__( 'Could not edit image. %s' ),
-						stripHTML( error.message )
-					),
-					{
-						id: 'image-editing-error',
-						type: 'snackbar',
-					}
-				);
-			} )
-			.finally( () => {
-				setIsInProgress( false );
-				onFinishEditing();
-			} );
+			}
+		} catch ( error ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: Error message. */
+					__( 'Could not edit image. %s' ),
+					stripHTML( error.message )
+				),
+				{
+					id: 'image-editing-error',
+					type: 'snackbar',
+				}
+			);
+		} finally {
+			setIsInProgress( false );
+			onFinishEditing();
+		}
 	}, [
 		crop,
 		rotation,
@@ -122,6 +148,7 @@ export default function useSaveImage( {
 		createErrorNotice,
 		createSuccessNotice,
 		onFinishEditing,
+		editMediaEntity,
 	] );
 
 	return useMemo(

package/src/components/inserter/style.scss

@@ -373,7 +373,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height + $grid-unit-15;
+		top: $header-height + $grid-unit-10;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

package/src/components/inserter-button/index.native.js

@@ -6,7 +6,7 @@ import { View, TouchableHighlight, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -17,93 +17,82 @@ import { __, sprintf } from '@wordpress/i18n';
 import { BlockIcon } from '../block-icon';
 import styles from './style.scss';
 import sparkles from './sparkles';
-class MenuItem extends Component {
-	constructor() {
-		super( ...arguments );
 
-		this.onPress = this.onPress.bind( this );
-	}
-
-	onPress() {
-		const { onSelect, item } = this.props;
+function MenuItem( {
+	getStylesFromColorScheme,
+	item,
+	itemWidth,
+	maxWidth,
+	onSelect,
+} ) {
+	const onPress = useCallback( () => {
 		onSelect( item );
-	}
-
-	render() {
-		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
-			this.props;
+	}, [ onSelect, item ] );
 
-		const modalIconWrapperStyle = getStylesFromColorScheme(
-			styles.modalIconWrapper,
-			styles.modalIconWrapperDark
-		);
-		const modalIconStyle = styles.modalIcon;
-		const modalItemLabelStyle = getStylesFromColorScheme(
-			styles.modalItemLabel,
-			styles.modalItemLabelDark
-		);
+	const modalIconWrapperStyle = getStylesFromColorScheme(
+		styles.modalIconWrapper,
+		styles.modalIconWrapperDark
+	);
+	const modalIconStyle = styles.modalIcon;
+	const modalItemLabelStyle = getStylesFromColorScheme(
+		styles.modalItemLabel,
+		styles.modalItemLabelDark
+	);
 
-		const clipboardBlockStyles = getStylesFromColorScheme(
-			styles.clipboardBlock,
-			styles.clipboardBlockDark
-		);
+	const clipboardBlockStyles = getStylesFromColorScheme(
+		styles.clipboardBlock,
+		styles.clipboardBlockDark
+	);
 
-		const isClipboardBlock = item.id === 'clipboard';
-		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
-		const blockIsNew = item.isNew === true;
-		const accessibilityLabelFormat = blockIsNew
-			? // translators: Newly available block name. %s: The localized block name
-			  __( '%s block, newly available' )
-			: // translators: %s: Block name e.g. "Image block"
-			  __( '%s block' );
-		const accessibilityLabel = sprintf(
-			accessibilityLabelFormat,
-			item.title
-		);
+	const isClipboardBlock = item.id === 'clipboard';
+	const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
+	const blockIsNew = item.isNew === true;
+	const accessibilityLabelFormat = blockIsNew
+		? // translators: Newly available block name. %s: The localized block name
+		  __( '%s block, newly available' )
+		: // translators: %s: Block name e.g. "Image block"
+		  __( '%s block' );
+	const accessibilityLabel = sprintf( accessibilityLabelFormat, item.title );
 
-		return (
-			<TouchableHighlight
-				style={ [
-					styles.touchableArea,
-					item.isDisabled ? styles.disabled : null,
-				] }
-				underlayColor="transparent"
-				activeOpacity={ 0.5 }
-				accessibilityRole="button"
-				accessibilityLabel={ accessibilityLabel }
-				onPress={ this.onPress }
-				disabled={ item.isDisabled }
-			>
-				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
-					<View
-						style={ [
-							modalIconWrapperStyle,
-							itemWidth && {
-								width: itemWidth,
-							},
-							isClipboardBlock && clipboardBlockStyles,
-						] }
-					>
-						{ blockIsNew && (
-							<Icon
-								icon={ sparkles }
-								style={ styles.newIndicator }
-							/>
-						) }
-						<View style={ modalIconStyle }>
-							<BlockIcon
-								icon={ item.icon }
-								size={ modalIconStyle.width }
-							/>
-						</View>
+	return (
+		<TouchableHighlight
+			style={ [
+				styles.touchableArea,
+				item.isDisabled ? styles.disabled : null,
+			] }
+			underlayColor="transparent"
+			activeOpacity={ 0.5 }
+			accessibilityRole="button"
+			accessibilityLabel={ accessibilityLabel }
+			onPress={ onPress }
+			disabled={ item.isDisabled }
+		>
+			<View style={ [ styles.modalItem, { width: maxWidth } ] }>
+				<View
+					style={ [
+						modalIconWrapperStyle,
+						itemWidth && {
+							width: itemWidth,
+						},
+						isClipboardBlock && clipboardBlockStyles,
+					] }
+				>
+					{ blockIsNew && (
+						<Icon icon={ sparkles } style={ styles.newIndicator } />
+					) }
+					<View style={ modalIconStyle }>
+						<BlockIcon
+							icon={ item.icon }
+							size={ modalIconStyle.width }
+						/>
 					</View>
-					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
-						{ blockTitle }
-					</Text>
 				</View>
-			</TouchableHighlight>
-		);
-	}
+				<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
+					{ blockTitle }
+				</Text>
+			</View>
+		</TouchableHighlight>
+	);
 }
 
 const InserterButton = withPreferredColorScheme( MenuItem );

package/src/components/inserter-list-item/style.scss

@@ -49,12 +49,13 @@
 	position: relative;
 	height: auto;
 
-	&:disabled {
+	&:disabled,
+	&[aria-disabled="true"] {
 		opacity: 0.6;
 		cursor: default;
 	}
 
-	&:not(:disabled) {
+	&:not(:disabled, [aria-disabled="true"]) {
 		&:hover {
 			.block-editor-block-types-list__item-title {
 				color: var(--wp-admin-theme-color) !important;
@@ -80,10 +81,6 @@
 			}
 		}
 
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
 		&.is-active {
 			color: $white;
 			background: $gray-900;
@@ -93,6 +90,12 @@
 			outline-offset: -2px;
 		}
 	}
+
+	&:not(:disabled) {
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
 }
 
 .block-editor-block-types-list__item-icon {

package/src/components/link-control/search-input.js

@@ -114,16 +114,23 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
+		const _placeholder = placeholder ?? __( 'Search or type URL' );
+
+		const label =
+			hideLabelFromVision && placeholder !== ''
+				? _placeholder
+				: __( 'Link' );
+
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					label={ __( 'Link' ) }
+					label={ label }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type URL' ) }
+					placeholder={ _placeholder }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}