@wordpress/block-library 5.0.1 → 6.0.1

package/src/gallery/editor.scss

@@ -1,9 +1,37 @@
-.wp-block-gallery {
+figure.wp-block-gallery {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358
-	li {
-		list-style-type: none;
+
+	display: block;
+	margin: 0;
+	&.has-nested-images {
+		.components-drop-zone {
+			display: none;
+			pointer-events: none;
+		}
+	}
+
+	> .blocks-gallery-caption {
+		flex: 0 0 100%;
+	}
+
+	> .blocks-gallery-media-placeholder-wrapper {
+		flex-basis: 100%;
+	}
+
+	.wp-block-image {
+		.components-notice.is-error {
+			display: block;
+		}
+		.components-notice__content {
+			margin: 4px 0;
+		}
+		.components-notice__dismiss {
+			position: absolute;
+			top: 0;
+			right: 5px;
+		}
 	}
 
 	// @todo: this deserves a refactor, by being moved to the toolbar.
@@ -15,22 +43,73 @@
 			margin-bottom: 0;
 		}
 	}
+	.block-editor-media-placeholder {
+		margin: 0;
+
+		&::before {
+			box-shadow: 0 0 0 $border-width $white inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
+			content: "";
+			// Shown in Windows 10 high contrast mode.
+			outline: 2px solid transparent;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
+			pointer-events: none;
+		}
+		.components-placeholder__label {
+			display: flex;
+		}
+		figcaption {
+			z-index: 2;
+		}
+	}
+
+	// Shown while image is being uploaded
+	.components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -9px;
+		margin-left: -9px;
+	}
 }
 
-figure.wp-block-gallery {
-	display: block;
-	margin: 0;
+
+/**
+ * Gallery inspector controls settings.
+ */
+.gallery-settings-buttons {
+	.components-button:first-child {
+		margin-right: 8px;
+	}
 }
 
-// Necessary to to override default editor ul styles.
-.blocks-gallery-grid.blocks-gallery-grid {
-	padding-left: 0;
-	margin-left: 0;
-	margin-bottom: 0;
+.gallery-image-sizes {
+	.components-base-control__label {
+		display: block;
+		margin-bottom: 4px;
+	}
+
+	.gallery-image-sizes__loading {
+		display: flex;
+		align-items: center;
+		color: $gray-700;
+		font-size: $helptext-font-size;
+	}
+
+	.components-spinner {
+		margin: 0 8px 0 4px;
+	}
 }
 
+/**
+ * Deprecated css past this point. This can be removed once all galleries are migrated
+ * to V2.
+ */
 .blocks-gallery-item {
-
 	// Hide the focus outline that otherwise briefly appears when selecting a block.
 	figure:not(.is-selected):focus,
 	img:focus {
@@ -50,10 +129,6 @@ figure.wp-block-gallery {
 			bottom: 0;
 			left: 0;
 			z-index: 1;
-			pointer-events: none;
-		}
-		figcaption {
-			z-index: 2;
 		}
 	}
 
@@ -125,11 +200,20 @@ figure.wp-block-gallery {
 	}
 }
 
+.wp-block-gallery ul.blocks-gallery-grid {
+	padding: 0;
+	// Some themes give all <ul> default margin instead of padding.
+	margin: 0;
+}
+
+.wp-block-update-gallery-modal {
+	max-width: 400px;
+	.wp-block-update-gallery-modal-buttons {
+		display: flex;
+		justify-content: flex-end;
 
-.blocks-gallery-item .components-spinner {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	margin-top: -9px;
-	margin-left: -9px;
+		.components-button {
+			margin-left: $grid-unit-15;
+		}
+	}
 }

package/src/gallery/gallery-styles.native.scss

@@ -1,5 +1,7 @@
-.galleryTilesContainerSelected {
-	margin-bottom: 16px;
+@import "./v1/gallery-styles.native.scss";
+
+.galleryAppender {
+	padding-top: $grid-unit-20;
 }
 
 .fullWidth {

package/src/gallery/gallery.js

@@ -6,93 +6,83 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
+import { View } from '@wordpress/primitives';
 
-/**
- * Internal dependencies
- */
-import GalleryImage from './gallery-image';
-import { defaultColumnsNumber } from './shared';
+const allowedBlocks = [ 'core/image' ];
 
 export const Gallery = ( props ) => {
 	const {
 		attributes,
 		isSelected,
 		setAttributes,
-		selectedImage,
 		mediaPlaceholder,
-		onMoveBackward,
-		onMoveForward,
-		onRemoveImage,
-		onSelectImage,
-		onDeselectImage,
-		onSetImageAttributes,
 		insertBlocksAfter,
 		blockProps,
 	} = props;
 
-	const {
-		align,
-		columns = defaultColumnsNumber( attributes ),
-		caption,
-		imageCrop,
-		images,
-	} = attributes;
+	const { align, columns, caption, imageCrop } = attributes;
+
+	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
+		allowedBlocks,
+		orientation: 'horizontal',
+		renderAppender: false,
+		__experimentalLayout: { type: 'default', alignments: [] },
+	} );
+
+	const [ captionFocused, setCaptionFocused ] = useState( false );
+
+	function onFocusCaption() {
+		if ( ! captionFocused ) {
+			setCaptionFocused( true );
+		}
+	}
+
+	function removeCaptionFocus() {
+		if ( captionFocused ) {
+			setCaptionFocused( false );
+		}
+	}
+
+	useEffect( () => {
+		if ( ! isSelected ) {
+			setCaptionFocused( false );
+		}
+	}, [ isSelected ] );
 
 	return (
 		<figure
-			{ ...blockProps }
-			className={ classnames( blockProps.className, {
-				[ `align${ align }` ]: align,
-				[ `columns-${ columns }` ]: columns,
-				'is-cropped': imageCrop,
-			} ) }
+			{ ...innerBlocksProps }
+			className={ classnames(
+				blockProps.className,
+				'blocks-gallery-grid',
+				{
+					[ `align${ align }` ]: align,
+					[ `columns-${ columns }` ]: columns !== undefined,
+					[ `columns-default` ]: columns === undefined,
+					'is-cropped': imageCrop,
+				}
+			) }
 		>
-			<ul className="blocks-gallery-grid">
-				{ images.map( ( img, index ) => {
-					const ariaLabel = sprintf(
-						/* translators: 1: the order number of the image. 2: the total number of images. */
-						__( 'image %1$d of %2$d in gallery' ),
-						index + 1,
-						images.length
-					);
+			{ children }
 
-					return (
-						<li
-							className="blocks-gallery-item"
-							key={ img.id ? `${ img.id }-${ index }` : img.url }
-						>
-							<GalleryImage
-								url={ img.url }
-								alt={ img.alt }
-								id={ img.id }
-								isFirstItem={ index === 0 }
-								isLastItem={ index + 1 === images.length }
-								isSelected={
-									isSelected && selectedImage === index
-								}
-								onMoveBackward={ onMoveBackward( index ) }
-								onMoveForward={ onMoveForward( index ) }
-								onRemove={ onRemoveImage( index ) }
-								onSelect={ onSelectImage( index ) }
-								onDeselect={ onDeselectImage( index ) }
-								setAttributes={ ( attrs ) =>
-									onSetImageAttributes( index, attrs )
-								}
-								caption={ img.caption }
-								aria-label={ ariaLabel }
-								sizeSlug={ attributes.sizeSlug }
-							/>
-						</li>
-					);
-				} ) }
-			</ul>
-			{ mediaPlaceholder }
+			<View
+				className="blocks-gallery-media-placeholder-wrapper"
+				onClick={ removeCaptionFocus }
+			>
+				{ mediaPlaceholder }
+			</View>
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
+				captionFocused={ captionFocused }
+				onFocusCaption={ onFocusCaption }
 				tagName="figcaption"
 				className="blocks-gallery-caption"
 				aria-label={ __( 'Gallery caption text' ) }
@@ -108,11 +98,32 @@ export const Gallery = ( props ) => {
 	);
 };
 
-function RichTextVisibilityHelper( { isHidden, ...richTextProps } ) {
-	return isHidden ? (
-		<VisuallyHidden as={ RichText } { ...richTextProps } />
-	) : (
-		<RichText { ...richTextProps } />
+function RichTextVisibilityHelper( {
+	isHidden,
+	captionFocused,
+	onFocusCaption,
+	className,
+	value,
+	placeholder,
+	tagName,
+	captionRef,
+	...richTextProps
+} ) {
+	if ( isHidden ) {
+		return <VisuallyHidden as={ RichText } { ...richTextProps } />;
+	}
+
+	return (
+		<RichText
+			ref={ captionRef }
+			value={ value }
+			placeholder={ placeholder }
+			className={ className }
+			tagName={ tagName }
+			isSelected={ captionFocused }
+			onClick={ onFocusCaption }
+			{ ...richTextProps }
+		/>
 	);
 }
 

package/src/gallery/gallery.native.js

@@ -7,10 +7,8 @@ import { isEmpty } from 'lodash';
 /**
  * Internal dependencies
  */
-import GalleryImage from './gallery-image';
 import { defaultColumnsNumber } from './shared';
 import styles from './gallery-styles.scss';
-import Tiles from './tiles';
 
 /**
  * WordPress dependencies
@@ -18,123 +16,88 @@ import Tiles from './tiles';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockCaption,
-	store as blockEditorStore,
+	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { mediaUploadSync } from '@wordpress/react-native-bridge';
-import { useSelect } from '@wordpress/data';
-import { alignmentHelpers } from '@wordpress/components';
+import { WIDE_ALIGNMENTS } from '@wordpress/components';
+import { useResizeObserver } from '@wordpress/compose';
 
-const TILE_SPACING = 15;
+const TILE_SPACING = 8;
 
 // we must limit displayed columns since readable content max-width is 580px
 const MAX_DISPLAYED_COLUMNS = 4;
 const MAX_DISPLAYED_COLUMNS_NARROW = 2;
 
-const { isFullWidth } = alignmentHelpers;
-
 export const Gallery = ( props ) => {
 	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const [ maxWidth, setMaxWidth ] = useState( 0 );
 	useEffect( mediaUploadSync, [] );
 
-	const isRTL = useSelect( ( select ) => {
-		return !! select( blockEditorStore ).getSettings().isRTL;
-	}, [] );
-
 	const {
-		clientId,
-		selectedImage,
 		mediaPlaceholder,
-		onBlur,
-		onMoveBackward,
-		onMoveForward,
-		onRemoveImage,
-		onSelectImage,
-		onSetImageAttributes,
-		onFocusGalleryCaption,
 		attributes,
-		isSelected,
 		isNarrow,
-		onFocus,
+		onBlur,
 		insertBlocksAfter,
+		clientId,
 	} = props;
 
+	useEffect( () => {
+		const { width } = sizes || {};
+		if ( width ) {
+			setMaxWidth( width );
+		}
+	}, [ sizes ] );
+
 	const {
-		align,
-		columns = defaultColumnsNumber( attributes ),
-		imageCrop,
 		images,
+		align,
+		columns = defaultColumnsNumber( images.length ),
 	} = attributes;
 
-	// limit displayed columns when isNarrow is true (i.e. when viewport width is
-	// less than "small", where small = 600)
-	const displayedColumns = isNarrow
-		? Math.min( columns, MAX_DISPLAYED_COLUMNS_NARROW )
-		: Math.min( columns, MAX_DISPLAYED_COLUMNS );
+	const displayedColumns = Math.min(
+		columns,
+		isNarrow ? MAX_DISPLAYED_COLUMNS_NARROW : MAX_DISPLAYED_COLUMNS
+	);
 
-	const selectImage = ( index ) => {
-		return () => {
-			if ( isCaptionSelected ) {
-				setIsCaptionSelected( false );
-			}
-			// we need to fully invoke the curried function here
-			onSelectImage( index )();
-		};
-	};
+	const innerBlocksProps = useInnerBlocksProps(
+		{},
+		{
+			contentResizeMode: 'stretch',
+			allowedBlocks: [ 'core/image' ],
+			orientation: 'horizontal',
+			renderAppender: false,
+			numColumns: displayedColumns,
+			marginHorizontal: TILE_SPACING,
+			marginVertical: TILE_SPACING,
+			__experimentalLayout: { type: 'default', alignments: [] },
+			gridProperties: {
+				numColumns: displayedColumns,
+			},
+			parentWidth: maxWidth + 2 * TILE_SPACING,
+		}
+	);
 
 	const focusGalleryCaption = () => {
 		if ( ! isCaptionSelected ) {
 			setIsCaptionSelected( true );
 		}
-		onFocusGalleryCaption();
 	};
 
+	const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;
+
 	return (
-		<View style={ { flex: 1 } }>
-			<Tiles
-				columns={ displayedColumns }
-				spacing={ TILE_SPACING }
-				style={
-					isSelected
-						? styles.galleryTilesContainerSelected
-						: undefined
-				}
+		<View style={ isFullWidth && styles.fullWidth }>
+			{ resizeObserver }
+			<View { ...innerBlocksProps } />
+			<View
+				style={ [
+					isFullWidth && styles.fullWidth,
+					styles.galleryAppender,
+				] }
 			>
-				{ images.map( ( img, index ) => {
-					const ariaLabel = sprintf(
-						/* translators: 1: the order number of the image. 2: the total number of images. */
-						__( 'image %1$d of %2$d in gallery' ),
-						index + 1,
-						images.length
-					);
-
-					return (
-						<GalleryImage
-							key={ img.id ? `${ img.id }-${ index }` : img.url }
-							url={ img.url }
-							alt={ img.alt }
-							id={ parseInt( img.id, 10 ) } // make id an integer explicitly
-							isCropped={ imageCrop }
-							isFirstItem={ index === 0 }
-							isLastItem={ index + 1 === images.length }
-							isSelected={ isSelected && selectedImage === index }
-							isBlockSelected={ isSelected }
-							onMoveBackward={ onMoveBackward( index ) }
-							onMoveForward={ onMoveForward( index ) }
-							onRemove={ onRemoveImage( index ) }
-							onSelect={ selectImage( index ) }
-							onSelectBlock={ onFocus }
-							setAttributes={ ( attrs ) =>
-								onSetImageAttributes( index, attrs )
-							}
-							caption={ img.caption }
-							aria-label={ ariaLabel }
-							isRTL={ isRTL }
-						/>
-					);
-				} ) }
-			</Tiles>
-			<View style={ isFullWidth( align ) && styles.fullWidth }>
 				{ mediaPlaceholder }
 			</View>
 			<BlockCaption
@@ -144,6 +107,7 @@ export const Gallery = ( props ) => {
 				accessibilityLabelCreator={ ( caption ) =>
 					isEmpty( caption )
 						? /* translators: accessibility text. Empty gallery caption. */
+
 						  'Gallery caption. Empty'
 						: sprintf(
 								/* translators: accessibility text. %s: gallery caption. */

package/src/gallery/index.js

@@ -7,7 +7,7 @@ import { gallery as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import deprecated from './deprecated';
-import edit from './edit';
+import edit from './edit-wrapper';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
@@ -21,17 +21,23 @@ export const settings = {
 	example: {
 		attributes: {
 			columns: 2,
-			images: [
-				{
+		},
+		innerBlocks: [
+			{
+				name: 'core/image',
+				attributes: {
 					url:
 						'https://s.w.org/images/core/5.3/Glacial_lakes%2C_Bhutan.jpg',
 				},
-				{
+			},
+			{
+				name: 'core/image',
+				attributes: {
 					url:
 						'https://s.w.org/images/core/5.3/Sediment_off_the_Yucatan_Peninsula.jpg',
 				},
-			],
-		},
+			},
+		],
 	},
 	transforms,
 	edit,

package/src/gallery/save.js

@@ -1,74 +1,34 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { defaultColumnsNumber } from './shared';
-import {
-	LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA,
-} from './constants';
-
-export default function save( { attributes } ) {
-	const {
-		images,
-		columns = defaultColumnsNumber( attributes ),
-		imageCrop,
-		caption,
-		linkTo,
-	} = attributes;
-	const className = `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }`;
+import saveWithoutInnerBlocks from './v1/save';
 
-	return (
-		<figure { ...useBlockProps.save( { className } ) }>
-			<ul className="blocks-gallery-grid">
-				{ images.map( ( image ) => {
-					let href;
+export default function saveWithInnerBlocks( { attributes } ) {
+	if ( attributes?.ids?.length > 0 || attributes?.images?.length > 0 ) {
+		return saveWithoutInnerBlocks( { attributes } );
+	}
 
-					switch ( linkTo ) {
-						case LINK_DESTINATION_MEDIA:
-							href = image.fullUrl || image.url;
-							break;
-						case LINK_DESTINATION_ATTACHMENT:
-							href = image.link;
-							break;
-					}
+	const { caption, columns, imageCrop } = attributes;
 
-					const img = (
-						<img
-							src={ image.url }
-							alt={ image.alt }
-							data-id={ image.id }
-							data-full-url={ image.fullUrl }
-							data-link={ image.link }
-							className={
-								image.id ? `wp-image-${ image.id }` : null
-							}
-						/>
-					);
+	const className = classnames( 'has-nested-images', {
+		[ `columns-${ columns }` ]: columns !== undefined,
+		[ `columns-default` ]: columns === undefined,
+		'is-cropped': imageCrop,
+	} );
 
-					return (
-						<li
-							key={ image.id || image.url }
-							className="blocks-gallery-item"
-						>
-							<figure>
-								{ href ? <a href={ href }>{ img }</a> : img }
-								{ ! RichText.isEmpty( image.caption ) && (
-									<RichText.Content
-										tagName="figcaption"
-										className="blocks-gallery-item__caption"
-										value={ image.caption }
-									/>
-								) }
-							</figure>
-						</li>
-					);
-				} ) }
-			</ul>
+	return (
+		<figure { ...useBlockProps.save( { className } ) }>
+			<InnerBlocks.Content />
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"