@wordpress/block-library 9.1.0 → 9.3.0

package/src/gallery/v1/gallery.js

@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import {
-	RichText,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
-import { VisuallyHidden } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { createBlock, getDefaultBlockName } 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={ clsx( 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={ clsx(
-					'blocks-gallery-caption',
-					__experimentalGetElementClassName( 'caption' )
-				) }
-				aria-label={ __( 'Gallery caption text' ) }
-				placeholder={ __( 'Write gallery caption…' ) }
-				value={ caption }
-				onChange={ ( value ) => setAttributes( { caption: value } ) }
-				inlineToolbar
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
-			/>
-		</figure>
-	);
-};
-
-function RichTextVisibilityHelper( { isHidden, ...richTextProps } ) {
-	return isHidden ? (
-		<VisuallyHidden as={ RichText } { ...richTextProps } />
-	) : (
-		<RichText { ...richTextProps } />
-	);
-}
-
-export default Gallery;

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

@@ -1,162 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * 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,
-	RichText,
-	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
-				accessibilityLabelCreator={ ( caption ) =>
-					RichText.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

@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import {
-	RichText,
-	useBlockProps,
-	__experimentalGetElementClassName,
-} 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={ clsx(
-											'blocks-gallery-item__caption',
-											__experimentalGetElementClassName(
-												'caption'
-											)
-										) }
-										value={ image.caption }
-									/>
-								) }
-							</figure>
-						</li>
-					);
-				} ) }
-			</ul>
-			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content
-					tagName="figcaption"
-					className={ clsx(
-						'blocks-gallery-caption',
-						__experimentalGetElementClassName( 'caption' )
-					) }
-					value={ caption }
-				/>
-			) }
-		</figure>
-	);
-}

package/src/gallery/v1/shared.js

@@ -1,19 +0,0 @@
-export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
-	const imageProps = Object.fromEntries(
-		Object.entries( image ?? {} ).filter( ( [ key ] ) =>
-			[ 'alt', 'id', 'link', 'caption' ].includes( key )
-		)
-	);
-
-	imageProps.url =
-		image?.sizes?.[ sizeSlug ]?.url ||
-		image?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
-		image?.url;
-	const fullUrl =
-		image?.sizes?.full?.url ||
-		image?.media_details?.sizes?.full?.source_url;
-	if ( fullUrl ) {
-		imageProps.fullUrl = fullUrl;
-	}
-	return imageProps;
-};

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

@@ -1,11 +0,0 @@
-.containerStyle {
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-
-.tileStyle {
-	overflow: hidden;
-	flex-direction: row;
-	align-items: center;
-	border-color: transparent;
-}

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

@@ -1,79 +0,0 @@
-/**
- * External dependencies
- */
-import { View, StyleSheet } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Children } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './tiles-styles.scss';
-
-function Tiles( props ) {
-	const { columns, children, spacing = 10, style } = props;
-
-	const { compose } = StyleSheet;
-
-	const tileCount = Children.count( children );
-	const lastTile = tileCount - 1;
-	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
-		 * order to preserve even spacing between tiles and equal width for tiles
-		 * in a given row.
-		 *
-		 * In order to ensure equal sizing of tile contents, we distribute the
-		 * spacing such that each tile has an equal "share" of the fixed spacing. To
-		 * keep the tiles properly aligned within their rows, we calculate the left
-		 * and right paddings based on the tile's relative position within the row.
-		 *
-		 * Note: we use padding instead of margins so that the fixed spacing is
-		 * included within the relative spacing (i.e. width percentage), and
-		 * wrapping behavior is preserved.
-		 *
-		 *  - The left most tile in a row must have left padding of zero.
-		 *  - The right most tile in a row must have a right padding of zero.
-		 *
-		 * The values of these left and right paddings are interpolated for tiles in
-		 * between. The right padding is complementary with the left padding of the
-		 * next tile (i.e. the right padding of [tile n] + the left padding of
-		 * [tile n + 1] will be equal for all tiles except the last one in a given
-		 * row).
-		 */
-
-		const row = Math.floor( index / columns );
-		const rowLength =
-			row === lastRow ? ( lastTile % columns ) + 1 : columns;
-		const indexInRow = index % columns;
-
-		return (
-			<View
-				style={ [
-					styles.tileStyle,
-					{
-						width: `${ 100 / rowLength }%`,
-						paddingLeft: spacing * ( indexInRow / rowLength ),
-						paddingRight:
-							spacing * ( 1 - ( indexInRow + 1 ) / rowLength ),
-						paddingTop: row === 0 ? 0 : spacing / 2,
-						paddingBottom: row === lastRow ? 0 : spacing / 2,
-					},
-				] }
-			>
-				{ child }
-			</View>
-		);
-	} );
-
-	const containerStyle = compose( styles.containerStyle, style );
-
-	return <View style={ containerStyle }>{ wrappedChildren }</View>;
-}
-
-export default Tiles;

package/src/utils/constants.js

@@ -1,8 +0,0 @@
-// The following dropdown menu props aim to provide a consistent offset and
-// placement for ToolsPanel menus for block controls to match color popovers.
-export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
-	popoverProps: {
-		placement: 'left-start',
-		offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-	},
-};