@wordpress/block-library 7.6.0 → 7.9.0

package/src/file/style.scss

@@ -1,6 +1,10 @@
 .wp-block-file {
 	margin-bottom: 1.5em;
 
+	&:not(.wp-element-button) {
+		font-size: 0.8em;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}
@@ -10,20 +14,21 @@
 		text-align: right;
 	}
 
-	.wp-block-file__embed {
-		margin-bottom: 1em;
+	* + .wp-block-file__button {
+		margin-left: 0.75em;
 	}
+}
 
-	.wp-block-file__button {
-		background: #32373c;
-		border-radius: 2em;
-		color: $white;
-		font-size: 0.8em;
-		padding: 0.5em 1em;
-	}
+.wp-block-file__embed {
+	margin-bottom: 1em;
+}
 
-	a.wp-block-file__button {
-		text-decoration: none;
+//This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+:where(.wp-block-file__button) {
+	border-radius: 2em;
+	padding: 0.5em 1em;
+
+	&:is(a) {
 
 		&:hover,
 		&:visited,
@@ -35,8 +40,4 @@
 			text-decoration: none;
 		}
 	}
-
-	* + .wp-block-file__button {
-		margin-left: 0.75em;
-	}
 }

package/src/freeform/editor.scss

@@ -211,8 +211,6 @@
 		margin: 0;
 		text-align: center;
 		padding: 6px;
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 	}
 

package/src/gallery/block.json

@@ -110,7 +110,7 @@
 		"html": false,
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true

package/src/gallery/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { concat, find } from 'lodash';
+import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -300,11 +300,13 @@ function GalleryEdit( props ) {
 
 		replaceInnerBlocks(
 			clientId,
-			concat( existingImageBlocks, newBlocks ).sort(
-				( a, b ) =>
-					newOrderMap[ a.attributes.id ] -
-					newOrderMap[ b.attributes.id ]
-			)
+			existingImageBlocks
+				.concat( newBlocks )
+				.sort(
+					( a, b ) =>
+						newOrderMap[ a.attributes.id ] -
+						newOrderMap[ b.attributes.id ]
+				)
 		);
 	}
 

package/src/gallery/gallery.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useInnerBlocksProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -82,7 +86,10 @@ export const Gallery = ( props ) => {
 				captionFocused={ captionFocused }
 				onFocusCaption={ onFocusCaption }
 				tagName="figcaption"
-				className="blocks-gallery-caption"
+				className={ classnames(
+					'blocks-gallery-caption',
+					__experimentalGetElementClassName( 'caption' )
+				) }
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }

package/src/gallery/gallery.native.js

@@ -49,10 +49,8 @@ export const Gallery = ( props ) => {
 		}
 	}, [ sizes ] );
 
-	const {
-		align,
-		columns = defaultColumnsNumber( images.length ),
-	} = attributes;
+	const { align, columns = defaultColumnsNumber( images.length ) } =
+		attributes;
 
 	const displayedColumns = Math.min(
 		columns,

package/src/gallery/gap-styles.js

@@ -8,12 +8,27 @@ export default function GapStyles( { blockGap, clientId } ) {
 	const styleElement = useContext( BlockList.__unstableElementContext );
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
-	const gapValue = blockGap
-		? blockGap
-		: `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
-	const gap = `#block-${ clientId } { 
-		--wp--style--unstable-gallery-gap: ${ gapValue };
-		gap: ${ gapValue } 
+	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	let gapValue = fallbackValue;
+	let column = fallbackValue;
+	let row;
+
+	// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736
+	if ( !! blockGap ) {
+		row =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.top || fallbackValue;
+		column =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.left || fallbackValue;
+		gapValue = row === column ? row : `${ row } ${ column }`;
+	}
+
+	const gap = `#block-${ clientId } {
+		--wp--style--unstable-gallery-gap: ${ column };
+		gap: ${ gapValue }
 	}`;
 
 	const GapStyle = () => {

package/src/gallery/index.js

@@ -26,15 +26,13 @@ export const settings = {
 			{
 				name: 'core/image',
 				attributes: {
-					url:
-						'https://s.w.org/images/core/5.3/Glacial_lakes%2C_Bhutan.jpg',
+					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',
+					url: 'https://s.w.org/images/core/5.3/Sediment_off_the_Yucatan_Peninsula.jpg',
 				},
 			},
 		],

package/src/gallery/index.php

@@ -48,7 +48,18 @@ function block_core_gallery_render( $attributes, $content ) {
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
 	// because we only want to match against the value, not the CSS attribute.
-	$gap     = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	if ( is_array( $gap ) ) {
+		foreach ( $gap as $key => $value ) {
+			// Make sure $value is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
+			$value       = is_string( $value ) ? $value : '';
+			$gap[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
+		}
+	} else {
+		// Make sure $gap is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
+		$gap = is_string( $gap ) ? $gap : '';
+		$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	}
+
 	$class   = wp_unique_id( 'wp-block-gallery-' );
 	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
@@ -56,19 +67,23 @@ function block_core_gallery_render( $attributes, $content ) {
 		$content,
 		1
 	);
+
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
-	$gap_value = $gap ? $gap : 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
-	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; gap: ' . $gap_value . '}';
-	// Ideally styles should be loaded in the head, but blocks may be parsed
-	// after that, so loading in the footer for now.
-	// See https://core.trac.wordpress.org/ticket/53494.
-	add_action(
-		'wp_footer',
-		function () use ( $style ) {
-			echo '<style> ' . $style . '</style>';
-		}
-	);
+	$fallback_gap = 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
+	$gap_value    = $gap ? $gap : $fallback_gap;
+	$gap_column   = $gap_value;
+
+	if ( is_array( $gap_value ) ) {
+		$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap;
+		$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap;
+		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+	}
+
+	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
+	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+
+	gutenberg_enqueue_block_support_styles( $style, 11 );
 	return $content;
 }
 /**

package/src/gallery/save.js

@@ -10,6 +10,7 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 /**
@@ -39,7 +40,10 @@ export default function saveWithInnerBlocks( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }

package/src/gallery/shared.js

@@ -3,6 +3,11 @@
  */
 import { get, pick } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
 export function defaultColumnsNumber( imageCount ) {
 	return imageCount ? Math.min( 3, imageCount ) : 3;
 }
@@ -23,6 +28,15 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	return imageProps;
 };
 
+function getGalleryBlockV2Enabled() {
+	// We want to fail early here, at least during beta testing phase, to ensure
+	// there aren't instances where undefined values cause false negatives.
+	if ( ! window.wp || typeof window.wp.galleryBlockV2Enabled !== 'boolean' ) {
+		throw 'window.wp.galleryBlockV2Enabled is not defined';
+	}
+	return window.wp.galleryBlockV2Enabled;
+}
+
 /**
  * The new gallery block format is not compatible with the use_BalanceTags option
  * in WP versions <= 5.8 https://core.trac.wordpress.org/ticket/54130. The
@@ -30,18 +44,17 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
  * can be removed when minimum supported WP version >=5.9.
  */
 export function isGalleryV2Enabled() {
+	// The logic for the native version is located in a different if statement
+	// due to a lint rule that prohibits a single conditional combining
+	// `process.env.IS_GUTENBERG_PLUGIN` with a native platform check.
+	if ( Platform.isNative ) {
+		return getGalleryBlockV2Enabled();
+	}
+
 	// Only run the Gallery version compat check if the plugin is running, otherwise
 	// assume we are in 5.9 core and enable by default.
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		// We want to fail early here, at least during beta testing phase, to ensure
-		// there aren't instances where undefined values cause false negatives.
-		if (
-			! window.wp ||
-			typeof window.wp.galleryBlockV2Enabled !== 'boolean'
-		) {
-			throw 'window.wp.galleryBlockV2Enabled is not defined';
-		}
-		return window.wp.galleryBlockV2Enabled;
+		return getGalleryBlockV2Enabled();
 	}
 
 	return true;

package/src/gallery/test/__snapshots__/index.native.js.snap

@@ -114,14 +114,14 @@ exports[`Gallery block sets caption to gallery 1`] = `
 "<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
 <figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
 <figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
-<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
+<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block sets caption to gallery items 1`] = `
 "<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
 <figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption class=\\"wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;

package/src/gallery/test/helpers.native.js

@@ -2,28 +2,14 @@
  * External dependencies
  */
 import {
-	act,
-	initializeEditor,
+	addBlock,
 	fireEvent,
-	waitFor,
-	within,
-	waitForStoreResolvers,
+	getBlock,
+	getInnerBlock,
+	initializeEditor,
+	triggerBlockListLayout,
 } from 'test/helpers';
 
-/**
- * WordPress dependencies
- */
-import {
-	requestMediaPicker,
-	subscribeMediaUpload,
-} from '@wordpress/react-native-bridge';
-import {
-	MEDIA_UPLOAD_STATE_UPLOADING,
-	MEDIA_UPLOAD_STATE_SUCCEEDED,
-	MEDIA_UPLOAD_STATE_FAILED,
-	MEDIA_UPLOAD_STATE_RESET,
-} from '@wordpress/block-editor';
-
 /**
  * Adds a Gallery block via the block picker.
  *
@@ -31,54 +17,10 @@ import {
  */
 export const addGalleryBlock = async () => {
 	const screen = await initializeEditor();
-	const { getByA11yLabel, getByTestId, getByText } = screen;
-
-	fireEvent.press( getByA11yLabel( 'Add block' ) );
-
-	const blockList = getByTestId( 'InserterUI-Blocks' );
-	// onScroll event used to force the FlatList to render all items
-	fireEvent.scroll( blockList, {
-		nativeEvent: {
-			contentOffset: { y: 0, x: 0 },
-			contentSize: { width: 100, height: 100 },
-			layoutMeasurement: { width: 100, height: 100 },
-		},
-	} );
-
-	fireEvent.press( await waitFor( () => getByText( 'Gallery' ) ) );
-
+	await addBlock( screen, 'Gallery' );
 	return screen;
 };
 
-/**
- * The gallery items are rendered via the FlatList of the inner block list.
- * In order to render the items of a FlatList, it's required to trigger the
- * "onLayout" event. Additionally, the call is wrapped over "waitForStoreResolvers"
- * because the gallery items request the media data associated with the image to
- * be rendered via the "getMedia" selector.
- *
- * @param {import('react-test-renderer').ReactTestInstance} galleryBlock    Gallery block instance to trigger layout event.
- * @param {Object}                                          [options]       Configuration options for the event.
- * @param {number}                                          [options.width] Width value to be passed to the event.
- */
-export const triggerGalleryLayout = async (
-	galleryBlock,
-	{ width = 320 } = {}
-) =>
-	waitForStoreResolvers( () =>
-		fireEvent(
-			within( galleryBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width,
-					},
-				},
-			}
-		)
-	);
-
 /**
  * Initialize the editor with HTML generated of Gallery block.
  *
@@ -106,12 +48,11 @@ export const initializeWithGalleryBlock = async ( {
 			useLocalUrl,
 		} );
 	const screen = await initializeEditor( { initialHtml } );
-	const { getByA11yLabel } = screen;
 
-	const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ );
+	const galleryBlock = getBlock( screen, 'Gallery' );
 
 	if ( numberOfItems > 0 ) {
-		await triggerGalleryLayout( galleryBlock, { width } );
+		await triggerBlockListLayout( galleryBlock, { width } );
 	}
 
 	if ( selected ) {
@@ -125,109 +66,11 @@ export const initializeWithGalleryBlock = async ( {
  * Gets a gallery item within a Gallery block.
  *
  * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance.
- * @param {number}                                          rowPosition  Row position within the Gallery block.
+ * @param {number}                                          rowIndex     Row position within the Gallery block.
  * @return {import('react-test-renderer').ReactTestInstance} Gallery item.
  */
-export const getGalleryItem = ( galleryBlock, rowPosition ) => {
-	return within( galleryBlock ).getByA11yLabel(
-		new RegExp( `Image Block\\. Row ${ rowPosition }` )
-	);
-};
-
-/**
- * Sets up the media upload mock functions for testing.
- *
- * @typedef {Object} MediaUploadMockFunctions
- * @property {Function} notifyUploadingState Notify uploading state for a media item.
- * @property {Function} notifySucceedState   Notify succeed state for a media item.
- * @property {Function} notifyFailedState    Notify failed state for a media item.
- * @property {Function} notifyResetState     Notify reset state for a media item.
- *
- * @return {MediaUploadMockFunctions} Notify state functions.
- */
-export const setupMediaUpload = () => {
-	const mediaUploadListeners = [];
-	subscribeMediaUpload.mockImplementation( ( callback ) => {
-		mediaUploadListeners.push( callback );
-		return { remove: jest.fn() };
-	} );
-	const notifyMediaUpload = ( payload ) =>
-		mediaUploadListeners.forEach( ( listener ) => listener( payload ) );
-
-	return {
-		notifyUploadingState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_UPLOADING,
-					mediaId: mediaItem.localId,
-					progress: 0.25,
-				} );
-			} ),
-		notifySucceedState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_SUCCEEDED,
-					mediaId: mediaItem.localId,
-					mediaUrl: mediaItem.serverUrl,
-					mediaServerId: mediaItem.serverId,
-				} );
-			} ),
-		notifyFailedState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_FAILED,
-					mediaId: mediaItem.localId,
-					progress: 0.5,
-				} );
-			} ),
-		notifyResetState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_RESET,
-					mediaId: mediaItem.localId,
-					progress: 0,
-				} );
-			} ),
-	};
-};
-
-/**
- *
- * Sets up Media Picker mock functions.
- *
- * @typedef {Object} MediaPickerMockFunctions
- * @property {Function} expectMediaPickerCall Checks if the request media picker function has been called with specific arguments.
- * @property {Function} mediaPickerCallback   Callback function to notify the media items picked from the media picker.
- *
- * @return {MediaPickerMockFunctions} Media picker mock functions.
- */
-export const setupMediaPicker = () => {
-	let mediaPickerCallback;
-	requestMediaPicker.mockImplementation(
-		( source, filter, multiple, callback ) => {
-			mediaPickerCallback = callback;
-		}
-	);
-	return {
-		expectMediaPickerCall: ( source, filter, multiple ) =>
-			expect( requestMediaPicker ).toHaveBeenCalledWith(
-				source,
-				filter,
-				multiple,
-				mediaPickerCallback
-			),
-		mediaPickerCallback: async ( ...mediaItems ) =>
-			act( async () =>
-				mediaPickerCallback(
-					mediaItems.map( ( { localId, localUrl } ) => ( {
-						type: 'image',
-						url: localUrl,
-						id: localId,
-					} ) )
-				)
-			),
-	};
-};
+export const getGalleryItem = ( galleryBlock, rowIndex ) =>
+	getInnerBlock( galleryBlock, 'Image', { rowIndex } );
 
 /**
  * Generates the HTML of a Gallery block.
@@ -261,33 +104,3 @@ export const generateGalleryBlock = (
     <figure class="wp-block-gallery has-nested-images columns-default is-cropped">${ galleryItems }</figure>
     <!-- /wp:gallery -->`;
 };
-
-/**
- * Sets the text of a caption.
- *
- * @param {import('react-test-renderer').ReactTestInstance} element Caption test instance.
- * @param {string}                                          text    Text to be set.
- */
-export const setCaption = ( element, text ) => {
-	fireEvent( element, 'focus' );
-	fireEvent( element, 'onChange', {
-		nativeEvent: {
-			eventCount: 1,
-			target: undefined,
-			text,
-		},
-	} );
-};
-
-/**
- * Opens the block settings of the current selected block.
- *
- * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
- */
-export const openBlockSettings = async ( screen ) => {
-	const { getByA11yLabel, getByTestId } = screen;
-	fireEvent.press( getByA11yLabel( 'Open Settings' ) );
-	await waitFor(
-		() => getByTestId( 'block-settings-modal' ).props.isVisible
-	);
-};