npm - @wordpress/block-editor - Versions diffs - 14.5.0 → 14.7.0 - Mend

@wordpress/block-editor 14.5.0 → 14.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (541) hide show

package/src/components/iframe/get-compatibility-styles.js CHANGED Viewed

@@ -37,15 +37,10 @@ export function getCompatibilityStyles() {
 				return accumulator;
 			}
-			// Don't try to add the reset styles, which were removed as a dependency
-			// from `edit-blocks` for the iframe since we don't need to reset admin
-			// styles.
-			if (
-				[
-					'wp-reset-editor-styles-css',
-					'wp-reset-editor-styles-rtl-css',
-				].includes( ownerNode.id )
-			) {
+			// Don't try to add core WP styles. We are responsible for adding
+			// them. This compatibility layer is only meant to add styles added
+			// by plugins or themes.
+			if ( ownerNode.id.startsWith( 'wp-' ) ) {
 				return accumulator;
 			}

package/src/components/iframe/index.js CHANGED Viewed

@@ -117,12 +117,12 @@ function Iframe( {
 		const settings = getSettings();
 		return {
 			resolvedAssets: settings.__unstableResolvedAssets,
-			isPreviewMode: settings.__unstableIsPreviewMode,
+			isPreviewMode: settings.isPreviewMode,
 		};
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const initialContainerWidth = useRef();
+	const initialContainerWidthRef = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -191,6 +191,22 @@ 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 );
+					}
+				}
+			} );
 		}
 		node.addEventListener( 'load', onLoad );
@@ -243,10 +259,15 @@ function Iframe( {
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			initialContainerWidth.current = containerWidth;
+			initialContainerWidthRef.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
+	const scaleContainerWidth = Math.max(
+		initialContainerWidthRef.current,
+		containerWidth
+	);
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -267,6 +288,7 @@ function Iframe( {
 <html>
 	<head>
 		<meta charset="utf-8">
+		<base href="${ window.location.origin }">
 		<script>window.frameElement._load()</script>
 		<style>
 			html{
@@ -299,17 +321,6 @@ function Iframe( {
 	useEffect( () => cleanup, [ cleanup ] );
 	const zoomOutAnimationClassnameRef = useRef( null );
-	const handleZoomOutAnimationClassname = () => {
-		clearTimeout( zoomOutAnimationClassnameRef.current );
-		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
-		zoomOutAnimationClassnameRef.current = setTimeout( () => {
-			iframeDocument.documentElement.classList.remove(
-				'zoom-out-animation'
-			);
-		}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
-	};
 	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
 	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
@@ -320,6 +331,20 @@ function Iframe( {
 			return;
 		}
+		const handleZoomOutAnimationClassname = () => {
+			clearTimeout( zoomOutAnimationClassnameRef.current );
+			iframeDocument.documentElement.classList.add(
+				'zoom-out-animation'
+			);
+			zoomOutAnimationClassnameRef.current = setTimeout( () => {
+				iframeDocument.documentElement.classList.remove(
+					'zoom-out-animation'
+				);
+			}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+		};
 		handleZoomOutAnimationClassname();
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
@@ -337,7 +362,7 @@ function Iframe( {
 		const maxWidth = 750;
 		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
-		// initialContainerWidth will be smaller than the full page, and reflow will happen
+		// initialContainerWidthRef will be smaller than the full page, and reflow will happen
 		// when the canvas area becomes larger due to sidebars closing. This is a known but
 		// minor divergence for now.
@@ -346,13 +371,10 @@ function Iframe( {
 		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'default'
+			scale === 'auto-scaled'
 				? ( Math.min( containerWidth, maxWidth ) -
 						parseInt( frameSize ) * 2 ) /
-						Math.max(
-							initialContainerWidth.current,
-							containerWidth
-						)
+						scaleContainerWidth
 				: scale
 		);
@@ -374,15 +396,10 @@ function Iframe( {
 			`${ containerWidth }px`
 		);
 		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-outer-container-width',
-			`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
+			'--wp-block-editor-iframe-zoom-out-scale-container-width',
+			`${ scaleContainerWidth }px`
 		);
-		// iframeDocument.documentElement.style.setProperty(
-		// 	'--wp-block-editor-iframe-zoom-out-outer-container-width',
-		// 	`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
-		// );
 		return () => {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-scale'
@@ -400,7 +417,7 @@ function Iframe( {
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
 			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-outer-container-width'
+				'--wp-block-editor-iframe-zoom-out-scale-container-width'
 			);
 		};
 	}, [
@@ -412,6 +429,7 @@ function Iframe( {
 		containerWidth,
 		windowInnerWidth,
 		isZoomedOut,
+		scaleContainerWidth,
 	] );
 	// Make sure to not render the before and after focusable div elements in view
@@ -501,12 +519,8 @@ function Iframe( {
 					isZoomedOut && 'is-zoomed-out'
 				) }
 				style={ {
-					'--wp-block-editor-iframe-zoom-out-outer-container-width':
-						isZoomedOut &&
-						`${ Math.max(
-							initialContainerWidth.current,
-							containerWidth
-						) }px`,
+					'--wp-block-editor-iframe-zoom-out-scale-container-width':
+						isZoomedOut && `${ scaleContainerWidth }px`,
 				} }
 			>
 				{ iframe }

package/src/components/iframe/style.scss CHANGED Viewed

@@ -1,7 +1,6 @@
 .block-editor-iframe__container {
 	width: 100%;
 	height: 100%;
-	overflow-x: hidden;
 }
 .block-editor-iframe__scale-container {
@@ -9,8 +8,8 @@
 }
 .block-editor-iframe__scale-container.is-zoomed-out {
-	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
-	width: $outer-container-width;
+	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+	width: $scale-container-width;
 	// Position the iframe so that it is always aligned with the right side so that
 	// the scrollbar is always visible on the right side
 	position: absolute;

package/src/components/image-size-control/index.js CHANGED Viewed

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import {
-	Button,
-	ButtonGroup,
 	SelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -18,6 +18,25 @@ import useDimensionHandler from './use-dimension-handler';
 const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];
 const noop = () => {};
+/**
+ * Get scaled width and height for the given scale.
+ *
+ * @param {number} scale       The scale to get the scaled width and height for.
+ * @param {number} imageWidth  The image width.
+ * @param {number} imageHeight The image height.
+ *
+ * @return {Object} The scaled width and height.
+ */
+function getScaledWidthAndHeight( scale, imageWidth, imageHeight ) {
+	const scaledWidth = Math.round( imageWidth * ( scale / 100 ) );
+	const scaledHeight = Math.round( imageHeight * ( scale / 100 ) );
+	return {
+		scaledWidth,
+		scaledHeight,
+	};
+}
 export default function ImageSizeControl( {
 	imageSizeHelp,
 	imageWidth,
@@ -33,6 +52,40 @@ export default function ImageSizeControl( {
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
+	/**
+	 * Updates the dimensions for the given scale.
+	 * Handler for toggle group control change.
+	 *
+	 * @param {number} scale The scale to update the dimensions for.
+	 */
+	const handleUpdateDimensions = ( scale ) => {
+		if ( undefined === scale ) {
+			updateDimensions();
+			return;
+		}
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+		updateDimensions( scaledHeight, scaledWidth );
+	};
+	/**
+	 * Add the stored image preset value to toggle group control.
+	 */
+	const selectedValue = IMAGE_SIZE_PRESETS.find( ( scale ) => {
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+		return currentWidth === scaledWidth && currentHeight === scaledHeight;
+	} );
 	return (
 		<>
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
@@ -70,47 +123,25 @@ export default function ImageSizeControl( {
 							size="__unstable-large"
 						/>
 					</HStack>
-					<HStack>
-						<ButtonGroup aria-label={ __( 'Image size presets' ) }>
-							{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
-								const scaledWidth = Math.round(
-									imageWidth * ( scale / 100 )
-								);
-								const scaledHeight = Math.round(
-									imageHeight * ( scale / 100 )
-								);
-								const isCurrent =
-									currentWidth === scaledWidth &&
-									currentHeight === scaledHeight;
-								return (
-									<Button
-										key={ scale }
-										size="small"
-										variant={
-											isCurrent ? 'primary' : undefined
-										}
-										isPressed={ isCurrent }
-										onClick={ () =>
-											updateDimensions(
-												scaledHeight,
-												scaledWidth
-											)
-										}
-									>
-										{ scale }%
-									</Button>
-								);
-							} ) }
-						</ButtonGroup>
-						<Button
-							size="small"
-							onClick={ () => updateDimensions() }
-						>
-							{ __( 'Reset' ) }
-						</Button>
-					</HStack>
+					<ToggleGroupControl
+						label={ __( 'Image size presets' ) }
+						hideLabelFromVision
+						onChange={ handleUpdateDimensions }
+						value={ selectedValue }
+						isBlock
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					>
+						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
+							return (
+								<ToggleGroupControlOption
+									key={ scale }
+									value={ scale }
+									label={ `${ scale }%` }
+								/>
+							);
+						} ) }
+					</ToggleGroupControl>
 				</div>
 			) }
 		</>

package/src/components/image-size-control/test/index.js CHANGED Viewed

@@ -221,47 +221,8 @@ describe( 'ImageSizeControl', () => {
 		} );
 	} );
-	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', async () => {
-			const user = userEvent.setup();
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="200"
-					height="300"
-					width="400"
-					onChange={ mockOnChange }
-				/>
-			);
-			const heightInput = screen.getByRole( 'spinbutton', {
-				name: 'Height',
-			} );
-			const widthInput = screen.getByRole( 'spinbutton', {
-				name: 'Width',
-			} );
-			// The initial dimension values display first.
-			expect( heightInput ).toHaveValue( 300 );
-			expect( widthInput ).toHaveValue( 400 );
-			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
-			// Both attributes are set to undefined to clear custom values.
-			expect( mockOnChange ).toHaveBeenLastCalledWith( {
-				height: undefined,
-				width: undefined,
-			} );
-			// The inputs display the default values once more.
-			expect( heightInput ).toHaveValue( 100 );
-			expect( widthInput ).toHaveValue( 200 );
-		} );
-	} );
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', async () => {
+		it( 'updates height and width on selection', async () => {
 			const user = userEvent.setup();
 			render(
@@ -272,44 +233,25 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
-			const button = screen.getByRole( 'button', {
+			const button = screen.getByRole( 'radio', {
 				name: '50%',
-				pressed: false,
+				checked: false,
 			} );
 			await user.click( button );
-			expect( button ).toHaveClass( 'is-pressed' );
+			expect( button ).toBeChecked();
 			// Both attributes are set to the rounded scaled value.
 			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: 50,
 				width: 101,
 			} );
-		} );
-		it( 'updates height and width inputs on selection', async () => {
-			const user = userEvent.setup();
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="201"
-					onChange={ mockOnChange }
-				/>
-			);
-			const button = screen.getByRole( 'button', {
-				name: '50%',
-				pressed: false,
-			} );
-			await user.click( button );
-			// Both attributes are set to the rounded scaled value.
 			expect(
 				screen.getByRole( 'spinbutton', { name: 'Height' } )
 			).toHaveValue( 50 );
 			expect(
 				screen.getByRole( 'spinbutton', { name: 'Width' } )
 			).toHaveValue( 101 );

package/src/components/inner-blocks/index.js CHANGED Viewed

@@ -195,17 +195,24 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		( select ) => {
 			const {
 				getBlockName,
-				__unstableGetEditorMode,
+				isZoomOut,
 				getTemplateLock,
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getBlockSettings,
 				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
-			let _isDropZoneDisabled;
 			if ( ! clientId ) {
-				return { isDropZoneDisabled: _isDropZoneDisabled };
+				const sectionRootClientId = getSectionRootClientId();
+				// Disable the root drop zone when zoomed out and the section root client id
+				// is not the root block list (represented by an empty string).
+				// This avoids drag handling bugs caused by having two block lists acting as
+				// drop zones - the actual 'root' block list and the section root.
+				return {
+					isDropZoneDisabled:
+						isZoomOut() && sectionRootClientId !== '',
+				};
 			}
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
@@ -214,14 +221,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
-			_isDropZoneDisabled = blockEditingMode === 'disabled';
+			let _isDropZoneDisabled = blockEditingMode === 'disabled';
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+			if ( isZoomOut() ) {
 				// In zoom out mode, we want to disable the drop zone for the sections.
 				// The inner blocks belonging to the section drop zone is
 				// already disabled by the blocks themselves being disabled.
 				const sectionRootClientId = getSectionRootClientId();
 				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}

package/src/components/inserter/block-patterns-explorer/pattern-list.js CHANGED Viewed

@@ -85,10 +85,10 @@ function PatternList( {
 				return true;
 			}
 			if ( selectedCategory === 'uncategorized' ) {
-				const hasKnownCategory = pattern.categories.some(
-					( category ) =>
+				const hasKnownCategory =
+					pattern.categories?.some( ( category ) =>
 						registeredPatternCategories.includes( category )
-				);
+					) ?? false;
 				return ! pattern.categories?.length || ! hasKnownCategory;
 			}
@@ -151,9 +151,6 @@ function PatternList( {
 				{ hasItems && (
 					<>
 						<BlockPatternsList
-							shownPatterns={
-								pagingProps.categoryPatternsAsyncList
-							}
 							blockPatterns={ pagingProps.categoryPatterns }
 							onClickPattern={ onClickPattern }
 							isDraggable={ false }

package/src/components/inserter/block-patterns-tab/index.js CHANGED Viewed

@@ -79,7 +79,6 @@ function BlockPatternsTab( {
 								onInsert={ onInsert }
 								rootClientId={ rootClientId }
 								category={ category }
-								showTitlesAsTooltip={ false }
 							/>
 						</div>
 					) }

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js CHANGED Viewed

@@ -31,9 +31,11 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	starterPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 const noop = () => {};
@@ -45,8 +47,7 @@ export function PatternCategoryPreviews( {
 	showTitlesAsTooltip,
 } ) {
 	const isZoomOutMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
@@ -86,6 +87,13 @@ export function PatternCategoryPreviews( {
 					return true;
 				}
+				if (
+					category.name === starterPatternsCategory.name &&
+					pattern.blockTypes?.includes( 'core/post-content' )
+				) {
+					return true;
+				}
 				if ( category.name === 'uncategorized' ) {
 					// The uncategorized category should show all the patterns without any category...
 					if ( ! pattern.categories ) {
@@ -117,7 +125,6 @@ export function PatternCategoryPreviews( {
 	const { changePage } = pagingProps;
 	// Hide block pattern preview on unmount.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 	const onSetPatternSyncFilter = useCallback(
@@ -183,7 +190,6 @@ export function PatternCategoryPreviews( {
 					) }
 					<BlockPatternsList
 						ref={ scrollContainerRef }
-						shownPatterns={ pagingProps.categoryPatternsAsyncList }
 						blockPatterns={ pagingProps.categoryPatterns }
 						onClickPattern={ onClickPattern }
 						onHover={ onHover }

package/src/components/inserter/block-patterns-tab/patterns-filter.js CHANGED Viewed

@@ -158,7 +158,7 @@ export function PatternsFilter( {
 								value={ patternSyncFilter }
 							/>
 						</MenuGroup>
-						<div className="block-editor-tool-selector__help">
+						<div className="block-editor-inserter__patterns-filter-help">
 							{ createInterpolateElement(
 								__(
 									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js CHANGED Viewed

@@ -14,6 +14,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	starterPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
@@ -67,6 +68,13 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
+		if (
+			filteredPatterns.some( ( pattern ) =>
+				pattern.blockTypes?.includes( 'core/post-content' )
+			)
+		) {
+			categories.unshift( starterPatternsCategory );
+		}
 		if (
 			filteredPatterns.some(
 				( pattern ) => pattern.type === INSERTER_PATTERN_TYPES.user

package/src/components/inserter/block-patterns-tab/utils.js CHANGED Viewed

@@ -25,6 +25,11 @@ export const myPatternsCategory = {
 	label: __( 'My patterns' ),
 };
+export const starterPatternsCategory = {
+	name: 'core/starter-content',
+	label: __( 'Starter content' ),
+};
 export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	const isUserPattern = pattern.name.startsWith( 'core/block' );
 	const isDirectoryPattern =

package/src/components/inserter/category-tabs/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -31,11 +32,22 @@ function CategoryTabs( {
 	const previousSelectedCategory = usePrevious( selectedCategory );
+	const selectedTabId = selectedCategory ? selectedCategory.name : null;
+	const [ activeTabId, setActiveId ] = useState();
+	const firstTabId = categories?.[ 0 ]?.name;
+	useEffect( () => {
+		// If there is no active tab, make the first tab the active tab, so that
+		// when focus is moved to the tablist, the first tab will be focused
+		// despite not being selected
+		if ( selectedTabId === null && ! activeTabId && firstTabId ) {
+			setActiveId( firstTabId );
+		}
+	}, [ selectedTabId, activeTabId, firstTabId, setActiveId ] );
 	return (
 		<Tabs
-			className="block-editor-inserter__category-tabs"
 			selectOnMove={ false }
-			selectedTabId={ selectedCategory ? selectedCategory.name : null }
+			selectedTabId={ selectedTabId }
 			orientation="vertical"
 			onSelect={ ( categoryId ) => {
 				// Pass the full category object
@@ -45,6 +57,8 @@ function CategoryTabs( {
 					)
 				);
 			} }
+			activeTabId={ activeTabId }
+			onActiveTabIdChange={ setActiveId }
 		>
 			<Tabs.TabList className="block-editor-inserter__category-tablist">
 				{ categories.map( ( category ) => (