@wordpress/block-library 8.24.1 → 8.25.1-next.79a6196f.0

package/src/gallery/gallery.js

@@ -6,16 +6,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
-import { forwardRef } from '@wordpress/element';
 
-export const Gallery = ( props, captionRef ) => {
+/**
+ * Internal dependencies
+ */
+import { Caption } from '../utils/caption';
+
+export default function Gallery( props ) {
 	const {
 		attributes,
 		isSelected,
@@ -24,10 +23,11 @@ export const Gallery = ( props, captionRef ) => {
 		insertBlocksAfter,
 		blockProps,
 		__unstableLayoutClassNames: layoutClassNames,
-		showCaption,
+		isContentLocked,
+		multiGallerySelection,
 	} = props;
 
-	const { align, columns, caption, imageCrop } = attributes;
+	const { align, columns, imageCrop } = attributes;
 
 	return (
 		<figure
@@ -50,32 +50,18 @@ export const Gallery = ( props, captionRef ) => {
 					{ mediaPlaceholder }
 				</View>
 			) }
-			{ showCaption &&
-				( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						identifier="caption"
-						aria-label={ __( 'Gallery caption text' ) }
-						placeholder={ __( 'Write gallery caption…' ) }
-						value={ caption }
-						className={ classnames(
-							'blocks-gallery-caption',
-							__experimentalGetElementClassName( 'caption' )
-						) }
-						ref={ captionRef }
-						tagName="figcaption"
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+			<Caption
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				showToolbarButton={
+					! multiGallerySelection && ! isContentLocked
+				}
+				className="blocks-gallery-caption"
+				label={ __( 'Gallery caption text' ) }
+				placeholder={ __( 'Add gallery caption' ) }
+			/>
 		</figure>
 	);
-};
-
-export default forwardRef( Gallery );
+}

package/src/gallery/gallery.native.js

@@ -13,7 +13,11 @@ import styles from './gallery-styles.scss';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { BlockCaption, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	BlockCaption,
+	RichText,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { mediaUploadSync } from '@wordpress/react-native-bridge';
 import { WIDE_ALIGNMENTS } from '@wordpress/components';
@@ -99,7 +103,7 @@ export const Gallery = ( props ) => {
 				isSelected={ isCaptionSelected }
 				accessible={ true }
 				accessibilityLabelCreator={ ( caption ) =>
-					! caption
+					RichText.isEmpty( caption )
 						? /* translators: accessibility text. Empty gallery caption. */
 
 						  'Gallery caption. Empty'

package/src/gallery/index.php

@@ -32,6 +32,21 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
+/**
+ * Filter to randomize the order of image blocks.
+ *
+ * @param array $parsed_block The block being rendered.
+ * @return array The block object with randomized order of image blocks.
+ */
+function block_core_gallery_random_order( $parsed_block ) {
+	if ( 'core/gallery' === $parsed_block['blockName'] && ! empty( $parsed_block['attrs']['randomOrder'] ) ) {
+		shuffle( $parsed_block['innerBlocks'] );
+	}
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'block_core_gallery_random_order' );
+
 /**
  * Adds a style tag for the --wp--style--unstable-gallery-gap var.
  *

package/src/gallery/transforms.js

@@ -13,10 +13,6 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA,
 } from './constants';
-import {
-	LINK_DESTINATION_ATTACHMENT as DEPRECATED_LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA as DEPRECATED_LINK_DESTINATION_MEDIA,
-} from './v1/constants';
 import { pickRelevantMediaFiles, isGalleryV2Enabled } from './shared';
 
 const parseShortcodeIds = ( ids ) => {
@@ -177,57 +173,7 @@ const transforms = {
 		{
 			type: 'shortcode',
 			tag: 'gallery',
-
-			attributes: {
-				images: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: id.toString(),
-							} ) );
-						}
-					},
-				},
-				ids: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids );
-						}
-					},
-				},
-				columns: {
-					type: 'number',
-					shortcode: ( { named: { columns = '3' } } ) => {
-						return parseInt( columns, 10 );
-					},
-				},
-				linkTo: {
-					type: 'string',
-					shortcode: ( { named: { link } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							switch ( link ) {
-								case 'post':
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-								case 'file':
-									return DEPRECATED_LINK_DESTINATION_MEDIA;
-								default:
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-							}
-						}
-						switch ( link ) {
-							case 'post':
-								return LINK_DESTINATION_ATTACHMENT;
-							case 'file':
-								return LINK_DESTINATION_MEDIA;
-							default:
-								return LINK_DESTINATION_NONE;
-						}
-					},
-				},
-			},
-			transform( { named: { ids, columns = 3, link } } ) {
+			transform( { named: { ids, columns = 3, link, orderby } } ) {
 				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
 					parseInt( id, 10 )
 				);
@@ -244,6 +190,7 @@ const transforms = {
 					{
 						columns: parseInt( columns, 10 ),
 						linkTo,
+						randomOrder: orderby === 'rand',
 					},
 					imageIds.map( ( imageId ) =>
 						createBlock( 'core/image', { id: imageId } )

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

@@ -17,6 +17,7 @@ import Tiles from './tiles';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockCaption,
+	RichText,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
@@ -141,7 +142,7 @@ export const Gallery = ( props ) => {
 				isSelected={ isCaptionSelected }
 				accessible={ true }
 				accessibilityLabelCreator={ ( caption ) =>
-					! caption
+					RichText.isEmpty( caption )
 						? /* translators: accessibility text. Empty gallery caption. */
 						  'Gallery caption. Empty'
 						: sprintf(

package/src/group/block.json

@@ -29,7 +29,11 @@
 		"ariaLabel": true,
 		"html": false,
 		"background": {
-			"backgroundImage": true
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
 		},
 		"color": {
 			"gradients": true,

package/src/group/edit.js

@@ -10,6 +10,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { View } from '@wordpress/primitives';
 
@@ -97,7 +98,8 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 		themeSupportsLayout || type === 'flex' || type === 'grid';
 
 	// Hooks.
-	const blockProps = useBlockProps();
+	const ref = useRef();
+	const blockProps = useBlockProps( { ref } );
 
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
@@ -124,6 +126,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
+			dropZoneElement: ref.current,
 			templateLock,
 			allowedBlocks,
 			renderAppender,

package/src/heading/block.json

@@ -12,10 +12,9 @@
 			"type": "string"
 		},
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "h1,h2,h3,h4,h5,h6",
-			"default": "",
 			"__experimentalRole": "content"
 		},
 		"level": {
@@ -57,9 +56,7 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true,
-				"textTransform": true
+				"fontSize": true
 			}
 		},
 		"__unstablePasteTextInline": true,

package/src/image/block.json

@@ -25,8 +25,8 @@
 			"__experimentalRole": "content"
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "figcaption",
 			"__experimentalRole": "content"
 		},

package/src/image/deprecated.js

@@ -651,6 +651,14 @@ const v6 = {
 			},
 		},
 	},
+	migrate( attributes ) {
+		const { height, width } = attributes;
+		return {
+			...attributes,
+			width: typeof width === 'number' ? `${ width }px` : width,
+			height: typeof height === 'number' ? `${ height }px` : height,
+		};
+	},
 	save( { attributes } ) {
 		const {
 			url,

package/src/image/edit.native.js

@@ -47,6 +47,7 @@ import {
 	BlockStyles,
 	store as blockEditorStore,
 	blockSettingsScreens,
+	RichText,
 } from '@wordpress/block-editor';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getProtocol, hasQueryArg, isURL } from '@wordpress/url';
@@ -329,9 +330,7 @@ export class ImageEdit extends Component {
 
 	accessibilityLabelCreator( caption ) {
 		// Checks if caption is empty.
-		return ( typeof caption === 'string' && caption.trim().length === 0 ) ||
-			caption === undefined ||
-			caption === null
+		return RichText.isEmpty( caption )
 			? /* translators: accessibility text. Empty image caption. */
 			  'Image caption. Empty'
 			: sprintf(
@@ -813,6 +812,7 @@ export class ImageEdit extends Component {
 						{ ! this.state.isCaptionSelected &&
 							getToolbarEditButton( openMediaOptions ) }
 						<MediaUploadProgress
+							enablePausedUploads
 							coverUrl={ url }
 							mediaId={ id }
 							onUpdateMediaProgress={ this.updateMediaProgress }
@@ -826,6 +826,7 @@ export class ImageEdit extends Component {
 								this.mediaUploadStateReset
 							}
 							renderContent={ ( {
+								isUploadPaused,
 								isUploadInProgress,
 								isUploadFailed,
 								retryMessage,
@@ -844,6 +845,7 @@ export class ImageEdit extends Component {
 												! isCaptionSelected
 											}
 											isUploadFailed={ isUploadFailed }
+											isUploadPaused={ isUploadPaused }
 											isUploadInProgress={
 												isUploadInProgress
 											}