@wordpress/block-library 8.12.6 → 8.14.0

package/src/image/image.js

@@ -607,7 +607,8 @@ export default function Image( {
 		const ratio =
 			( aspectRatio && evalAspectRatio( aspectRatio ) ) ||
 			( width && height && width / height ) ||
-			naturalWidth / naturalHeight;
+			naturalWidth / naturalHeight ||
+			1;
 
 		const currentWidth = ! width && height ? height * ratio : width;
 		const currentHeight = ! height && width ? width / ratio : height;

package/src/image/save.js

@@ -58,6 +58,8 @@ export default function save( { attributes } ) {
 				...borderProps.style,
 				aspectRatio,
 				objectFit: scale,
+				width,
+				height,
 			} }
 			width={ width }
 			height={ height }

package/src/image/style.scss

@@ -184,11 +184,12 @@
 	width: 100vw;
 	height: 100vh;
 	visibility: hidden;
+	cursor: zoom-out;
 
 	.close-button {
 		position: absolute;
-		top: 12.5px;
-		right: 12.5px;
+		top: calc(env(safe-area-inset-top) + 12.5px);
+		right: calc(env(safe-area-inset-right) + 12.5px);
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
@@ -231,6 +232,18 @@
 	}
 
 	&.fade {
+		.wp-block-image {
+			padding: 40px 0;
+
+			@media screen and (min-width: 480px) {
+				padding: 40px;
+			}
+
+			@media screen and (min-width: 1920px) {
+				padding: 40px 80px;
+			}
+		}
+
 		&.active {
 			visibility: visible;
 			animation: both turn-on-visibility 0.25s;

package/src/image/{interactivity.js → view-interactivity.js}

@@ -1,7 +1,7 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { store } from '../utils/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',
@@ -22,32 +22,43 @@ store( {
 		core: {
 			image: {
 				showLightbox: ( { context, event } ) => {
+					// We can't initialize the lightbox until the reference
+					// image is loaded, otherwise the UX is broken.
+					if ( ! context.core.image.imageLoaded ) {
+						return;
+					}
 					context.core.image.initialized = true;
 					context.core.image.lastFocusedElement =
 						window.document.activeElement;
 					context.core.image.scrollDelta = 0;
 
+					context.core.image.lightboxEnabled = true;
+					if ( context.core.image.lightboxAnimation === 'zoom' ) {
+						setZoomStyles(
+							event.target.nextElementSibling,
+							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'
+					);
+
 					// 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
+					context.core.image.preloadInitialized = true;
 					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'
-						);
+						context.core.image.activateLargeImage = true;
 					};
-					imgDom.setAttribute( 'src', context.core.image.imageSrc );
+					imgDom.setAttribute(
+						'src',
+						context.core.image.imageUploadedSrc
+					);
 				},
 				hideLightbox: async ( { context, event } ) => {
 					context.core.image.hideAnimationEnabled = true;
@@ -122,6 +133,16 @@ store( {
 						}
 					}
 				},
+				preloadLightboxImage: ( { context } ) => {
+					if ( ! context.core.image.preloadInitialized ) {
+						context.core.image.preloadInitialized = true;
+						const imgDom = document.createElement( 'img' );
+						imgDom.setAttribute(
+							'src',
+							context.core.image.imageUploadedSrc
+						);
+					}
+				},
 			},
 		},
 	},
@@ -131,9 +152,15 @@ store( {
 				roleAttribute: ( { context } ) => {
 					return context.core.image.lightboxEnabled ? 'dialog' : '';
 				},
-				imageSrc: ( { context } ) => {
+				responsiveImgSrc: ( { context } ) => {
+					return context.core.image.activateLargeImage &&
+						context.core.image.hideAnimationEnabled
+						? ''
+						: context.core.image.imageCurrentSrc;
+				},
+				enlargedImgSrc: ( { context } ) => {
 					return context.core.image.initialized
-						? context.core.image.imageSrc
+						? context.core.image.imageUploadedSrc
 						: '';
 				},
 			},
@@ -142,6 +169,18 @@ store( {
 	effects: {
 		core: {
 			image: {
+				setCurrentSrc: ( { context, ref } ) => {
+					if ( ref.complete ) {
+						context.core.image.imageLoaded = true;
+						context.core.image.imageCurrentSrc = ref.currentSrc;
+					} else {
+						ref.addEventListener( 'load', function () {
+							context.core.image.imageLoaded = true;
+							context.core.image.imageCurrentSrc =
+								this.currentSrc;
+						} );
+					}
+				},
 				initLightbox: async ( { context, ref } ) => {
 					context.core.image.figureRef =
 						ref.querySelector( 'figure' );
@@ -163,51 +202,61 @@ store( {
 } );
 
 function setZoomStyles( imgDom, context, event ) {
-	let targetWidth = imgDom.naturalWidth;
-	let targetHeight = imgDom.naturalHeight;
+	// Typically, we use the image's full-sized dimensions. If those
+	// dimensions have not been set (i.e. an external image with only one size),
+	// the image's dimensions in the lightbox are the same
+	// as those of the image in the content.
+	let targetWidth =
+		context.core.image.targetWidth !== 'none'
+			? context.core.image.targetWidth
+			: event.target.nextElementSibling.naturalWidth;
+	let targetHeight =
+		context.core.image.targetHeight !== 'none'
+			? context.core.image.targetHeight
+			: event.target.nextElementSibling.naturalHeight;
 
-	const verticalPadding = 40;
+	// Since the lightbox image has `position:absolute`, it
+	// ignores its parent's padding, so we need to set padding here
+	// to calculate dimensions and positioning.
 
-	// 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;
+	// As per the design, let's constrain the height with fixed padding
+	const containerOuterHeight = window.innerHeight;
+	const verticalPadding = 40;
+	const containerInnerHeight = containerOuterHeight - verticalPadding * 2;
 
-	// 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's set a variable horizontal padding based on the container width
+	const containerOuterWidth = window.innerWidth;
 	let horizontalPadding = 0;
-	if ( containerWidth > 480 ) {
+	if ( containerOuterWidth > 480 ) {
 		horizontalPadding = 40;
-	} else if ( containerWidth > 1920 ) {
+	} else if ( containerOuterWidth > 1920 ) {
 		horizontalPadding = 80;
 	}
-
-	const containerHeight =
-		context.core.image.figureRef.clientHeight - verticalPadding * 2;
+	const containerInnerWidth = containerOuterWidth - horizontalPadding * 2;
 
 	// Check difference between the image and figure dimensions
 	const widthOverflow = Math.abs(
-		Math.min( containerWidth - targetWidth, 0 )
+		Math.min( containerInnerWidth - targetWidth, 0 )
 	);
 	const heightOverflow = Math.abs(
-		Math.min( containerHeight - targetHeight, 0 )
+		Math.min( containerInnerHeight - 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 the image is larger than the container, let's resize
+	// it along the greater axis relative to the container
 	if ( widthOverflow > 0 || heightOverflow > 0 ) {
-		if (
-			widthOverflow >= heightOverflow ||
-			containerHeight >= containerWidth
-		) {
-			targetWidth = containerWidth - horizontalPadding * 2;
+		const containerInnerAspectRatio =
+			containerInnerWidth / containerInnerHeight;
+		const imageAspectRatio = targetWidth / targetHeight;
+
+		if ( imageAspectRatio > containerInnerAspectRatio ) {
+			targetWidth = containerInnerWidth;
 			targetHeight =
-				imgDom.naturalHeight * ( targetWidth / imgDom.naturalWidth );
+				( targetWidth * imgDom.naturalHeight ) / imgDom.naturalWidth;
 		} else {
-			targetHeight = containerHeight;
+			targetHeight = containerInnerHeight;
 			targetWidth =
-				imgDom.naturalWidth * ( targetHeight / imgDom.naturalHeight );
+				( targetHeight * imgDom.naturalWidth ) / imgDom.naturalHeight;
 		}
 	}
 
@@ -221,16 +270,16 @@ function setZoomStyles( imgDom, context, event ) {
 
 	// Get values used to center the image
 	let targetLeft = 0;
-	if ( targetWidth >= containerWidth ) {
+	if ( targetWidth >= containerInnerWidth ) {
 		targetLeft = horizontalPadding;
 	} else {
-		targetLeft = ( containerWidth - targetWidth ) / 2;
+		targetLeft = ( containerOuterWidth - targetWidth ) / 2;
 	}
 	let targetTop = 0;
-	if ( targetHeight >= containerHeight ) {
+	if ( targetHeight >= containerInnerHeight ) {
 		targetTop = verticalPadding;
 	} else {
-		targetTop = ( containerHeight - targetHeight ) / 2 + verticalPadding;
+		targetTop = ( containerOuterHeight - targetHeight ) / 2;
 	}
 
 	const root = document.documentElement;

package/src/index.js

@@ -142,7 +142,6 @@ const getAllBlocks = () => {
 		buttons,
 		calendar,
 		categories,
-		...( window.wp && window.wp.oldEditor ? [ classic ] : [] ), // Only add the classic block in WP Context.
 		code,
 		column,
 		columns,
@@ -229,6 +228,24 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
+
+	// When in a WordPress context, conditionally
+	// add the classic block and TinyMCE editor
+	// under any of the following conditions:
+	//   - the current post contains a classic block
+	//   - the experiment to disable TinyMCE isn't active.
+	//   - a query argument specifies that TinyMCE should be loaded
+	if (
+		window?.wp?.oldEditor &&
+		( window?.wp?.needsClassicBlock ||
+			! window?.__experimentalDisableTinymce ||
+			!! new URLSearchParams( window?.location?.search ).get(
+				'requiresTinymce'
+			) )
+	) {
+		blocks.push( classic );
+	}
+
 	return blocks.filter( Boolean );
 };
 

package/src/list/block.json

@@ -61,7 +61,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul",

package/src/media-text/block.json

@@ -100,6 +100,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/missing/edit.js

@@ -16,22 +16,46 @@ import { safeHTML } from '@wordpress/dom';
 function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 	const { originalName, originalUndelimitedContent } = attributes;
 	const hasContent = !! originalUndelimitedContent;
-	const hasHTMLBlock = useSelect(
+	const { hasFreeformBlock, hasHTMLBlock } = useSelect(
 		( select ) => {
 			const { canInsertBlockType, getBlockRootClientId } =
 				select( blockEditorStore );
 
-			return canInsertBlockType(
-				'core/html',
-				getBlockRootClientId( clientId )
-			);
+			return {
+				hasFreeformBlock: canInsertBlockType(
+					'core/freeform',
+					getBlockRootClientId( clientId )
+				),
+				hasHTMLBlock: canInsertBlockType(
+					'core/html',
+					getBlockRootClientId( clientId )
+				),
+			};
 		},
 		[ clientId ]
 	);
 
 	const actions = [];
 	let messageHTML;
-	if ( hasContent && hasHTMLBlock ) {
+
+	const convertToHtmlButton = (
+		<Button key="convert" onClick={ convertToHTML } variant="primary">
+			{ __( 'Keep as HTML' ) }
+		</Button>
+	);
+
+	if ( hasContent && ! hasFreeformBlock && ! originalName ) {
+		if ( hasHTMLBlock ) {
+			messageHTML = __(
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+			);
+			actions.push( convertToHtmlButton );
+		} else {
+			messageHTML = __(
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+			);
+		}
+	} else if ( hasContent && hasHTMLBlock ) {
 		messageHTML = sprintf(
 			/* translators: %s: block name */
 			__(
@@ -39,11 +63,7 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 			),
 			originalName
 		);
-		actions.push(
-			<Button key="convert" onClick={ convertToHTML } variant="primary">
-				{ __( 'Keep as HTML' ) }
-			</Button>
-		);
+		actions.push( convertToHtmlButton );
 	} else {
 		messageHTML = sprintf(
 			/* translators: %s: block name */

package/src/navigation/block.json

@@ -131,9 +131,10 @@
 					}
 				}
 			}
-		}
+		},
+		"interactivity": true
 	},
-	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
+	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/index.php

@@ -103,7 +103,7 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 		) ) {
 			// Add directives to the parent `<li>`.
 			$w->set_attribute( 'data-wp-interactive', true );
-			$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": false } } }' );
+			$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "submenuOpenedBy": {}, "type": "submenu" } } }' );
 			$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 			$w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' );
 			$w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' );
@@ -123,26 +123,21 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 				$w->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' );
 			};
 
+			// Add directives to the submenu.
+			if ( $w->next_tag(
+				array(
+					'tag_name'   => 'UL',
+					'class_name' => 'wp-block-navigation__submenu-container',
+				)
+			) ) {
+				$w->set_attribute( 'data-wp-on--focusin', 'actions.core.navigation.openMenuOnFocus' );
+			}
+
 			// Iterate through subitems if exist.
 			block_core_navigation_add_directives_to_submenu( $w, $block_attributes );
 		}
 		return $w->get_updated_html();
 	};
-
-	/**
-	 * Replaces view script for the Navigation block with version using Interactivity API.
-	 *
-	 * @param array $metadata Block metadata as read in via block.json.
-	 *
-	 * @return array Filtered block type metadata.
-	 */
-	function gutenberg_block_core_navigation_update_interactive_view_script( $metadata ) {
-		if ( 'core/navigation' === $metadata['name'] ) {
-			$metadata['viewScript'] = array( 'file:./interactivity.min.js' );
-		}
-		return $metadata;
-	}
-	add_filter( 'block_type_metadata', 'gutenberg_block_core_navigation_update_interactive_view_script', 10, 1 );
 }
 
 
@@ -726,7 +721,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
 		$nav_element_directives          = '
 			data-wp-interactive
-			data-wp-context=\'{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": true, "roleAttribute": "" } } }\'
+			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
 		';
 		$open_button_directives          = '
 			data-wp-on--click="actions.core.navigation.openMenuOnClick"
@@ -751,11 +746,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s" %11$s>%9$s</button>
+		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s" %12$s>
-				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
+				<div class="wp-block-navigation__responsive-close" tabindex="-1">
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
-							<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>