@wordpress/block-library 9.6.1 → 9.7.1-next.5368f64a9.0

package/src/media-text/index.php

@@ -29,15 +29,32 @@ function render_block_core_media_text( $attributes, $content ) {
 		return $content;
 	}
 
+	$has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
+	$image_fill         = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
+	$focal_point        = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
+	$unique_id          = 'wp-block-media-text__media-' . wp_unique_id();
+
+	$block_tag_processor = new WP_HTML_Tag_Processor( $content );
+	$block_query         = array(
+		'tag_name'   => 'div',
+		'class_name' => 'wp-block-media-text',
+	);
+
+	while ( $block_tag_processor->next_tag( $block_query ) ) {
+		if ( $image_fill ) {
+			// The markup below does not work with the deprecated `is-image-fill` class.
+			$block_tag_processor->remove_class( 'is-image-fill' );
+			$block_tag_processor->add_class( 'is-image-fill-element' );
+		}
+	}
+
+	$content = $block_tag_processor->get_updated_html();
+
 	$media_tag_processor   = new WP_HTML_Tag_Processor( $content );
 	$wrapping_figure_query = array(
 		'tag_name'   => 'figure',
 		'class_name' => 'wp-block-media-text__media',
 	);
-	$has_media_on_right    = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
-	$image_fill            = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
-	$focal_point           = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
-	$unique_id             = 'wp-block-media-text__media-' . wp_unique_id();
 
 	if ( $has_media_on_right ) {
 		// Loop through all the figure tags and set a bookmark on the last figure tag.
@@ -46,59 +63,52 @@ function render_block_core_media_text( $attributes, $content ) {
 		}
 		if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
 			$media_tag_processor->seek( 'last_figure' );
-			if ( $image_fill ) {
-				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
-			} else {
-				// Insert a unique ID to identify the figure tag.
-				$media_tag_processor->set_attribute( 'id', $unique_id );
-			}
+			// Insert a unique ID to identify the figure tag.
+			$media_tag_processor->set_attribute( 'id', $unique_id );
 		}
 	} else {
 		if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
-			if ( $image_fill ) {
-				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
-			} else {
-				// Insert a unique ID to identify the figure tag.
-				$media_tag_processor->set_attribute( 'id', $unique_id );
-			}
+			// Insert a unique ID to identify the figure tag.
+			$media_tag_processor->set_attribute( 'id', $unique_id );
 		}
 	}
 
 	$content = $media_tag_processor->get_updated_html();
 
-	// If the image is not set to fill, add the image tag inside the figure tag,
-	// and update the image attributes in order to display the featured image.
-	if ( ! $image_fill ) {
-		$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
-		$image_tag       = '<img class="wp-block-media-text__featured_image">';
-		$content         = preg_replace(
-			'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
-			'$1' . $image_tag,
-			$content
-		);
+	// Add the image tag inside the figure tag, and update the image attributes
+	// in order to display the featured image.
+	$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
+	$image_tag       = '<img class="wp-block-media-text__featured_image">';
+	$content         = preg_replace(
+		'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
+		'$1' . $image_tag,
+		$content
+	);
 
-		$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+	$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+	if ( $image_tag_processor->next_tag(
+		array(
+			'tag_name' => 'figure',
+			'id'       => $unique_id,
+		)
+	) ) {
+		// The ID is only used to ensure that the correct figure tag is selected,
+		// and can now be removed.
+		$image_tag_processor->remove_attribute( 'id' );
 		if ( $image_tag_processor->next_tag(
 			array(
-				'tag_name' => 'figure',
-				'id'       => $unique_id,
+				'tag_name'   => 'img',
+				'class_name' => 'wp-block-media-text__featured_image',
 			)
 		) ) {
-			// The ID is only used to ensure that the correct figure tag is selected,
-			// and can now be removed.
-			$image_tag_processor->remove_attribute( 'id' );
-			if ( $image_tag_processor->next_tag(
-				array(
-					'tag_name'   => 'img',
-					'class_name' => 'wp-block-media-text__featured_image',
-				)
-			) ) {
-				$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
-				$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
-				$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
-
-				$content = $image_tag_processor->get_updated_html();
+			$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+			$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+			$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
+			if ( $image_fill ) {
+				$image_tag_processor->set_attribute( 'style', 'object-position:' . $focal_point . ';' );
 			}
+
+			$content = $image_tag_processor->get_updated_html();
 		}
 	}
 

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

@@ -22,25 +22,17 @@ import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from './image-fill';
+
 /**
  * Constants
  */
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const noop = () => {};
 
-export function imageFillStyles( url, focalPoint ) {
-	return url
-		? {
-				backgroundImage: `url(${ url })`,
-				backgroundPosition: focalPoint
-					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
-							focalPoint.y * 100
-					  ) }%`
-					: `50% 50%`,
-		  }
-		: {};
-}
-
 const ResizableBoxContainer = forwardRef(
 	( { isSelected, isStackedOnMobile, ...props }, ref ) => {
 		const isMobile = useViewportMatch( 'small', '<' );
@@ -62,22 +54,18 @@ function ToolbarEditButton( {
 	onSelectMedia,
 	toggleUseFeaturedImage,
 	useFeaturedImage,
-	featuredImageURL,
 } ) {
 	return (
 		<BlockControls group="other">
 			<MediaReplaceFlow
 				mediaId={ mediaId }
-				mediaUrl={
-					useFeaturedImage && featuredImageURL
-						? featuredImageURL
-						: mediaUrl
-				}
+				mediaURL={ mediaUrl }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				accept="image/*,video/*"
 				onSelect={ onSelectMedia }
 				onToggleFeaturedImage={ toggleUseFeaturedImage }
 				useFeaturedImage={ useFeaturedImage }
+				onReset={ () => onSelectMedia( undefined ) }
 			/>
 		</BlockControls>
 	);
@@ -133,6 +121,7 @@ function MediaContainer( props, ref ) {
 		useFeaturedImage,
 		featuredImageURL,
 		featuredImageAlt,
+		refMedia,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -155,7 +144,7 @@ function MediaContainer( props, ref ) {
 			left: enableResize && mediaPosition === 'right',
 		};
 
-		const backgroundStyles =
+		const positionStyles =
 			mediaType === 'image' && imageFill
 				? imageFillStyles( mediaUrl || featuredImageURL, focalPoint )
 				: {};
@@ -163,11 +152,23 @@ function MediaContainer( props, ref ) {
 		const mediaTypeRenderers = {
 			image: () =>
 				useFeaturedImage && featuredImageURL ? (
-					<img src={ featuredImageURL } alt={ featuredImageAlt } />
+					<img
+						ref={ refMedia }
+						src={ featuredImageURL }
+						alt={ featuredImageAlt }
+						style={ positionStyles }
+					/>
 				) : (
-					mediaUrl && <img src={ mediaUrl } alt={ mediaAlt } />
+					mediaUrl && (
+						<img
+							ref={ refMedia }
+							src={ mediaUrl }
+							alt={ mediaAlt }
+							style={ positionStyles }
+						/>
+					)
 				),
-			video: () => <video controls src={ mediaUrl } />,
+			video: () => <video controls ref={ refMedia } src={ mediaUrl } />,
 		};
 
 		return (
@@ -178,7 +179,6 @@ function MediaContainer( props, ref ) {
 					'editor-media-container__resizer',
 					{ 'is-transient': isTemporaryMedia }
 				) }
-				style={ backgroundStyles }
 				size={ { width: mediaWidth + '%' } }
 				minWidth="10%"
 				maxWidth="100%"
@@ -200,7 +200,6 @@ function MediaContainer( props, ref ) {
 					}
 					mediaId={ mediaId }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
-					useFeaturedImage={ useFeaturedImage }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }
@@ -208,6 +207,7 @@ function MediaContainer( props, ref ) {
 				{ ! featuredImageURL && useFeaturedImage && (
 					<Placeholder
 						className="wp-block-media-text--placeholder-image"
+						style={ positionStyles }
 						withIllustration
 					/>
 				) }

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

@@ -44,8 +44,6 @@ const ICON_TYPE = {
 	RETRY: 'retry',
 };
 
-export { imageFillStyles } from './media-container.js';
-
 class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );

package/src/media-text/save.js

@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { imageFillStyles } from './media-container';
+import { imageFillStyles } from './image-fill';
 import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
@@ -42,11 +42,16 @@ export default function save( { attributes } ) {
 		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 	} );
 
+	const positionStyles = imageFill
+		? imageFillStyles( mediaUrl, focalPoint )
+		: {};
+
 	let image = mediaUrl ? (
 		<img
 			src={ mediaUrl }
 			alt={ mediaAlt }
 			className={ imageClasses || null }
+			style={ positionStyles }
 		/>
 	) : null;
 
@@ -71,11 +76,8 @@ export default function save( { attributes } ) {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-		'is-image-fill': imageFill,
+		'is-image-fill-element': imageFill,
 	} );
-	const backgroundStyles = imageFill
-		? imageFillStyles( mediaUrl, focalPoint )
-		: {};
 
 	let gridTemplateColumns;
 	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
@@ -96,10 +98,7 @@ export default function save( { attributes } ) {
 						className: 'wp-block-media-text__content',
 					} ) }
 				/>
-				<figure
-					className="wp-block-media-text__media"
-					style={ backgroundStyles }
-				>
+				<figure className="wp-block-media-text__media">
 					{ ( mediaTypeRenders[ mediaType ] || noop )() }
 				</figure>
 			</div>
@@ -107,10 +106,7 @@ export default function save( { attributes } ) {
 	}
 	return (
 		<div { ...useBlockProps.save( { className, style } ) }>
-			<figure
-				className="wp-block-media-text__media"
-				style={ backgroundStyles }
-			>
+			<figure className="wp-block-media-text__media">
 				{ ( mediaTypeRenders[ mediaType ] || noop )() }
 			</figure>
 			<div

package/src/media-text/style.scss

@@ -80,6 +80,7 @@
 	vertical-align: middle;
 }
 
+/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
 .wp-block-media-text.is-image-fill > .wp-block-media-text__media {
 	height: 100%;
 	min-height: 250px;
@@ -102,6 +103,26 @@
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
+
+/* Image fill for versions 8 and onwards */
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+	position: relative;
+	height: 100%;
+	min-height: 250px;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
+	display: block;
+	height: 100%;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
 /*
 * Here we here not able to use a mobile first CSS approach.
 * Custom widths are set using inline styles, and on mobile,

package/src/media-text/test/image-fill.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from '../image-fill';
+
+describe( 'imageFillStyles()', () => {
+	it( 'should return centered object position', () => {
+		const { objectPosition } = imageFillStyles( 'image.jpg' );
+		expect( objectPosition ).toBe( '50% 50%' );
+	} );
+
+	it( 'should return custom object position', () => {
+		const { objectPosition } = imageFillStyles( 'image.jpg', {
+			x: 0.56,
+			y: 0.57,
+		} );
+		expect( objectPosition ).toBe( '56% 57%' );
+	} );
+} );

package/src/missing/edit.js

@@ -49,7 +49,12 @@ export default function MissingEdit( { attributes, clientId } ) {
 	let messageHTML;
 
 	const convertToHtmlButton = (
-		<Button key="convert" onClick={ convertToHTML } variant="primary">
+		<Button
+			__next40pxDefaultSize
+			key="convert"
+			onClick={ convertToHTML }
+			variant="primary"
+		>
 			{ __( 'Keep as HTML' ) }
 		</Button>
 	);
@@ -69,7 +74,7 @@ export default function MissingEdit( { attributes, clientId } ) {
 		messageHTML = sprintf(
 			/* translators: %s: block name */
 			__(
-				'Your site doesn’t include support for the "%s" block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.'
+				'Your site doesn’t include support for the "%s" block. You can leave it as-is, convert it to custom HTML, or remove it.'
 			),
 			originalName
 		);
@@ -78,7 +83,7 @@ export default function MissingEdit( { attributes, clientId } ) {
 		messageHTML = sprintf(
 			/* translators: %s: block name */
 			__(
-				'Your site doesn’t include support for the "%s" block. You can leave this block intact or remove it entirely.'
+				'Your site doesn’t include support for the "%s" block. You can leave it as-is or remove it.'
 			),
 			originalName
 		);

package/src/navigation/edit/deleted-navigation-warning.js

@@ -2,22 +2,32 @@
  * WordPress dependencies
  */
 import { Warning } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 
-function DeletedNavigationWarning( { onCreateNew } ) {
-	return (
-		<Warning>
-			{ createInterpolateElement(
-				__(
-					'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
-				),
-				{
-					button: <Button onClick={ onCreateNew } variant="link" />,
-				}
-			) }
-		</Warning>
+function DeletedNavigationWarning( { onCreateNew, isNotice = false } ) {
+	const message = createInterpolateElement(
+		__(
+			'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
+		),
+		{
+			button: (
+				<Button
+					__next40pxDefaultSize
+					onClick={ onCreateNew }
+					variant="link"
+				/>
+			),
+		}
+	);
+
+	return isNotice ? (
+		<Notice status="warning" isDismissible={ false }>
+			{ message }
+		</Notice>
+	) : (
+		<Warning>{ message }</Warning>
 	);
 }
 

package/src/navigation/edit/index.js

@@ -591,6 +591,7 @@ function Navigation( {
 						{ isResponsive && (
 							<>
 								<Button
+									__next40pxDefaultSize
 									className={ overlayMenuPreviewClasses }
 									onClick={ () => {
 										setOverlayMenuPreview(

package/src/navigation/edit/menu-inspector-controls.js

@@ -94,7 +94,9 @@ const MainContent = ( {
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
-		return <DeletedNavigationWarning onCreateNew={ onCreateNew } />;
+		return (
+			<DeletedNavigationWarning onCreateNew={ onCreateNew } isNotice />
+		);
 	}
 
 	if ( isLoading ) {

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -19,6 +19,7 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="wp-block-navigation-delete-menu-button"
 				variant="secondary"
 				isDestructive

package/src/navigation/edit/placeholder/index.js

@@ -76,6 +76,7 @@ export default function NavigationPlaceholder( {
 
 						{ canUserCreateNavigationMenus && (
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								onClick={ onCreateEmpty }
 							>

package/src/navigation/edit/responsive-wrapper.js

@@ -79,6 +79,7 @@ export default function ResponsiveWrapper( {
 		<>
 			{ ! isOpen && (
 				<Button
+					__next40pxDefaultSize
 					aria-haspopup="true"
 					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
@@ -100,6 +101,7 @@ export default function ResponsiveWrapper( {
 				>
 					<div { ...dialogProps }>
 						<Button
+							__next40pxDefaultSize
 							className="wp-block-navigation__responsive-container-close"
 							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -20,13 +20,13 @@ export default function UnsavedInnerBlocks( {
 	createNavigationMenu,
 	hasSelection,
 } ) {
-	const originalBlocks = useRef();
+	const originalBlocksRef = useRef();
 
 	useEffect( () => {
 		// Initially store the uncontrolled inner blocks for
 		// dirty state comparison.
-		if ( ! originalBlocks?.current ) {
-			originalBlocks.current = blocks;
+		if ( ! originalBlocksRef?.current ) {
+			originalBlocksRef.current = blocks;
 		}
 	}, [ blocks ] );
 
@@ -38,7 +38,7 @@ export default function UnsavedInnerBlocks( {
 	// entity records. As a result we need to perform a deep equality check skipping
 	// the page list's inner blocks.
 	const innerBlocksAreDirty = areBlocksDirty(
-		originalBlocks?.current,
+		originalBlocksRef?.current,
 		blocks
 	);
 

package/src/navigation/editor.scss

@@ -5,6 +5,10 @@
 // Undo default editor styles.
 // These need extra specificity.
 .editor-styles-wrapper .wp-block-navigation {
+	// Extra specificity is applied to do two things in classic themes:
+	// 1. Override the auto margin from alignment styles. This is needed as the `ul` element
+	//    has a `wp-block` class applied to it, even though it's not a block.
+	// 2. Override list indentation that targets `ul,ol` elements.
 	ul {
 		margin-top: 0;
 		margin-bottom: 0;
@@ -100,7 +104,6 @@
 		background: $gray-900;
 		padding: 0;
 		width: $button-size-small;
-		border-radius: $radius-block-ui;
 		margin-right: 0;
 		margin-left: auto;
 	}
@@ -322,7 +325,7 @@ $color-control-label-height: 20px;
 }
 
 .wp-block-navigation-placeholder__controls {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	display: none;
@@ -478,7 +481,7 @@ $color-control-label-height: 20px;
 	}
 }
 
-// The iframe makes these rules a lot simpler.
+// `body.editor-styles-wrapper` ensures this only applies to the iframed editor.
 body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
@@ -560,7 +563,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	width: 100%;
 	background-color: $gray-100;
 	padding: 0 $grid-unit-30;
-	height: $grid-unit-40 * 2;
+
+	// Adding !important to override default 40px size.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
+	height: $grid-unit-40 * 2 !important;
+
 	margin-bottom: $grid-unit-15;
 
 	&.open {

package/src/navigation/index.php

@@ -624,7 +624,7 @@ class WP_Navigation_Block_Renderer {
 		if ( static::is_interactive( $attributes, $inner_blocks ) ) {
 			$suffix = wp_scripts_get_suffix();
 			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build/interactivity/navigation.min.js' );
+				$module_url = gutenberg_url( '/build-module/block-library/navigation/view.min.js' );
 			}
 
 			wp_register_script_module(

package/src/navigation-link/link-ui.js

@@ -8,7 +8,7 @@ import {
 	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	__experimentalLinkControl as LinkControl,
 	store as blockEditorStore,
@@ -28,7 +28,7 @@ import {
 } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { chevronLeftSmall, plus } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall, plus } from '@wordpress/icons';
 import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
 
 /**
@@ -123,7 +123,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 
 			<Button
 				className="link-ui-block-inserter__back"
-				icon={ chevronLeftSmall }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
 				onClick={ ( e ) => {
 					e.preventDefault();
 					onBack();
@@ -310,6 +310,7 @@ const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 	return (
 		<VStack className="link-ui-tools">
 			<Button
+				__next40pxDefaultSize
 				ref={ addBlockButtonRef }
 				icon={ plus }
 				onClick={ ( e ) => {

package/src/page-list/convert-to-links-modal.js

@@ -31,10 +31,15 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 				{ convertDescription }
 			</p>
 			<div className="wp-block-page-list-modal-buttons">
-				<Button variant="tertiary" onClick={ onClose }>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ onClose }
+				>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button
+					__next40pxDefaultSize
 					variant="primary"
 					accessibleWhenDisabled
 					disabled={ disabled }