@wordpress/block-library 8.19.2 → 8.20.0

package/src/image/index.php

@@ -64,7 +64,12 @@ function render_block_core_image( $attributes, $content, $block ) {
 	}
 
 	if ( $lightbox_enabled ) {
-		return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block );
+		// This render needs to happen in a filter with priority 15 to ensure that it
+		// runs after the duotone filter and that duotone styles are applied to the image
+		// in the lightbox. We also need to ensure that the lightbox works with any plugins
+		// that might use filters as well. We can consider removing this in the future if the
+		// way the blocks are rendered changes, or if a new kind of filter is introduced.
+		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
 	}
 
 	return $processor->get_updated_html();
@@ -267,7 +272,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
             aria-modal="false"
             data-wp-effect="effects.core.image.initLightbox"
             data-wp-on--keydown="actions.core.image.handleKeydown"
-            data-wp-on--mousewheel="actions.core.image.hideLightbox"
+            data-wp-on--touchstart="actions.core.image.handleTouchStart"
+            data-wp-on--touchmove="actions.core.image.handleTouchMove"
+            data-wp-on--touchend="actions.core.image.handleTouchEnd"
             data-wp-on--click="actions.core.image.hideLightbox"
             >
                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">

package/src/image/style.scss

@@ -186,8 +186,8 @@
 
 	.close-button {
 		position: absolute;
-		top: calc(env(safe-area-inset-top) + 12.5px);
-		right: calc(env(safe-area-inset-right) + 12.5px);
+		top: calc(env(safe-area-inset-top) + 20px);
+		right: calc(env(safe-area-inset-right) + 20px);
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
@@ -297,10 +297,6 @@
 	}
 }
 
-html.wp-has-lightbox-open {
-	overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
 	0% {
 		opacity: 0;

package/src/image/view.js

@@ -17,6 +17,69 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
+/*
+ * Stores a context-bound scroll handler.
+ *
+ * This callback could be defined inline inside of the store
+ * object but it's created externally to avoid confusion about
+ * how its logic is called. This logic is not referenced directly
+ * by the directives in the markup because the scroll event we
+ * need to listen to is triggered on the window; so by defining it
+ * outside of the store, we signal that the behavior here is different.
+ * If we find a compelling reason to move it to the store, feel free.
+ *
+ * @type {Function}
+ */
+let scrollCallback;
+
+/*
+ * Tracks whether user is touching screen; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {boolean}
+ */
+let isTouching = false;
+
+/*
+ * Tracks the last time the screen was touched; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {number}
+ */
+let lastTouchTime = 0;
+
+/*
+ * Lightbox page-scroll handler: prevents scrolling.
+ *
+ * This handler is added to prevent scrolling behaviors that
+ * trigger content shift while the lightbox is open.
+ *
+ * It would be better to accomplish this through CSS alone, but
+ * using overflow: hidden is currently the only way to do so, and
+ * that causes the layout to shift and prevents the zoom animation
+ * from working in some cases because we're unable to account for
+ * the layout shift when doing the animation calculations. Instead,
+ * here we use JavaScript to prevent and reset the scrolling
+ * behavior. In the future, we may be able to use CSS or overflow: hidden
+ * instead to not rely on JavaScript, but this seems to be the best approach
+ * for now that provides the best visual experience.
+ *
+ * @param {Object} context Interactivity page context?
+ */
+function handleScroll( context ) {
+	// We can't override the scroll behavior on mobile devices
+	// because doing so breaks the pinch to zoom functionality, and we
+	// want to allow users to zoom in further on the high-res image.
+	if ( ! isTouching && Date.now() - lastTouchTime > 450 ) {
+		// We are unable to use event.preventDefault() to prevent scrolling
+		// because the scroll event can't be canceled, so we reset the position instead.
+		window.scrollTo(
+			context.core.image.scrollLeftReset,
+			context.core.image.scrollTopReset
+		);
+	}
+}
+
 store(
 	{
 		state: {
@@ -43,54 +106,49 @@ store(
 
 						context.core.image.lightboxEnabled = true;
 						setStyles( context, event );
-						// Hide overflow only when the animation is in progress,
-						// otherwise the removal of the scrollbars will draw attention
-						// to itself and look like an error
-						document.documentElement.classList.add(
-							'wp-has-lightbox-open'
+
+						context.core.image.scrollTopReset =
+							window.pageYOffset ||
+							document.documentElement.scrollTop;
+
+						// In most cases, this value will be 0, but this is included
+						// in case a user has created a page with horizontal scrolling.
+						context.core.image.scrollLeftReset =
+							window.pageXOffset ||
+							document.documentElement.scrollLeft;
+
+						// We define and bind the scroll callback here so
+						// that we can pass the context and as an argument.
+						// We may be able to change this in the future if we
+						// define the scroll callback in the store instead, but
+						// this approach seems to tbe clearest for now.
+						scrollCallback = handleScroll.bind( null, context );
+
+						// We need to add a scroll event listener to the window
+						// here because we are unable to otherwise access it via
+						// the Interactivity API directives. If we add a native way
+						// to access the window, we can remove this.
+						window.addEventListener(
+							'scroll',
+							scrollCallback,
+							false
 						);
 					},
-					hideLightbox: async ( { context, event } ) => {
+					hideLightbox: async ( { context } ) => {
 						context.core.image.hideAnimationEnabled = true;
 						if ( context.core.image.lightboxEnabled ) {
-							// If scrolling, wait a moment before closing the lightbox.
-							if (
-								context.core.image.lightboxAnimation === 'fade'
-							) {
-								context.core.image.scrollDelta += event.deltaY;
-								if (
-									event.type === 'mousewheel' &&
-									Math.abs(
-										window.scrollY -
-											context.core.image.scrollDelta
-									) < 10
-								) {
-									return;
-								}
-							} else if (
-								context.core.image.lightboxAnimation === 'zoom'
-							) {
-								// Disable scroll until the zoom animation ends.
-								// Get the current page scroll position
-								const scrollTop =
-									window.pageYOffset ||
-									document.documentElement.scrollTop;
-								const scrollLeft =
-									window.pageXOffset ||
-									document.documentElement.scrollLeft;
-								// if any scroll is attempted, set this to the previous value.
-								window.onscroll = function () {
-									window.scrollTo( scrollLeft, scrollTop );
-								};
-								// Enable scrolling after the animation finishes
-								setTimeout( function () {
-									window.onscroll = function () {};
-								}, 400 );
-							}
-
-							document.documentElement.classList.remove(
-								'wp-has-lightbox-open'
-							);
+							// We want to wait until the close animation is completed
+							// before allowing a user to scroll again. The duration of this
+							// animation is defined in the styles.scss and depends on if the
+							// animation is 'zoom' or 'fade', but in any case we should wait
+							// a few milliseconds longer than the duration, otherwise a user
+							// may scroll too soon and cause the animation to look sloppy.
+							setTimeout( function () {
+								window.removeEventListener(
+									'scroll',
+									scrollCallback
+								);
+							}, 450 );
 
 							context.core.image.lightboxEnabled = false;
 							context.core.image.lastFocusedElement.focus( {
@@ -139,6 +197,27 @@ store(
 							ref,
 						} );
 					},
+					handleTouchStart: () => {
+						isTouching = true;
+					},
+					handleTouchMove: ( { context, event } ) => {
+						// On mobile devices, we want to prevent triggering the
+						// scroll event because otherwise the page jumps around as
+						// we reset the scroll position. This also means that closing
+						// the lightbox requires that a user perform a simple tap. This
+						// may be changed in the future if we find a better alternative
+						// to override or reset the scroll position during swipe actions.
+						if ( context.core.image.lightboxEnabled ) {
+							event.preventDefault();
+						}
+					},
+					handleTouchEnd: () => {
+						// We need to wait a few milliseconds before resetting
+						// to ensure that pinch to zoom works consistently
+						// on mobile devices when the lightbox is open.
+						lastTouchTime = Date.now();
+						isTouching = false;
+					},
 				},
 			},
 		},
@@ -266,6 +345,13 @@ store(
 	}
 );
 
+/*
+ * Computes styles for the lightbox and adds them to the document.
+ *
+ * @function
+ * @param {Object} context - An Interactivity API context
+ * @param {Object} event - A triggering event
+ */
 function setStyles( context, event ) {
 	// The reference img element lies adjacent
 	// to the event target button in the DOM.
@@ -434,6 +520,13 @@ function setStyles( context, event ) {
 	`;
 }
 
+/*
+ * Debounces a function call.
+ *
+ * @function
+ * @param {Function} func - A function to be called
+ * @param {number} wait - The time to wait before calling the function
+ */
 function debounce( func, wait = 50 ) {
 	let timeout;
 	return () => {

package/src/loginout/block.json

@@ -19,6 +19,14 @@
 	},
 	"supports": {
 		"className": true,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/media-text/edit.js

@@ -244,7 +244,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 				<ToggleControl
 					__nextHasNoMarginBottom
 					label={ __( 'Crop image to fill entire column' ) }
-					checked={ imageFill }
+					checked={ !! imageFill }
 					onChange={ () =>
 						setAttributes( {
 							imageFill: ! imageFill,

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

@@ -4,14 +4,19 @@
 import { Warning } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
 
 function DeletedNavigationWarning( { onCreateNew } ) {
 	return (
 		<Warning>
-			{ __( 'Navigation menu has been deleted or is unavailable. ' ) }
-			<Button onClick={ onCreateNew } variant="link">
-				{ __( 'Create a new menu?' ) }
-			</Button>
+			{ createInterpolateElement(
+				__(
+					'Navigation menu has been deleted or is unavailable. <button>Create a new menu?</button>'
+				),
+				{
+					button: <Button onClick={ onCreateNew } variant="link" />,
+				}
+			) }
 		</Warning>
 	);
 }

package/src/navigation/edit/index.js

@@ -93,6 +93,7 @@ function Navigation( {
 	// navigation block settings.
 	hasSubmenuIndicatorSetting = true,
 	customPlaceholder: CustomPlaceholder = null,
+	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	const {
 		openSubmenusOnClick,
@@ -293,23 +294,31 @@ function Navigation( {
 	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
-		className: classnames( className, {
-			'items-justified-right': justifyContent === 'right',
-			'items-justified-space-between': justifyContent === 'space-between',
-			'items-justified-left': justifyContent === 'left',
-			'items-justified-center': justifyContent === 'center',
-			'is-vertical': orientation === 'vertical',
-			'no-wrap': flexWrap === 'nowrap',
-			'is-responsive': isResponsive,
-			'has-text-color': !! textColor.color || !! textColor?.class,
-			[ getColorClassName( 'color', textColor?.slug ) ]:
-				!! textColor?.slug,
-			'has-background': !! backgroundColor.color || backgroundColor.class,
-			[ getColorClassName( 'background-color', backgroundColor?.slug ) ]:
-				!! backgroundColor?.slug,
-			[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
-			'block-editor-block-content-overlay': hasBlockOverlay,
-		} ),
+		className: classnames(
+			className,
+			{
+				'items-justified-right': justifyContent === 'right',
+				'items-justified-space-between':
+					justifyContent === 'space-between',
+				'items-justified-left': justifyContent === 'left',
+				'items-justified-center': justifyContent === 'center',
+				'is-vertical': orientation === 'vertical',
+				'no-wrap': flexWrap === 'nowrap',
+				'is-responsive': isResponsive,
+				'has-text-color': !! textColor.color || !! textColor?.class,
+				[ getColorClassName( 'color', textColor?.slug ) ]:
+					!! textColor?.slug,
+				'has-background':
+					!! backgroundColor.color || backgroundColor.class,
+				[ getColorClassName(
+					'background-color',
+					backgroundColor?.slug
+				) ]: !! backgroundColor?.slug,
+				[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
+				'block-editor-block-content-overlay': hasBlockOverlay,
+			},
+			layoutClassNames
+		),
 		style: {
 			color: ! textColor?.slug && textColor?.color,
 			backgroundColor: ! backgroundColor?.slug && backgroundColor?.color,

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

@@ -118,6 +118,7 @@ export default function NavigationInnerBlocks( {
 					: false,
 			placeholder: showPlaceholder ? placeholder : undefined,
 			__experimentalCaptureToolbars: true,
+			__unstableDisableLayoutClassNames: true,
 		}
 	);
 

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

@@ -44,7 +44,15 @@ export function getSuggestionsQuery( type, kind ) {
 			if ( kind === 'post-type' ) {
 				return { type: 'post', subtype: type };
 			}
-			return {};
+			return {
+				// for custom link which has no type
+				// always show pages as initial suggestions
+				initialSuggestionsSearchOptions: {
+					type: 'post',
+					subtype: 'page',
+					perPage: 20,
+				},
+			};
 	}
 }
 

package/src/navigation-link/style.scss

@@ -5,7 +5,6 @@
 .wp-block-navigation {
 	// This wraps just the innermost text for custom menu items.
 	.wp-block-navigation-item__label {
-		word-break: normal;
 		overflow-wrap: break-word;
 	}
 

package/src/paragraph/edit.js

@@ -155,7 +155,7 @@ function ParagraphBlock( {
 				onRemove={ onRemove }
 				aria-label={
 					content
-						? __( 'Paragraph block' )
+						? __( 'Block: Paragraph' )
 						: __(
 								'Empty block; start writing or type forward slash to choose a block'
 						  )

package/src/post-featured-image/style.scss

@@ -39,4 +39,8 @@
 			}
 		}
 	}
+
+	&:where(.alignleft, .alignright) {
+		width: 100%;
+	}
 }

package/src/post-template/style.scss

@@ -37,3 +37,23 @@
 		grid-template-columns: 1fr;
 	}
 }
+
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+	float: right;
+	margin-inline-start: 2em;
+	margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+	float: left;
+	margin-inline-start: 0;
+	margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+	margin-inline-start: auto;
+	margin-inline-end: auto;
+}

package/src/post-title/index.php

@@ -38,7 +38,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $block->context['postId'] ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', esc_url( get_the_permalink( $block->context['postId'] ) ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
 
 	$classes = array();

package/src/query/view.js

@@ -11,10 +11,10 @@ const isValidLink = ( ref ) =>
 	ref.origin === window.location.origin;
 
 const isValidEvent = ( event ) =>
-	event.button === 0 && // left clicks only
-	! event.metaKey && // open in new tab (mac)
-	! event.ctrlKey && // open in new tab (windows)
-	! event.altKey && // download
+	event.button === 0 && // Left clicks only.
+	! event.metaKey && // Open in new tab (Mac).
+	! event.ctrlKey && // Open in new tab (Windows).
+	! event.altKey && // Download.
 	! event.shiftKey &&
 	! event.defaultPrevented;
 
@@ -39,7 +39,7 @@ store( {
 						const id = ref.closest( '[data-wp-navigation-id]' )
 							.dataset.wpNavigationId;
 
-						// Don't announce the navigation immediately, wait 300 ms.
+						// Don't announce the navigation immediately, wait 400 ms.
 						const timeout = setTimeout( () => {
 							context.core.query.message =
 								context.core.query.loadingText;

package/src/rss/edit.js

@@ -69,7 +69,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					>
 						<HStack wrap>
 							<InputControl
-								__next36pxDefaultSize
+								__next40pxDefaultSize
 								placeholder={ __( 'Enter URL here…' ) }
 								value={ feedURL }
 								onChange={ ( value ) =>
@@ -77,7 +77,11 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 								}
 								className="wp-block-rss__placeholder-input"
 							/>
-							<Button variant="primary" type="submit">
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								type="submit"
+							>
 								{ __( 'Use URL' ) }
 							</Button>
 						</HStack>

package/src/search/edit.js

@@ -84,7 +84,7 @@ export default function SearchEdit( {
 		style,
 	} = attributes;
 
-	const insertedInNavigationBlock = useSelect(
+	const wasJustInsertedIntoNavigationBlock = useSelect(
 		( select ) => {
 			const { getBlockParentsByBlockName, wasBlockJustInserted } =
 				select( blockEditorStore );
@@ -98,15 +98,21 @@ export default function SearchEdit( {
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	if ( insertedInNavigationBlock ) {
-		// This side-effect should not create an undo level.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( {
-			showLabel: false,
-			buttonUseIcon: true,
-			buttonPosition: 'button-inside',
-		} );
-	}
+	useEffect( () => {
+		if ( wasJustInsertedIntoNavigationBlock ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				showLabel: false,
+				buttonUseIcon: true,
+				buttonPosition: 'button-inside',
+			} );
+		}
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		wasJustInsertedIntoNavigationBlock,
+		setAttributes,
+	] );
 
 	const borderRadius = style?.border?.radius;
 	const borderProps = useBorderProps( attributes );

package/src/search/editor.scss

@@ -13,6 +13,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		text-align: center;
 	}
 
 	&__components-button-group {

package/src/search/style.scss

@@ -55,7 +55,11 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 		margin-left: 0;
 		// Prevent unintended text wrapping.
 		flex-shrink: 0;
-		// Ensure minimum input field width in small viewports.
+		max-width: 100%;
+	}
+
+	// Ensure minimum input field width in small viewports.
+	.wp-block-search__button[aria-expanded="true"] {
 		max-width: calc(100% - 100px);
 	}
 }

package/src/social-link/social-list.js

@@ -14,7 +14,7 @@ import { ChainIcon } from './icons';
  *
  * @param {string} name key for a social service (lowercase slug)
  *
- * @return {WPComponent} Icon component for social service.
+ * @return {Component} Icon component for social service.
  */
 export const getIconBySite = ( name ) => {
 	const variation = variations.find( ( v ) => v.name === name );

package/src/table-of-contents/edit.js

@@ -19,6 +19,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { store as noticeStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -40,7 +42,7 @@ import { useObserveHeadings } from './hooks';
  * @param {string}                       props.clientId
  * @param {(attributes: Object) => void} props.setAttributes
  *
- * @return {WPComponent} The component.
+ * @return {Component} The component.
  */
 export default function TableOfContentsEdit( {
 	attributes: { headings = [], onlyIncludeCurrentPage },
@@ -50,6 +52,24 @@ export default function TableOfContentsEdit( {
 	useObserveHeadings( clientId );
 
 	const blockProps = useBlockProps();
+	const instanceId = useInstanceId(
+		TableOfContentsEdit,
+		'table-of-contents'
+	);
+
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+	let noticeId;
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		// Remove previous warning if any, to show one at a time per block.
+		removeNotice( noticeId );
+		noticeId = `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`;
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: noticeId,
+			type: 'snackbar',
+		} );
+	};
 
 	const canInsertList = useSelect(
 		( select ) => {
@@ -137,8 +157,12 @@ export default function TableOfContentsEdit( {
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol inert="true">
-					<TableOfContentsList nestedHeadingList={ headingTree } />
+				<ol>
+					<TableOfContentsList
+						nestedHeadingList={ headingTree }
+						disableLinkActivation={ true }
+						onClick={ showRedirectionPreventedNotice }
+					/>
 				</ol>
 			</nav>
 			{ toolbarControls }