@wordpress/block-library 7.14.0 → 7.14.1

package/src/list/test/__snapshots__/edit.native.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`List V2 block adds one item to the list 1`] = `
+exports[`List block adds one item to the list 1`] = `
 "<!-- wp:list -->
 <ul><!-- wp:list-item -->
 <li>First list item</li>
@@ -8,7 +8,7 @@ exports[`List V2 block adds one item to the list 1`] = `
 <!-- /wp:list -->"
 `;
 
-exports[`List V2 block changes the indentation level 1`] = `
+exports[`List block changes the indentation level 1`] = `
 "<!-- wp:list -->
 <ul><!-- wp:list-item -->
 <li>Item 1<!-- wp:list -->
@@ -20,7 +20,7 @@ exports[`List V2 block changes the indentation level 1`] = `
 <!-- /wp:list -->"
 `;
 
-exports[`List V2 block changes to ordered list 1`] = `
+exports[`List block changes to ordered list 1`] = `
 "<!-- wp:list {\\"ordered\\":true} -->
 <ol><!-- wp:list-item -->
 <li>Item 1</li>
@@ -36,7 +36,7 @@ exports[`List V2 block changes to ordered list 1`] = `
 <!-- /wp:list -->"
 `;
 
-exports[`List V2 block changes to reverse ordered list 1`] = `
+exports[`List block changes to reverse ordered list 1`] = `
 "<!-- wp:list {\\"ordered\\":true,\\"reversed\\":true} -->
 <ol reversed><!-- wp:list-item -->
 <li>Item 1</li>
@@ -52,7 +52,7 @@ exports[`List V2 block changes to reverse ordered list 1`] = `
 <!-- /wp:list -->"
 `;
 
-exports[`List V2 block inserts block 1`] = `
+exports[`List block inserts block 1`] = `
 "<!-- wp:list -->
 <ul><!-- wp:list-item -->
 <li></li>
@@ -60,7 +60,7 @@ exports[`List V2 block inserts block 1`] = `
 <!-- /wp:list -->"
 `;
 
-exports[`List V2 block removes the indentation level 1`] = `
+exports[`List block removes the indentation level 1`] = `
 "<!-- wp:list -->
 <ul><!-- wp:list-item -->
 <li>Item 1</li>
@@ -72,7 +72,7 @@ exports[`List V2 block removes the indentation level 1`] = `
 <!-- /wp:list -->"
 `;
 
-exports[`List V2 block sets a start value to an ordered list 1`] = `
+exports[`List block sets a start value to an ordered list 1`] = `
 "<!-- wp:list {\\"ordered\\":true,\\"start\\":25} -->
 <ol start=\\"25\\"><!-- wp:list-item -->
 <li>Item 1</li>
@@ -88,7 +88,7 @@ exports[`List V2 block sets a start value to an ordered list 1`] = `
 <!-- /wp:list -->"
 `;
 
-exports[`List V2 block shows different indentation levels 1`] = `
+exports[`List block shows different indentation levels 1`] = `
 "<!-- wp:list -->
 <ul><!-- wp:list-item -->
 <li>List item 1</li>
@@ -119,27 +119,3 @@ exports[`List V2 block shows different indentation levels 1`] = `
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
 `;
-
-exports[`List block inserts block 1`] = `
-"<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li></li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`List block renders a list with a few items 1`] = `
-"<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>Item 1</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>Item 2</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>Item 3</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;

package/src/list/test/edit.native.js

@@ -8,6 +8,9 @@ import {
 	initializeEditor,
 	waitFor,
 	within,
+	addBlock,
+	getBlock,
+	triggerBlockListLayout,
 } from 'test/helpers';
 
 /**
@@ -19,9 +22,7 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 describe( 'List block', () => {
 	beforeAll( () => {
 		// Register all core blocks
-		registerCoreBlocks( {
-			__experimentalEnableListBlockV2: false,
-		} );
+		registerCoreBlocks();
 	} );
 
 	afterAll( () => {
@@ -32,78 +33,25 @@ describe( 'List block', () => {
 	} );
 
 	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
-			await initializeEditor();
-
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
-
-		const blockList = getByTestId( 'InserterUI-Blocks' );
-		// onScroll event used to force the FlatList to render all items
-		fireEvent.scroll( blockList, {
-			nativeEvent: {
-				contentOffset: { y: 0, x: 0 },
-				contentSize: { width: 100, height: 100 },
-				layoutMeasurement: { width: 100, height: 100 },
-			},
-		} );
-
-		fireEvent.press( await waitFor( () => getByText( 'List' ) ) );
-
-		expect( getByA11yLabel( /List Block\. Row 1/ ) ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'renders a list with a few items', async () => {
-		const initialHtml = `<!-- wp:list -->
-		<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
-		<!-- /wp:list -->`;
+		const screen = await initializeEditor();
 
-		const { getByA11yLabel } = await initializeEditor( {
-			initialHtml,
-		} );
+		// Add block
+		await addBlock( screen, 'List' );
 
-		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		// Get block
+		const listBlock = await getBlock( screen, 'List' );
 		fireEvent.press( listBlock );
+		expect( listBlock ).toBeVisible();
 
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-} );
-
-describe( 'List V2 block', () => {
-	beforeAll( () => {
-		// Register all core blocks
-		registerCoreBlocks( {
-			__experimentalEnableListBlockV2: true,
-		} );
-	} );
-
-	afterAll( () => {
-		// Clean up registered blocks
-		getBlockTypes().forEach( ( block ) => {
-			unregisterBlockType( block.name );
-		} );
-	} );
+		// Trigger onLayout for the list
+		await triggerBlockListLayout( listBlock );
 
-	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
-			await initializeEditor();
-
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
-
-		const blockList = getByTestId( 'InserterUI-Blocks' );
-		// onScroll event used to force the FlatList to render all items
-		fireEvent.scroll( blockList, {
-			nativeEvent: {
-				contentOffset: { y: 0, x: 0 },
-				contentSize: { width: 100, height: 100 },
-				layoutMeasurement: { width: 100, height: 100 },
-			},
-		} );
+		// Get List item
+		const listItemBlock = await getBlock( screen, 'List item' );
+		fireEvent.press( listItemBlock );
 
-		fireEvent.press( await waitFor( () => getByText( 'List' ) ) );
+		expect( listItemBlock ).toBeVisible();
 
-		expect( getByA11yLabel( /List Block\. Row 1/ ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 

package/src/media-text/edit.js

@@ -137,7 +137,7 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
+function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const {
 		focalPoint,
 		href,
@@ -157,12 +157,24 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
-	const image = useSelect(
-		( select ) =>
-			mediaId && isSelected
-				? select( coreStore ).getMedia( mediaId, { context: 'view' } )
-				: null,
-		[ isSelected, mediaId ]
+	const { imageSizes, image, isContentLocked } = useSelect(
+		( select ) => {
+			const { __unstableGetContentLockingParent, getSettings } =
+				select( blockEditorStore );
+			return {
+				isContentLocked:
+					!! __unstableGetContentLockingParent( clientId ),
+				image:
+					mediaId && isSelected
+						? select( coreStore ).getMedia( mediaId, {
+								context: 'view',
+						  } )
+						: null,
+				imageSizes: getSettings()?.imageSizes,
+			};
+		},
+
+		[ isSelected, mediaId, clientId ]
 	);
 
 	const refMediaContainer = useRef();
@@ -213,10 +225,6 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 		setAttributes( { verticalAlignment: alignment } );
 	};
 
-	const imageSizes = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return settings?.imageSizes;
-	}, [] );
 	const imageSizeOptions = map(
 		filter( imageSizes, ( { slug } ) =>
 			getImageSourceUrlBySizeSlug( image, slug )
@@ -322,24 +330,31 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 		<>
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
-				<BlockVerticalAlignmentControl
-					onChange={ onVerticalAlignmentChange }
-					value={ verticalAlignment }
-				/>
-				<ToolbarButton
-					icon={ pullLeft }
-					title={ __( 'Show media on left' ) }
-					isActive={ mediaPosition === 'left' }
-					onClick={ () => setAttributes( { mediaPosition: 'left' } ) }
-				/>
-				<ToolbarButton
-					icon={ pullRight }
-					title={ __( 'Show media on right' ) }
-					isActive={ mediaPosition === 'right' }
-					onClick={ () =>
-						setAttributes( { mediaPosition: 'right' } )
-					}
-				/>
+				{ ! isContentLocked && (
+					<>
+						<BlockVerticalAlignmentControl
+							onChange={ onVerticalAlignmentChange }
+							value={ verticalAlignment }
+						/>
+						<ToolbarButton
+							icon={ pullLeft }
+							title={ __( 'Show media on left' ) }
+							isActive={ mediaPosition === 'left' }
+							onClick={ () =>
+								setAttributes( { mediaPosition: 'left' } )
+							}
+						/>
+						<ToolbarButton
+							icon={ pullRight }
+							title={ __( 'Show media on right' ) }
+							isActive={ mediaPosition === 'right' }
+							onClick={ () =>
+								setAttributes( { mediaPosition: 'right' } )
+							}
+						/>
+					</>
+				) }
+
 				{ mediaType === 'image' && (
 					<ImageURLInputUI
 						url={ href || '' }
@@ -373,6 +388,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						mediaType,
 						mediaUrl,
 						mediaWidth,
+						isContentLocked,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }

package/src/media-text/media-container.js

@@ -113,6 +113,7 @@ function MediaContainer( props, ref ) {
 		mediaWidth,
 		onSelectMedia,
 		onWidthChange,
+		isContentLocked,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -131,8 +132,8 @@ function MediaContainer( props, ref ) {
 			commitWidthChange( parseInt( elt.style.width ) );
 		};
 		const enablePositions = {
-			right: mediaPosition === 'left',
-			left: mediaPosition === 'right',
+			right: ! isContentLocked && mediaPosition === 'left',
+			left: ! isContentLocked && mediaPosition === 'right',
 		};
 
 		const backgroundStyles =

package/src/navigation/edit/overlay-menu-icon.js

@@ -2,15 +2,11 @@
  * WordPress dependencies
  */
 import { SVG, Rect } from '@wordpress/primitives';
-import { Icon, menu, moreVertical, moreHorizontal } from '@wordpress/icons';
+import { Icon, menu } from '@wordpress/icons';
 
 export default function OverlayMenuIcon( { icon } ) {
 	if ( icon === 'menu' ) {
 		return <Icon icon={ menu } />;
-	} else if ( icon === 'more-vertical' ) {
-		return <Icon icon={ moreVertical } />;
-	} else if ( icon === 'more-horizontal' ) {
-		return <Icon icon={ moreHorizontal } />;
 	}
 
 	return (

package/src/navigation/edit/overlay-menu-preview.js

@@ -41,16 +41,6 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 					aria-label={ __( 'menu' ) }
 					label={ <OverlayMenuIcon icon="menu" /> }
 				/>
-				<ToggleGroupControlOption
-					value="more-vertical"
-					aria-label={ __( 'more vertical' ) }
-					label={ <OverlayMenuIcon icon="more-vertical" /> }
-				/>
-				<ToggleGroupControlOption
-					value="more-horizontal"
-					aria-label={ __( 'more horizontal' ) }
-					label={ <OverlayMenuIcon icon="more-horizontal" /> }
-				/>
 			</ToggleGroupControl>
 		</>
 	);

package/src/navigation/index.php

@@ -623,10 +623,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	if ( isset( $attributes['icon'] ) ) {
 		if ( 'menu' === $attributes['icon'] ) {
 			$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
-		} elseif ( 'more-vertical' === $attributes['icon'] ) {
-			$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" /></svg>';
-		} elseif ( 'more-horizontal' === $attributes['icon'] ) {
-			$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 13h2v-2h-2v2zm-6 0h2v-2H5v2zm12-2v2h2v-2h-2z" /></svg>';
 		}
 	}
 	$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );

package/src/navigation-link/edit.js

@@ -47,6 +47,7 @@ import {
 	useResourcePermissions,
 } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -461,6 +462,9 @@ export default function NavigationLinkEdit( {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add link…' );
@@ -651,7 +655,7 @@ export default function NavigationLinkEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		ref: listItemRef,
+		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
 		className: classnames( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
@@ -844,7 +848,7 @@ export default function NavigationLinkEdit( {
 						<Popover
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }
-							anchorRef={ listItemRef.current }
+							anchor={ popoverAnchor }
 							shift
 						>
 							<LinkControl

package/src/navigation-submenu/edit.js

@@ -45,6 +45,7 @@ import {
 } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -292,6 +293,9 @@ export default function NavigationSubmenuEdit( {
 	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
 		useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add text…' );
@@ -458,7 +462,7 @@ export default function NavigationSubmenuEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		ref: listItemRef,
+		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
 		className: classnames( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
@@ -629,7 +633,7 @@ export default function NavigationSubmenuEdit( {
 						<Popover
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }
-							anchorRef={ listItemRef.current }
+							anchor={ popoverAnchor }
 							shift
 						>
 							<LinkControl

package/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . wp_theme_element_class_name( 'button' ) . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . wp_theme_get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/post-date/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useRef } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import {
 	AlignmentControl,
@@ -39,7 +39,16 @@ export default function PostDateEdit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-	const timeRef = useRef();
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( { anchor: popoverAnchor } ),
+		[ popoverAnchor ]
+	);
+
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const dateSettings = getDateSettings();
 	const [ siteFormat = dateSettings.formats.date ] = useEntityProp(
@@ -68,7 +77,7 @@ export default function PostDateEdit( {
 	);
 
 	let postDate = date ? (
-		<time dateTime={ dateI18n( 'c', date ) } ref={ timeRef }>
+		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
 			{ dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
@@ -98,7 +107,7 @@ export default function PostDateEdit( {
 				{ date && ! isDescendentOfQueryLoop && (
 					<ToolbarGroup>
 						<Dropdown
-							popoverProps={ { anchorRef: timeRef.current } }
+							popoverProps={ popoverProps }
 							renderContent={ ( { onClose } ) => (
 								<PublishDateTimePicker
 									currentDate={ date }

package/src/post-featured-image/index.php

@@ -182,7 +182,7 @@ function get_block_core_post_featured_image_border_attributes( $attributes ) {
 		);
 	}
 
-	$styles     = gutenberg_style_engine_get_styles( array( 'border' => $border_styles ) );
+	$styles     = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
 	$attributes = array();
 	if ( ! empty( $styles['classnames'] ) ) {
 		$attributes['class'] = $styles['classnames'];