@wordpress/block-library 6.0.12 → 6.0.17-next.33ec3857e2.0

package/src/gallery/test/use-get-new-images.js

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import useGetNewImages from '../use-get-new-images';
+
+const TestComponent = ( { images, imageData } ) => {
+	const newImages = useGetNewImages( images, imageData );
+	return <div title="testResult">{ JSON.stringify( newImages ) }</div>;
+};
+
+describe( 'gallery block useGetNewImages hook', () => {
+	it( 'returns null if no images currently in the gallery', () => {
+		render( <TestComponent images={ [] } imageData={ [] } /> );
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent( 'null' );
+	} );
+
+	it( 'should not return images that have been loaded from the saved post content', () => {
+		render(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1, fromSavedContent: true },
+				] }
+				imageData={ [ { id: 1 } ] }
+			/>
+		);
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent( 'null' );
+	} );
+
+	it( 'returns array of new images that have been added since the last render', () => {
+		const { rerender } = render(
+			<TestComponent
+				images={ [ { clientId: 'abc123', id: 1 } ] }
+				imageData={ [ { id: 1 } ] }
+			/>
+		);
+
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent(
+			'[{"clientId":"abc123","id":1}]'
+		);
+
+		rerender(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1 },
+					{ clientId: 'efg456', id: 2 },
+				] }
+				imageData={ [ { id: 1 }, { id: 2 } ] }
+			/>
+		);
+
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent(
+			'[{"clientId":"efg456","id":2}]'
+		);
+	} );
+
+	it( 'sees an image as new if it has been deleted and added again', () => {
+		const { rerender } = render(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1 },
+					{ clientId: 'efg456', id: 2 },
+				] }
+				imageData={ [ { id: 1 }, { id: 2 } ] }
+			/>
+		);
+
+		rerender(
+			<TestComponent
+				images={ [ { clientId: 'abc123', id: 1 } ] }
+				imageData={ [ { id: 1 } ] }
+			/>
+		);
+
+		rerender(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1 },
+					{ clientId: 'efg456', id: 2 },
+				] }
+				imageData={ [ { id: 1 }, { id: 2 } ] }
+			/>
+		);
+
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent(
+			'[{"clientId":"efg456","id":2}]'
+		);
+	} );
+} );

package/src/group/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/group",
 	"title": "Group",
@@ -34,7 +35,13 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
 		},
 		"__experimentalLayout": true
 	},

package/src/group/theme.scss

@@ -1,6 +1,5 @@
-.wp-block-group {
-	&:where(.has-background) {
-		// Matches paragraph Block padding
-		padding: $block-bg-padding--v $block-bg-padding--h;
-	}
+// Add low specificity default padding to groups with backgrounds.
+:where(.wp-block-group.has-background) {
+	// Matches paragraph block padding.
+	padding: $block-bg-padding--v $block-bg-padding--h;
 }

package/src/heading/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/heading",
 	"title": "Heading",

package/src/home-link/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/home-link",
 	"category": "design",

package/src/home-link/index.php

@@ -79,7 +79,7 @@ function block_core_home_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;
@@ -114,9 +114,9 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 /**
  * Renders the `core/home-link` block.
  *
- * @param array $attributes The block attributes.
- * @param array $content    The saved content.
- * @param array $block      The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param array    $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the post content with the home url added.
  */

package/src/html/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/html",
 	"title": "Custom HTML",

package/src/image/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/image",
 	"title": "Image",
@@ -83,7 +84,10 @@
 			"background": false
 		},
 		"__experimentalBorder": {
-			"radius": true
+			"radius": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
 		}
 	},
 	"styles": [

package/src/image/edit.js

@@ -87,6 +87,20 @@ function hasDefaultSize( image, defaultSize ) {
 	);
 }
 
+/**
+ * Checks if a media attachment object has been "destroyed",
+ * that is, removed from the media library. The core Media Library
+ * adds a `destroyed` property to a deleted attachment object in the media collection.
+ *
+ * @param {number} id The attachment id.
+ *
+ * @return {boolean} Whether the image has been destroyed.
+ */
+export function isMediaDestroyed( id ) {
+	const attachment = wp?.media?.attachment( id ) || {};
+	return attachment.destroyed;
+}
+
 export function ImageEdit( {
 	attributes,
 	setAttributes,
@@ -127,6 +141,33 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
+	// A callback passed to MediaUpload,
+	// fired when the media modal closes.
+	function onCloseModal() {
+		if ( isMediaDestroyed( attributes?.id ) ) {
+			setAttributes( {
+				url: undefined,
+				id: undefined,
+			} );
+		}
+	}
+
+	/*
+		 Runs an error callback if the image does not load.
+		 If the error callback is triggered, we infer that that image
+		 has been deleted.
+	*/
+	function onImageError( isReplaced = false ) {
+		// If the image block was not replaced with an embed,
+		// clear the attributes and trigger the placeholder.
+		if ( ! isReplaced ) {
+			setAttributes( {
+				url: undefined,
+				id: undefined,
+			} );
+		}
+	}
+
 	function onUploadError( message ) {
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
@@ -324,6 +365,8 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
+					onCloseModal={ onCloseModal }
+					onImageLoadError={ onImageError }
 				/>
 			) }
 			{ ! url && (
@@ -340,6 +383,7 @@ export function ImageEdit( {
 				onSelectURL={ onSelectURL }
 				notices={ noticeUI }
 				onError={ onUploadError }
+				onClose={ onCloseModal }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }

package/src/image/edit.native.js

@@ -134,7 +134,7 @@ function LinkSettings( {
 		url: {
 			valueMask,
 			autoFocus: false,
-			autoFill: true,
+			autoFill: false,
 		},
 		openInNewTab: {
 			label: __( 'Open in new tab' ),

package/src/image/editor.scss

@@ -70,6 +70,24 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
+*:not([data-align]) {
+	> .wp-block-image {
+		display: grid;
+		grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+		.components-placeholder {
+			grid-column: placeholder;
+		}
+		> div:not(.components-placeholder) {
+			grid-column: image;
+		}
+		> figcaption {
+			grid-column: image;
+			display: table-caption;
+			caption-side: bottom;
+		}
+	}
+}
+
 .wp-block[data-align="left"] > .wp-block-image {
 	margin-right: 1em;
 	margin-left: 0;

package/src/image/image.js

@@ -30,7 +30,7 @@ import {
 	__experimentalImageEditor as ImageEditor,
 	__experimentalImageEditingProvider as ImageEditingProvider,
 } from '@wordpress/block-editor';
-import { useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import { createBlock, switchToBlockType } from '@wordpress/blocks';
@@ -43,7 +43,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
-import { isExternalImage } from './edit';
+import { isExternalImage, isMediaDestroyed } from './edit';
 
 /**
  * Module constants
@@ -72,13 +72,16 @@ export default function Image( {
 	isSelected,
 	insertBlocksAfter,
 	onReplace,
+	onCloseModal,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
 	containerRef,
 	context,
 	clientId,
+	onImageLoadError,
 } ) {
+	const imageRef = useRef();
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
 	const { allowResize = true } = context;
@@ -141,7 +144,10 @@ export default function Image( {
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = includes( [ 'wide', 'full' ], align );
-	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
+	const [
+		{ loadedNaturalWidth, loadedNaturalHeight },
+		setLoadedNaturalSize,
+	] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
@@ -179,6 +185,27 @@ export default function Image( {
 		}
 	}, [ url, prevUrl ] );
 
+	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
+	// width and height. This resolves an issue in Safari where the loaded natural
+	// witdth and height is otherwise lost when switching between alignments.
+	// See: https://github.com/WordPress/gutenberg/pull/37210.
+	const { naturalWidth, naturalHeight } = useMemo( () => {
+		return {
+			naturalWidth:
+				imageRef.current?.naturalWidth ||
+				loadedNaturalWidth ||
+				undefined,
+			naturalHeight:
+				imageRef.current?.naturalHeight ||
+				loadedNaturalHeight ||
+				undefined,
+		};
+	}, [
+		loadedNaturalWidth,
+		loadedNaturalHeight,
+		imageRef.current?.complete,
+	] );
+
 	function onResizeStart() {
 		toggleSelection( false );
 	}
@@ -188,11 +215,16 @@ export default function Image( {
 	}
 
 	function onImageError() {
-		// Check if there's an embed block that handles this URL.
+		// Check if there's an embed block that handles this URL, e.g., instagram URL.
+		// See: https://github.com/WordPress/gutenberg/pull/11472
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-		if ( undefined !== embedBlock ) {
+		const shouldReplace = undefined !== embedBlock;
+
+		if ( shouldReplace ) {
 			onReplace( embedBlock );
 		}
+
+		onImageLoadError( shouldReplace );
 	}
 
 	function onSetHref( props ) {
@@ -264,6 +296,9 @@ export default function Image( {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
 		}
+		if ( isSelected && isMediaDestroyed( id ) ) {
+			onImageLoadError();
+		}
 	}, [ isSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
@@ -327,6 +362,7 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
+						onCloseModal={ onCloseModal }
 					/>
 				</BlockControls>
 			) }
@@ -411,13 +447,12 @@ export default function Image( {
 				alt={ defaultedAlt }
 				onError={ () => onImageError() }
 				onLoad={ ( event ) => {
-					setNaturalSize(
-						pick( event.target, [
-							'naturalWidth',
-							'naturalHeight',
-						] )
-					);
+					setLoadedNaturalSize( {
+						loadedNaturalWidth: event.target?.naturalWidth,
+						loadedNaturalHeight: event.target?.naturalHeight,
+					} );
 				} }
+				ref={ imageRef }
 			/>
 			{ temporaryURL && <Spinner /> }
 		</>

package/src/image/index.php

@@ -11,7 +11,7 @@
  *
  * @param  array $attributes The block attributes.
  * @param  array $content    The block content.
- * @return string            Returns the block content with the data-id attribute added.
+ * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content ) {
 	if ( isset( $attributes['data-id'] ) ) {

package/src/index.js

@@ -30,6 +30,8 @@ import * as commentEditLink from './comment-edit-link';
 import * as commentReplyLink from './comment-reply-link';
 import * as commentTemplate from './comment-template';
 import * as commentsQueryLoop from './comments-query-loop';
+import * as commentsPagination from './comments-pagination';
+import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -254,6 +256,8 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								commentReplyLink,
 								commentTemplate,
 								commentsQueryLoop,
+								commentsPagination,
+								commentsPaginationNumbers,
 								navigationArea,
 								postComment,
 								postCommentsCount,

package/src/latest-comments/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/latest-comments",
 	"title": "Latest Comments",

package/src/latest-posts/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/latest-posts",
 	"title": "Latest Posts",

package/src/list/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/list",
 	"title": "List",

package/src/loginout/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/loginout",
 	"title": "Login/out",

package/src/media-text/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/media-text",
 	"title": "Media & Text",

package/src/missing/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/missing",
 	"title": "Unsupported",

package/src/more/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/more",
 	"title": "More",

package/src/navigation/README.md

@@ -0,0 +1,13 @@
+# Navigation block
+
+The Navigation block is a container block for the collection of blocks that allow visitors to get around your site. See also the Navigation Link block and Navigation Submenu block.
+
+## CSS Classes
+
+The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:
+
+-   `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
+-   `.wp-block-navigation-item` is applied to every menu item.
+-   `.wp-block-navigation-item__content` is applied to the link inside a menu item.
+-   `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
+-   `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).

package/src/navigation/block.json

@@ -1,14 +1,11 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [
-		"menu",
-		"navigation",
-		"links"
-	],
+	"keywords": [ "menu", "navigation", "links" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {
@@ -78,10 +75,7 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [
-			"wide",
-			"full"
-		],
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,
 		"inserter": true,
@@ -99,13 +93,7 @@
 		},
 		"spacing": {
 			"blockGap": true,
-			"units": [
-				"px",
-				"em",
-				"rem",
-				"vh",
-				"vw"
-			],
+			"units": [ "px", "em", "rem", "vh", "vw" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}

package/src/navigation/edit/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import noop from 'lodash';
 
 /**
  * WordPress dependencies
@@ -109,12 +110,19 @@ function Navigation( {
 		layout: { justifyContent, orientation = 'horizontal' } = {},
 	} = attributes;
 
-	const [ areaMenu, setAreaMenu ] = useEntityProp(
-		'root',
-		'navigationArea',
-		'navigation',
-		navigationArea
-	);
+	let areaMenu,
+		setAreaMenu = noop;
+	// Navigation areas are deprecated and on their way out. Let's not perform
+	// the request unless we're in an environment where the endpoint exists.
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		[ areaMenu, setAreaMenu ] = useEntityProp(
+			'root',
+			'navigationArea',
+			'navigation',
+			navigationArea
+		);
+	}
 
 	const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu;
 
@@ -134,13 +142,19 @@ function Navigation( {
 		`navigationMenu/${ ref }`
 	);
 
-	const { innerBlocks, isInnerBlockSelected } = useSelect(
+	const { innerBlocks, isInnerBlockSelected, hasSubmenus } = useSelect(
 		( select ) => {
 			const { getBlocks, hasSelectedInnerBlock } = select(
 				blockEditorStore
 			);
+			const blocks = getBlocks( clientId );
+			const firstSubmenu = !! blocks.find(
+				( block ) => block.name === 'core/navigation-submenu'
+			);
+
 			return {
-				innerBlocks: getBlocks( clientId ),
+				hasSubmenus: firstSubmenu,
+				innerBlocks: blocks,
 				isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
 			};
 		},
@@ -411,26 +425,35 @@ function Navigation( {
 									label={ __( 'Always' ) }
 								/>
 							</ToggleGroupControl>
-							<h3>{ __( 'Submenus' ) }</h3>
-							<ToggleControl
-								checked={ openSubmenusOnClick }
-								onChange={ ( value ) => {
-									setAttributes( {
-										openSubmenusOnClick: value,
-									} );
-								} }
-								label={ __( 'Open on click' ) }
-							/>
-							{ ! attributes.openSubmenusOnClick && (
-								<ToggleControl
-									checked={ showSubmenuIcon }
-									onChange={ ( value ) => {
-										setAttributes( {
-											showSubmenuIcon: value,
-										} );
-									} }
-									label={ __( 'Show icons' ) }
-								/>
+							{ hasSubmenus && (
+								<>
+									<h3>{ __( 'Submenus' ) }</h3>
+									<ToggleControl
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+												...( value && {
+													showSubmenuIcon: true,
+												} ), // Make sure arrows are shown when we toggle this on.
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+
+									<ToggleControl
+										checked={ showSubmenuIcon }
+										onChange={ ( value ) => {
+											setAttributes( {
+												showSubmenuIcon: value,
+											} );
+										} }
+										disabled={
+											attributes.openSubmenusOnClick
+										}
+										label={ __( 'Show arrow' ) }
+									/>
+								</>
 							) }
 						</PanelBody>
 					) }