@wordpress/block-library 8.12.0 → 8.12.2

package/src/image/interactivity.js

@@ -21,28 +21,70 @@ store( {
 	actions: {
 		core: {
 			image: {
-				showLightbox: ( { context } ) => {
+				showLightbox: ( { context, event } ) => {
 					context.core.image.initialized = true;
-					context.core.image.lightboxEnabled = true;
 					context.core.image.lastFocusedElement =
 						window.document.activeElement;
-					context.core.image.scrollPosition = window.scrollY;
-					document.documentElement.classList.add(
-						'has-lightbox-open'
-					);
+					context.core.image.scrollDelta = 0;
+
+					// Since the img is hidden and its src not loaded until
+					// the lightbox is opened, let's create an img element on the fly
+					// so we can get the dimensions we need to calculate the styles
+					const imgDom = document.createElement( 'img' );
+
+					imgDom.onload = function () {
+						// Enable the lightbox only after the image
+						// is loaded to prevent flashing of unstyled content
+						context.core.image.lightboxEnabled = true;
+						if ( context.core.image.lightboxAnimation === 'zoom' ) {
+							setZoomStyles( imgDom, 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(
+							'has-lightbox-open'
+						);
+					};
+					imgDom.setAttribute( 'src', context.core.image.imageSrc );
 				},
 				hideLightbox: async ( { context, event } ) => {
+					context.core.image.hideAnimationEnabled = true;
 					if ( context.core.image.lightboxEnabled ) {
 						// If scrolling, wait a moment before closing the lightbox.
-						if (
-							event.type === 'mousewheel' &&
-							Math.abs(
-								window.scrollY -
-									context.core.image.scrollPosition
-							) < 5
+						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'
 						) {
-							return;
+							// 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(
 							'has-lightbox-open'
 						);
@@ -101,6 +143,9 @@ store( {
 		core: {
 			image: {
 				initLightbox: async ( { context, ref } ) => {
+					context.core.image.figureRef =
+						ref.querySelector( 'figure' );
+					context.core.image.imageRef = ref.querySelector( 'img' );
 					if ( context.core.image.lightboxEnabled ) {
 						const focusableElements =
 							ref.querySelectorAll( focusableSelectors );
@@ -116,3 +161,100 @@ store( {
 		},
 	},
 } );
+
+function setZoomStyles( imgDom, context, event ) {
+	let targetWidth = imgDom.naturalWidth;
+	let targetHeight = imgDom.naturalHeight;
+
+	const verticalPadding = 40;
+
+	// As per the design, let's allow the image to stretch
+	// to the full width of its containing figure, but for the height,
+	// constrain it with a fixed padding
+	const containerWidth = context.core.image.figureRef.clientWidth;
+
+	// The lightbox image has `positione:absolute` and
+	// ignores its parent's padding, so let's set the padding here,
+	// to be used when calculating the image width and positioning
+	let horizontalPadding = 0;
+	if ( containerWidth > 480 ) {
+		horizontalPadding = 40;
+	} else if ( containerWidth > 1920 ) {
+		horizontalPadding = 80;
+	}
+
+	const containerHeight =
+		context.core.image.figureRef.clientHeight - verticalPadding * 2;
+
+	// Check difference between the image and figure dimensions
+	const widthOverflow = Math.abs(
+		Math.min( containerWidth - targetWidth, 0 )
+	);
+	const heightOverflow = Math.abs(
+		Math.min( containerHeight - targetHeight, 0 )
+	);
+
+	// If image is larger than its container any dimension, resize along its largest axis.
+	// For vertically oriented devices, always maximize the width.
+	if ( widthOverflow > 0 || heightOverflow > 0 ) {
+		if (
+			widthOverflow >= heightOverflow ||
+			containerHeight >= containerWidth
+		) {
+			targetWidth = containerWidth - horizontalPadding * 2;
+			targetHeight =
+				imgDom.naturalHeight * ( targetWidth / imgDom.naturalWidth );
+		} else {
+			targetHeight = containerHeight;
+			targetWidth =
+				imgDom.naturalWidth * ( targetHeight / imgDom.naturalHeight );
+		}
+	}
+
+	// The reference img element lies adjacent to the event target button in the DOM
+	const { x: originLeft, y: originTop } =
+		event.target.nextElementSibling.getBoundingClientRect();
+	const scaleWidth =
+		event.target.nextElementSibling.offsetWidth / targetWidth;
+	const scaleHeight =
+		event.target.nextElementSibling.offsetHeight / targetHeight;
+
+	// Get values used to center the image
+	let targetLeft = 0;
+	if ( targetWidth >= containerWidth ) {
+		targetLeft = horizontalPadding;
+	} else {
+		targetLeft = ( containerWidth - targetWidth ) / 2;
+	}
+	let targetTop = 0;
+	if ( targetHeight >= containerHeight ) {
+		targetTop = verticalPadding;
+	} else {
+		targetTop = ( containerHeight - targetHeight ) / 2 + verticalPadding;
+	}
+
+	const root = document.documentElement;
+	root.style.setProperty( '--lightbox-scale-width', scaleWidth );
+	root.style.setProperty( '--lightbox-scale-height', scaleHeight );
+	root.style.setProperty( '--lightbox-image-max-width', targetWidth + 'px' );
+	root.style.setProperty(
+		'--lightbox-image-max-height',
+		targetHeight + 'px'
+	);
+	root.style.setProperty(
+		'--lightbox-initial-left-position',
+		originLeft + 'px'
+	);
+	root.style.setProperty(
+		'--lightbox-initial-top-position',
+		originTop + 'px'
+	);
+	root.style.setProperty(
+		'--lightbox-target-left-position',
+		targetLeft + 'px'
+	);
+	root.style.setProperty(
+		'--lightbox-target-top-position',
+		targetTop + 'px'
+	);
+}

package/src/image/save.js

@@ -24,6 +24,8 @@ export default function save( { attributes } ) {
 		linkClass,
 		width,
 		height,
+		aspectRatio,
+		scale,
 		id,
 		linkTarget,
 		sizeSlug,
@@ -52,7 +54,11 @@ export default function save( { attributes } ) {
 			src={ url }
 			alt={ alt }
 			className={ imageClasses || undefined }
-			style={ borderProps.style }
+			style={ {
+				...borderProps.style,
+				aspectRatio,
+				objectFit: scale,
+			} }
 			width={ width }
 			height={ height }
 			title={ title }

package/src/image/style.scss

@@ -204,7 +204,6 @@
 		justify-content: center;
 		align-items: center;
 		flex-direction: column;
-		padding: 30px;
 
 		figcaption {
 			display: none;
@@ -231,24 +230,69 @@
 		opacity: 0.9;
 	}
 
-	&.initialized {
-		animation: both turn-off-visibility 300ms;
+	&.fade {
+		&.active {
+			visibility: visible;
+			animation: both turn-on-visibility 0.25s;
 
+			img {
+				animation: both turn-on-visibility 0.3s;
+			}
+		}
+		&.hideanimationenabled {
+			&:not(.active) {
+				animation: both turn-off-visibility 0.3s;
+
+				img {
+					animation: both turn-off-visibility 0.25s;
+				}
+			}
+		}
+	}
+
+	&.zoom {
 		img {
-			animation: both turn-off-visibility 250ms;
+			position: absolute;
+			transform-origin: top left;
+			width: var(--lightbox-image-max-width);
+			height: var(--lightbox-image-max-height);
 		}
 
 		&.active {
+			opacity: 1;
 			visibility: visible;
-			animation: both turn-on-visibility 250ms;
+			.wp-block-image img {
+				animation: lightbox-zoom-in 0.4s forwards;
 
-			img {
-				animation: both turn-on-visibility 300ms;
+				@media (prefers-reduced-motion) {
+					animation: both turn-on-visibility 0.4s;
+				}
+			}
+			.scrim {
+				animation: turn-on-visibility 0.4s forwards;
+			}
+		}
+		&.hideanimationenabled {
+			&:not(.active) {
+				.wp-block-image img {
+					animation: lightbox-zoom-out 0.4s forwards;
+
+					@media (prefers-reduced-motion) {
+						animation: both turn-off-visibility 0.4s;
+					}
+				}
+				.scrim {
+					animation: turn-off-visibility 0.4s forwards;
+				}
 			}
 		}
 	}
 }
 
+html.has-lightbox-open {
+	overflow: hidden;
+}
+
 @keyframes turn-on-visibility {
 	0% {
 		opacity: 0;
@@ -273,6 +317,32 @@
 	}
 }
 
-html.has-lightbox-open {
-	overflow: hidden;
+@keyframes lightbox-zoom-in {
+	0% {
+		left: var(--lightbox-initial-left-position);
+		top: var(--lightbox-initial-top-position);
+		transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+	}
+	100% {
+		left: var(--lightbox-target-left-position);
+		top: var(--lightbox-target-top-position);
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes lightbox-zoom-out {
+	0% {
+		visibility: visible;
+		left: var(--lightbox-target-left-position);
+		top: var(--lightbox-target-top-position);
+		transform: scale(1, 1);
+	}
+	99% {
+		visibility: visible;
+	}
+	100% {
+		left: var(--lightbox-initial-left-position);
+		top: var(--lightbox-initial-top-position);
+		transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+	}
 }

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

@@ -7,7 +7,6 @@ import {
 	initializeEditor,
 	getEditorHtml,
 	render,
-	waitFor,
 	setupApiFetch,
 } from 'test/helpers';
 import { Image } from 'react-native';
@@ -173,7 +172,7 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
-		await waitFor(
+		await act(
 			() => new Promise( ( resolve ) => setTimeout( resolve, 100 ) )
 		);
 
@@ -196,25 +195,16 @@ describe( 'Image Block', () => {
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
-		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://github.com/react-navigation/react-navigation/issues/9701
-		await act( () =>
-			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
-		);
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
 		fireEvent.press( screen.getByText( 'None' ) );
-		fireEvent.press( screen.getByText( 'Media File' ) );
-		await screen.findByText( 'Custom URL' );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
-		// Await asynchronous fetch of clipboard
-		await act( () => clipboardPromise );
 		fireEvent.changeText(
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
 		fireEvent.press( await screen.findByText( 'Custom URL' ) );
-		// Await asynchronous fetch of clipboard
-		await act( () => clipboardPromise );
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->

package/src/image/utils.js

@@ -3,6 +3,22 @@
  */
 import { NEW_TAB_REL } from './constants';
 
+/**
+ * Evaluates a CSS aspect-ratio property value as a number.
+ *
+ * Degenerate or invalid ratios behave as 'auto'. And 'auto' ratios return NaN.
+ *
+ * @see https://drafts.csswg.org/css-sizing-4/#aspect-ratio
+ *
+ * @param {string} value CSS aspect-ratio property value.
+ * @return {number} Numerical aspect ratio or NaN if invalid.
+ */
+export function evalAspectRatio( value ) {
+	const [ width, height = 1 ] = value.split( '/' ).map( Number );
+	const aspectRatio = width / height;
+	return aspectRatio === Infinity || aspectRatio === 0 ? NaN : aspectRatio;
+}
+
 export function removeNewTabRel( currentRel ) {
 	let newRel = currentRel;
 

package/src/index.js

@@ -116,6 +116,7 @@ import * as termDescription from './term-description';
 import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
+import * as footnotes from './footnotes';
 
 import isBlockMetadataExperimental from './utils/is-block-metadata-experimental';
 
@@ -176,6 +177,7 @@ const getAllBlocks = () => {
 		textColumns,
 		verse,
 		video,
+		footnotes,
 
 		// theme blocks
 		navigation,

package/src/latest-comments/block.json

@@ -29,7 +29,6 @@
 	},
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/latest-posts/block.json

@@ -84,7 +84,6 @@
 	},
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/latest-posts/edit.js

@@ -32,6 +32,7 @@ import { pin, list, grid } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticeStore } from '@wordpress/notices';
 import { useInstanceId } from '@wordpress/compose';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -479,15 +480,22 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.trim()
 								.split( ' ', excerptLength )
 								.join( ' ' ) }
-							{ /* translators: excerpt truncation character, default …  */ }
-							{ __( ' … ' ) }
-							<a
-								href={ post.link }
-								rel="noopener noreferrer"
-								onClick={ showRedirectionPreventedNotice }
-							>
-								{ __( 'Read more' ) }
-							</a>
+							{ createInterpolateElement(
+								/* translators: excerpt truncation character, default …  */
+								__( ' … <a>Read more</a>' ),
+								{
+									a: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											href={ post.link }
+											rel="noopener noreferrer"
+											onClick={
+												showRedirectionPreventedNotice
+											}
+										/>
+									),
+								}
+							) }
 						</>
 					) : (
 						excerpt

package/src/latest-posts/index.php

@@ -48,6 +48,14 @@ function render_block_core_latest_posts( $attributes ) {
 	$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
 	add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
+	$filter_latest_posts_excerpt_more = static function( $more ) use ( $attributes ) {
+		$use_excerpt = 'excerpt' === $attributes['displayPostContentRadio'];
+		/* translators: %1$s is a URL to a post, excerpt truncation character, default … */
+		return $use_excerpt ? sprintf( __( ' … <a href="%1$s" rel="noopener noreferrer">Read more</a>', 'gutenberg' ), esc_url( get_permalink() ) ) : $more;
+	};
+
+	add_filter( 'excerpt_more', $filter_latest_posts_excerpt_more );
+
 	if ( isset( $attributes['categories'] ) ) {
 		$args['category__in'] = array_column( $attributes['categories'], 'id' );
 	}

package/src/list/ordered-list-settings.js

@@ -3,9 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
-import { TextControl, PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	TextControl,
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+} from '@wordpress/components';
 
-const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
+const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
 		<PanelBody title={ __( 'Ordered list settings' ) }>
 			<TextControl
@@ -24,6 +29,19 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
 				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
 				step="1"
 			/>
+			<SelectControl
+				__nextHasNoMarginBottom
+				label={ __( 'Numbering style' ) }
+				options={ [
+					{ value: '1', label: __( 'Numbers' ) },
+					{ value: 'A', label: __( 'Uppercase letters' ) },
+					{ value: 'a', label: __( 'Lowercase letters' ) },
+					{ value: 'I', label: __( 'Uppercase Roman numerals' ) },
+					{ value: 'i', label: __( 'Lowercase Roman numerals' ) },
+				] }
+				value={ type }
+				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
+			/>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ __( 'Reverse list numbering' ) }

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

@@ -172,6 +172,11 @@ describe( 'List block', () => {
 		);
 		await triggerBlockListLayout( listItemBlock1 );
 
+		// wait until inserter on the newly created indented block is enabled
+		// this is slightly delayed (by updating block list settings) and would
+		// trigger an "update not wrapped in act()" warning if not explicitly awaited.
+		screen.findByRole( 'button', { name: 'Add block', disabled: false } );
+
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 

package/src/loginout/block.json

@@ -18,7 +18,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"className": true,
 		"typography": {
 			"fontSize": true,

package/src/media-text/edit.js

@@ -44,7 +44,7 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	TEMPLATE,
 } from './constants';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 

package/src/navigation/block.json

@@ -91,7 +91,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"inserter": true,
 		"typography": {
@@ -115,7 +114,7 @@
 				"blockGap": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowVerticalAlignment": false,
@@ -134,7 +133,7 @@
 			}
 		}
 	},
-	"viewScript": "file:./interactivity.min.js",
+	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/constants.js

@@ -19,3 +19,14 @@ export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link/page',
 	'core/navigation-link',
 ];
+
+export const SELECT_NAVIGATION_MENUS_ARGS = [
+	'postType',
+	'wp_navigation',
+	{
+		per_page: 100,
+		status: [ 'publish', 'draft' ],
+		order: 'desc',
+		orderby: 'date',
+	},
+];

package/src/navigation/deprecated.js

@@ -121,7 +121,7 @@ const v6 = {
 				blockGap: true,
 			},
 		},
-		__experimentalLayout: {
+		layout: {
 			allowSwitching: false,
 			allowInheriting: false,
 			default: {