@wordpress/block-library 8.13.0 → 8.15.0

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/latest-comments/edit.js

@@ -68,6 +68,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 					/>
 					<RangeControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Number of comments' ) }
 						value={ commentsToShow }
 						onChange={ ( value ) =>

package/src/latest-posts/edit.js

@@ -230,6 +230,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					displayPostContentRadio === 'excerpt' && (
 						<RangeControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label={ __( 'Max number of words' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -359,6 +360,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ postLayout === 'grid' && (
 					<RangeControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

package/src/latest-posts/index.php

@@ -51,7 +51,7 @@ function render_block_core_latest_posts( $attributes ) {
 	$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;
+		return $use_excerpt ? sprintf( __( ' … <a href="%1$s" rel="noopener noreferrer">Read more</a>' ), esc_url( get_permalink() ) ) : $more;
 	};
 
 	add_filter( 'excerpt_more', $filter_latest_posts_excerpt_more );

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/list/edit.js

@@ -177,10 +177,12 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 			{ controls }
 			{ ordered && (
 				<OrderedListSettings
-					setAttributes={ setAttributes }
-					ordered={ ordered }
-					reversed={ reversed }
-					start={ start }
+					{ ...{
+						setAttributes,
+						reversed,
+						start,
+						type,
+					} }
 				/>
 			) }
 		</>

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

@@ -19,7 +19,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import { BACKSPACE } from '@wordpress/keycodes';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 describe( 'List block', () => {
 	beforeAll( () => {
@@ -338,34 +338,125 @@ describe( 'List block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'merges with other lists', async () => {
+	it( 'splits empty list items into paragraphs', async () => {
+		// Arrange
 		const initialHtml = `<!-- wp:list -->
 		<ul><!-- wp:list-item -->
-		<li>One</li><!-- /wp:list-item --></ul>
-		<!-- /wp:list --><!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item -->
+		<!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
 
-		const screen = await initializeEditor( {
-			initialHtml,
-		} );
-
-		// Select List block
-		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
+		// Act
+		const listBlock = screen.getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 		await triggerBlockListLayout( listBlock );
+		const listItemField = screen.getByLabelText( /Text input. .*One.*/ );
+		selectRangeInRichText( listItemField, 3 );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		const listItemField2 = screen.getByLabelText( /Text input. Empty/ );
+		fireEvent( listItemField2, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
 
-		// Select List Item block
-		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
-		);
-		fireEvent.press( listItemBlock );
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
 
-		// With cursor positioned at the beginning of the first List Item, press
-		// backward delete
-		const listItemField =
-			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
+	} );
+
+	it( 'merges paragraphs into list items', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:paragraph -->
+		<p>Two</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		// Act
+		const paragraphField = screen.getByLabelText( /Text input. .*Two.*/ );
+		selectRangeInRichText( paragraphField, 0 );
+		fireEvent( paragraphField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
+	} );
+
+	it( 'merges lists into lists', async () => {
+		// Arrange
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		// Act
+		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
+		const listItemField = screen.getByLabelText( /Text input\..*Three/ );
 		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
@@ -373,17 +464,22 @@ describe( 'List block', () => {
 			keyCode: BACKSPACE,
 		} );
 
+		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-			"<!-- wp:list -->
-			<ul><!-- wp:list-item -->
-			<li>One</li>
-			<!-- /wp:list-item -->
-
-			<!-- wp:list-item -->
-			<li>Two</li>
-			<!-- /wp:list-item --></ul>
-			<!-- /wp:list -->"
-		` );
+		"<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
 	} );
 
 	it( 'unwraps first item when attempting to merge with non-list block', async () => {
@@ -486,16 +582,16 @@ describe( 'List block', () => {
 		"<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:paragraph -->
 		<p>One</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:list -->
 		<ul><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
-		
+
 		<!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></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/media-text/media-container.native.js

@@ -316,6 +316,7 @@ class MediaContainer extends Component {
 				onSelect={ this.onSelectMediaUploadOption }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onFocus={ this.props.onFocus }
+				className={ 'no-block-outline' }
 			/>
 		);
 	}

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/missing/edit.native.js

@@ -5,7 +5,7 @@ import {
 	View,
 	Text,
 	TouchableWithoutFeedback,
-	TouchableHighlight,
+	TouchableOpacity,
 } from 'react-native';
 
 /**
@@ -83,7 +83,7 @@ export class UnsupportedBlockEdit extends Component {
 		);
 
 		return (
-			<TouchableHighlight
+			<TouchableOpacity
 				onPress={ this.onHelpButtonPressed }
 				style={ styles.helpIconContainer }
 				accessibilityLabel={ __( 'Help button' ) }
@@ -94,9 +94,9 @@ export class UnsupportedBlockEdit extends Component {
 					className="unsupported-icon-help"
 					label={ __( 'Help icon' ) }
 					icon={ help }
-					color={ infoIconStyle.color }
+					fill={ infoIconStyle.color }
 				/>
-			</TouchableHighlight>
+			</TouchableOpacity>
 		);
 	}
 
@@ -282,12 +282,14 @@ export class UnsupportedBlockEdit extends Component {
 					) }
 				>
 					{ this.renderHelpIcon() }
-					<Icon
-						className={ iconClassName }
-						icon={ icon && icon.src ? icon.src : icon }
-						color={ iconStyle.color }
-					/>
-					<Text style={ titleStyle }>{ title }</Text>
+					<View style={ styles.unsupportedBlockHeader }>
+						<Icon
+							className={ iconClassName }
+							icon={ icon && icon.src ? icon.src : icon }
+							fill={ iconStyle.color }
+						/>
+						<Text style={ titleStyle }>{ title }</Text>
+					</View>
 					{ subtitle }
 					{ this.renderSheet( title, originalName ) }
 				</View>