@wordpress/block-library 5.0.1 → 6.0.1

package/src/gallery/v1/gallery.js

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+import { VisuallyHidden } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import GalleryImage from './gallery-image';
+import { defaultColumnsNumberV1 } from '../deprecated';
+
+export const Gallery = ( props ) => {
+	const {
+		attributes,
+		isSelected,
+		setAttributes,
+		selectedImage,
+		mediaPlaceholder,
+		onMoveBackward,
+		onMoveForward,
+		onRemoveImage,
+		onSelectImage,
+		onDeselectImage,
+		onSetImageAttributes,
+		insertBlocksAfter,
+		blockProps,
+	} = props;
+
+	const {
+		align,
+		columns = defaultColumnsNumberV1( attributes ),
+		caption,
+		imageCrop,
+		images,
+	} = attributes;
+
+	return (
+		<figure
+			{ ...blockProps }
+			className={ classnames( blockProps.className, {
+				[ `align${ align }` ]: align,
+				[ `columns-${ columns }` ]: columns,
+				'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
+					);
+
+					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 }
+			<RichTextVisibilityHelper
+				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
+				tagName="figcaption"
+				className="blocks-gallery-caption"
+				aria-label={ __( 'Gallery caption text' ) }
+				placeholder={ __( 'Write gallery caption…' ) }
+				value={ caption }
+				onChange={ ( value ) => setAttributes( { caption: value } ) }
+				inlineToolbar
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+				}
+			/>
+		</figure>
+	);
+};
+
+function RichTextVisibilityHelper( { isHidden, ...richTextProps } ) {
+	return isHidden ? (
+		<VisuallyHidden as={ RichText } { ...richTextProps } />
+	) : (
+		<RichText { ...richTextProps } />
+	);
+}
+
+export default Gallery;

package/src/gallery/v1/gallery.native.js

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+import { isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import GalleryImage from './gallery-image';
+import { defaultColumnsNumberV1 } from '../deprecated';
+import styles from './gallery-styles.scss';
+import Tiles from './tiles';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	BlockCaption,
+	store as blockEditorStore,
+} 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';
+
+const TILE_SPACING = 15;
+
+// 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 );
+	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,
+		insertBlocksAfter,
+	} = props;
+
+	const {
+		align,
+		columns = defaultColumnsNumberV1( attributes ),
+		imageCrop,
+		images,
+	} = 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 selectImage = ( index ) => {
+		return () => {
+			if ( isCaptionSelected ) {
+				setIsCaptionSelected( false );
+			}
+			// we need to fully invoke the curried function here
+			onSelectImage( index )();
+		};
+	};
+
+	const focusGalleryCaption = () => {
+		if ( ! isCaptionSelected ) {
+			setIsCaptionSelected( true );
+		}
+		onFocusGalleryCaption();
+	};
+
+	return (
+		<View style={ { flex: 1 } }>
+			<Tiles
+				columns={ displayedColumns }
+				spacing={ TILE_SPACING }
+				style={
+					isSelected
+						? styles.galleryTilesContainerSelected
+						: undefined
+				}
+			>
+				{ 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
+				clientId={ clientId }
+				isSelected={ isCaptionSelected }
+				accessible={ true }
+				accessibilityLabelCreator={ ( caption ) =>
+					isEmpty( caption )
+						? /* translators: accessibility text. Empty gallery caption. */
+						  'Gallery caption. Empty'
+						: sprintf(
+								/* translators: accessibility text. %s: gallery caption. */
+								__( 'Gallery caption. %s' ),
+								caption
+						  )
+				}
+				onFocus={ focusGalleryCaption }
+				onBlur={ onBlur } // always assign onBlur as props
+				insertBlocksAfter={ insertBlocksAfter }
+			/>
+		</View>
+	);
+};
+
+export default Gallery;

package/src/gallery/v1/save.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { defaultColumnsNumberV1 } from '../deprecated';
+import {
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_MEDIA,
+} from './constants';
+
+export default function saveV1( { attributes } ) {
+	const {
+		images,
+		columns = defaultColumnsNumberV1( attributes ),
+		imageCrop,
+		caption,
+		linkTo,
+	} = attributes;
+	const className = `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }`;
+
+	return (
+		<figure { ...useBlockProps.save( { className } ) }>
+			<ul className="blocks-gallery-grid">
+				{ images.map( ( image ) => {
+					let href;
+
+					switch ( linkTo ) {
+						case LINK_DESTINATION_MEDIA:
+							href = image.fullUrl || image.url;
+							break;
+						case LINK_DESTINATION_ATTACHMENT:
+							href = image.link;
+							break;
+					}
+
+					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
+							}
+						/>
+					);
+
+					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>
+			{ ! RichText.isEmpty( caption ) && (
+				<RichText.Content
+					tagName="figcaption"
+					className="blocks-gallery-caption"
+					value={ caption }
+				/>
+			) }
+		</figure>
+	);
+}

package/src/gallery/v1/shared.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { get, pick } from 'lodash';
+
+export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
+	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
+	imageProps.url =
+		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
+		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
+		image.url;
+	const fullUrl =
+		get( image, [ 'sizes', 'full', 'url' ] ) ||
+		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );
+	if ( fullUrl ) {
+		imageProps.fullUrl = fullUrl;
+	}
+	return imageProps;
+};

package/src/gallery/{tiles.native.js → v1/tiles.native.js}

@@ -23,7 +23,8 @@ function Tiles( props ) {
 	const lastRow = Math.floor( lastTile / columns );
 
 	const wrappedChildren = Children.map( children, ( child, index ) => {
-		/** Since we don't have `calc()`, we must calculate our spacings here in
+		/**
+		 * Since we don't have `calc()`, we must calculate our spacings here in
 		 * order to preserve even spacing between tiles and equal width for tiles
 		 * in a given row.
 		 *

package/src/gallery/v1/update-gallery-modal.js

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import {
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA,
+} from './constants';
+
+export const updateGallery = ( {
+	clientId,
+	getBlock,
+	replaceBlocks,
+} ) => () => {
+	let link;
+	const {
+		attributes: { sizeSlug, linkTo, images, caption },
+	} = getBlock( clientId );
+
+	switch ( linkTo ) {
+		case 'post':
+			link = LINK_DESTINATION_ATTACHMENT;
+			break;
+		case 'file':
+			link = LINK_DESTINATION_MEDIA;
+			break;
+		default:
+			link = LINK_DESTINATION_NONE;
+			break;
+	}
+	const innerBlocks = images.map( ( image ) =>
+		createBlock( 'core/image', {
+			id: parseInt( image.id, 10 ),
+			url: image.url,
+			alt: image.alt,
+			caption: image.caption,
+			linkDestination: link,
+		} )
+	);
+
+	replaceBlocks(
+		clientId,
+		createBlock(
+			'core/gallery',
+			{ sizeSlug, linkTo: link, caption },
+			innerBlocks
+		)
+	);
+};
+
+export default function UpdateGalleryModal( { onClose, clientId } ) {
+	const { getBlock } = useSelect( blockEditorStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	return (
+		<Modal
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onClose }
+			title={ __( 'Update gallery' ) }
+			className={ 'wp-block-update-gallery-modal' }
+			aria={ {
+				describedby: 'wp-block-update-gallery-modal__description',
+			} }
+		>
+			<p id={ 'wp-block-update-gallery-modal__description' }>
+				{ __(
+					'Updating to the new format adds the ability to use custom links or styles on individual images in the gallery, and makes it easier to add or move them around.'
+				) }
+			</p>
+
+			<div className="wp-block-update-gallery-modal-buttons">
+				<Button isTertiary onClick={ onClose }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					isPrimary
+					onClick={ updateGallery( {
+						replaceBlocks,
+						getBlock,
+						clientId,
+						createBlock,
+					} ) }
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</div>
+		</Modal>
+	);
+}

package/src/group/block.json

@@ -24,7 +24,10 @@
 			"link": true
 		},
 		"spacing": {
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
 		},
 		"__experimentalBorder": {
 			"color": true,

package/src/group/edit.js

@@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
 	useBlockProps,
-	InspectorAdvancedControls,
+	InspectorControls,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	useSetting,
 	store as blockEditorStore,
@@ -13,6 +13,27 @@ import {
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const htmlElementMessages = {
+	header: __(
+		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+	),
+	main: __(
+		'The <main> element should be used for the primary content of your document only. '
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+	article: __(
+		'The <article> element should represent a self contained, syndicatable portion of the document.'
+	),
+	aside: __(
+		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+};
+
 function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
@@ -28,10 +49,12 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const defaultLayout = useSetting( 'layout' ) || {};
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const { type = 'default' } = usedLayout;
+	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps(
-		themeSupportsLayout
+		layoutSupportEnabled
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
@@ -39,13 +62,13 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 			renderAppender: hasInnerBlocks
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
+			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
 		}
 	);
 
 	return (
 		<>
-			<InspectorAdvancedControls>
+			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl
 					label={ __( 'HTML element' ) }
 					options={ [
@@ -61,12 +84,13 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ TagName ] }
 				/>
-			</InspectorAdvancedControls>
-			{ themeSupportsLayout && <TagName { ...innerBlocksProps } /> }
+			</InspectorControls>
+			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }
 			{ /* Ideally this is not needed but it's there for backward compatibility reason
 				to keep this div for themes that might rely on its presence */ }
-			{ ! themeSupportsLayout && (
+			{ ! layoutSupportEnabled && (
 				<TagName { ...blockProps }>
 					<div { ...innerBlocksProps } />
 				</TagName>

package/src/group/index.js

@@ -12,6 +12,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -135,4 +136,5 @@ export const settings = {
 	edit,
 	save,
 	deprecated,
+	variations,
 };

package/src/group/theme.scss

@@ -1,8 +1,6 @@
 .wp-block-group {
-	&.has-background {
+	&:where(.has-background) {
 		// Matches paragraph Block padding
 		padding: $block-bg-padding--v $block-bg-padding--h;
-		margin-top: 0;
-		margin-bottom: 0;
 	}
 }

package/src/group/variations.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'group-row',
+		title: __( 'Row' ),
+		description: __( 'Blocks shown in a row.' ),
+		attributes: { layout: { type: 'flex' } },
+		scope: [ 'inserter' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'flex',
+	},
+];
+
+export default variations;