@wordpress/block-library 7.5.0 → 7.8.0

package/src/embed/edit.native.js

@@ -72,57 +72,53 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState(
 		isSelected && wasBlockJustInserted && ! url
 	);
-	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] = useState(
-		isEditingURL
-	);
+	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] =
+		useState( isEditingURL );
 	const { invalidateResolution } = useDispatch( coreStore );
 
-	const {
-		preview,
-		fetching,
-		themeSupportsResponsive,
-		cannotEmbed,
-	} = useSelect(
-		( select ) => {
-			const {
-				getEmbedPreview,
-				hasFinishedResolution,
-				isPreviewEmbedFallback,
-				getThemeSupports,
-			} = select( coreStore );
-			if ( ! url ) {
-				return { fetching: false, cannotEmbed: false };
-			}
+	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
+		useSelect(
+			( select ) => {
+				const {
+					getEmbedPreview,
+					hasFinishedResolution,
+					isPreviewEmbedFallback,
+					getThemeSupports,
+				} = select( coreStore );
+				if ( ! url ) {
+					return { fetching: false, cannotEmbed: false };
+				}
 
-			const embedPreview = getEmbedPreview( url );
-			const hasResolvedEmbedPreview = hasFinishedResolution(
-				'getEmbedPreview',
-				[ url ]
-			);
-			const previewIsFallback = isPreviewEmbedFallback( url );
+				const embedPreview = getEmbedPreview( url );
+				const hasResolvedEmbedPreview = hasFinishedResolution(
+					'getEmbedPreview',
+					[ url ]
+				);
+				const previewIsFallback = isPreviewEmbedFallback( url );
 
-			// The external oEmbed provider does not exist. We got no type info and no html.
-			const badEmbedProvider =
-				embedPreview?.html === false &&
-				embedPreview?.type === undefined;
-			// Some WordPress URLs that can't be embedded will cause the API to return
-			// a valid JSON response with no HTML and `code` set to 404, rather
-			// than generating a fallback response as other embeds do.
-			const wordpressCantEmbed = embedPreview?.code === '404';
-			const validPreview =
-				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
+				// The external oEmbed provider does not exist. We got no type info and no html.
+				const badEmbedProvider =
+					embedPreview?.html === false &&
+					embedPreview?.type === undefined;
+				// Some WordPress URLs that can't be embedded will cause the API to return
+				// a valid JSON response with no HTML and `code` set to 404, rather
+				// than generating a fallback response as other embeds do.
+				const wordpressCantEmbed = embedPreview?.code === '404';
+				const validPreview =
+					!! embedPreview &&
+					! badEmbedProvider &&
+					! wordpressCantEmbed;
 
-			return {
-				preview: validPreview ? embedPreview : undefined,
-				fetching: ! hasResolvedEmbedPreview,
-				themeSupportsResponsive: getThemeSupports()[
-					'responsive-embeds'
-				],
-				cannotEmbed: ! validPreview || previewIsFallback,
-			};
-		},
-		[ url ]
-	);
+				return {
+					preview: validPreview ? embedPreview : undefined,
+					fetching: ! hasResolvedEmbedPreview,
+					themeSupportsResponsive:
+						getThemeSupports()[ 'responsive-embeds' ],
+					cannotEmbed: ! validPreview || previewIsFallback,
+				};
+			},
+			[ url ]
+		);
 
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
@@ -187,9 +183,10 @@ const EmbedEdit = ( props ) => {
 		}
 	}, [ preview, isEditingURL ] );
 
-	useEffect( () => setShowEmbedBottomSheet( isEditingURL ), [
-		isEditingURL,
-	] );
+	useEffect(
+		() => setShowEmbedBottomSheet( isEditingURL ),
+		[ isEditingURL ]
+	);
 
 	const onEditURL = useCallback( ( value ) => {
 		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,

package/src/embed/embed-controls.native.js

@@ -30,9 +30,8 @@ const EmbedControls = ( {
 	linkLabel,
 	onEditURL,
 } ) => {
-	const { closeGeneralSidebar: closeSettingsBottomSheet } = useDispatch(
-		editPostStore
-	);
+	const { closeGeneralSidebar: closeSettingsBottomSheet } =
+		useDispatch( editPostStore );
 
 	return (
 		<>

package/src/embed/embed-preview.js

@@ -15,7 +15,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
 import { RichText, BlockIcon } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -145,7 +145,9 @@ class EmbedPreview extends Component {
 						onChange={ onCaptionChange }
 						inlineToolbar
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 					/>
 				) }

package/src/embed/style.scss

@@ -20,7 +20,6 @@
 }
 
 .wp-block-embed {
-	margin: 0 0 1em 0;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 
 	// Supply caption styles to embeds, even if the theme hasn't opted in.

package/src/embed/test/index.native.js

@@ -246,10 +246,8 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByPlaceholderText,
-				getByTestId,
-			} = await insertEmbedBlock();
+			const { getByPlaceholderText, getByTestId } =
+				await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
@@ -336,11 +334,8 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByPlaceholderText,
-				getByTestId,
-				getByText,
-			} = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
+			const { getByPlaceholderText, getByTestId, getByText } =
+				await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
 			fireEvent.press( getByText( 'ADD LINK' ) );
@@ -412,10 +407,8 @@ describe( 'Embed block', () => {
 
 	describe( 'edit URL', () => {
 		it( 'keeps the previous URL if no URL is set', async () => {
-			const {
-				getByA11yLabel,
-				getByTestId,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByTestId } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -437,11 +430,8 @@ describe( 'Embed block', () => {
 			const initialURL = 'https://twitter.com/notnownikki';
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const {
-				getByA11yLabel,
-				getByDisplayValue,
-				getByTestId,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByDisplayValue, getByTestId } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -673,10 +663,8 @@ describe( 'Embed block', () => {
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
-				const {
-					getByA11yLabel,
-					getByText,
-				} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+				const { getByA11yLabel, getByText } =
+					await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 				// Open alignment options.
 				fireEvent.press(
@@ -743,10 +731,8 @@ describe( 'Embed block', () => {
 				);
 			} );
 
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Convert embed to link.
 			fireEvent.press( getByText( 'More options' ) );
@@ -955,11 +941,8 @@ describe( 'Embed block', () => {
 	describe( 'insert via slash inserter', () => {
 		it( 'insert generic embed block', async () => {
 			const embedBlockSlashInserter = '/Embed';
-			const {
-				getByPlaceholderText,
-				getByA11yLabel,
-				getByText,
-			} = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
+			const { getByPlaceholderText, getByA11yLabel, getByText } =
+				await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
 
 			const paragraphText = getByPlaceholderText( 'Start writing…' );
 			fireEvent( paragraphText, 'focus' );
@@ -997,13 +980,10 @@ describe( 'Embed block', () => {
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
 			it( `inserts ${ title } embed block`, async () => {
 				const embedBlockSlashInserter = `/${ title }`;
-				const {
-					getByPlaceholderText,
-					getByA11yLabel,
-					getByText,
-				} = await initializeEditor( {
-					initialHtml: EMPTY_PARAGRAPH_HTML,
-				} );
+				const { getByPlaceholderText, getByA11yLabel, getByText } =
+					await initializeEditor( {
+						initialHtml: EMPTY_PARAGRAPH_HTML,
+					} );
 
 				const paragraphText = getByPlaceholderText( 'Start writing…' );
 				fireEvent( paragraphText, 'focus' );
@@ -1043,10 +1023,8 @@ describe( 'Embed block', () => {
 	it( 'sets block caption', async () => {
 		const expectedCaption = 'Caption';
 
-		const {
-			getByPlaceholderText,
-			getByDisplayValue,
-		} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+		const { getByPlaceholderText, getByDisplayValue } =
+			await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 		// Set a caption.
 		const captionField = getByPlaceholderText( 'Add caption' );
@@ -1087,10 +1065,8 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -1106,10 +1082,8 @@ describe( 'Embed block', () => {
 		} );
 
 		it( 'does not show media settings panel if responsive is not supported', async () => {
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( WP_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( WP_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(

package/src/file/edit.js

@@ -22,6 +22,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -90,10 +91,8 @@ function FileEdit( {
 		[ id ]
 	);
 
-	const {
-		toggleSelection,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
@@ -301,7 +300,10 @@ function FileEdit( {
 							<RichText
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
-								className={ 'wp-block-file__button' }
+								className={ classnames(
+									'wp-block-file__button',
+									__experimentalElementButtonClassName
+								) }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }

package/src/file/edit.native.js

@@ -72,28 +72,22 @@ export class FileEdit extends Component {
 		this.onLayout = this.onLayout.bind( this );
 		this.onSelectFile = this.onSelectFile.bind( this );
 		this.onChangeFileName = this.onChangeFileName.bind( this );
-		this.onChangeDownloadButtonText = this.onChangeDownloadButtonText.bind(
-			this
-		);
+		this.onChangeDownloadButtonText =
+			this.onChangeDownloadButtonText.bind( this );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.getFileComponent = this.getFileComponent.bind( this );
-		this.onChangeDownloadButtonVisibility = this.onChangeDownloadButtonVisibility.bind(
-			this
-		);
+		this.onChangeDownloadButtonVisibility =
+			this.onChangeDownloadButtonVisibility.bind( this );
 		this.onCopyURL = this.onCopyURL.bind( this );
-		this.onChangeOpenInNewWindow = this.onChangeOpenInNewWindow.bind(
-			this
-		);
+		this.onChangeOpenInNewWindow =
+			this.onChangeOpenInNewWindow.bind( this );
 
-		this.onChangeLinkDestinationOption = this.onChangeLinkDestinationOption.bind(
-			this
-		);
+		this.onChangeLinkDestinationOption =
+			this.onChangeLinkDestinationOption.bind( this );
 		this.onShowLinkSettings = this.onShowLinkSettings.bind( this );
 		this.onFilePressed = this.onFilePressed.bind( this );
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
@@ -398,13 +392,8 @@ export class FileEdit extends Component {
 		const { attributes, media, isSelected } = this.props;
 		const { isButtonFocused, placeholderTextWidth } = this.state;
 
-		const {
-			fileName,
-			downloadButtonText,
-			id,
-			showDownloadButton,
-			align,
-		} = attributes;
+		const { fileName, downloadButtonText, id, showDownloadButton, align } =
+			attributes;
 
 		const minWidth =
 			isButtonFocused ||
@@ -452,7 +441,6 @@ export class FileEdit extends Component {
 						<TouchableWithoutFeedback
 							accessible={ ! isSelected }
 							onPress={ this.onFilePressed }
-							onLongPress={ openMediaOptions }
 							disabled={ ! isSelected }
 						>
 							<View

package/src/file/index.js

@@ -21,8 +21,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			href:
-				'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
+			href: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
 			fileName: _x( 'Armstrong_Small_Step', 'Name of the file' ),
 		},
 	},

package/src/file/save.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalElementButtonClassName,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
@@ -63,7 +72,10 @@ export default function save( { attributes } ) {
 				{ showDownloadButton && (
 					<a
 						href={ href }
-						className="wp-block-file__button"
+						className={ classnames(
+							'wp-block-file__button',
+							__experimentalElementButtonClassName
+						) }
 						download={ true }
 						aria-describedby={ describedById }
 					>

package/src/file/style.scss

@@ -10,19 +10,24 @@
 		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 {
+//This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+.wp-block-file__button {
+	background: #32373c;
+	border-radius: 2em;
+	color: $white;
+	font-size: 0.8em;
+	padding: 0.5em 1em;
+
+	&:is(a) {
 		text-decoration: none;
 
 		&:hover,
@@ -35,8 +40,4 @@
 			text-decoration: none;
 		}
 	}
-
-	* + .wp-block-file__button {
-		margin-left: 0.75em;
-	}
 }

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
@@ -204,10 +204,11 @@ function GalleryEdit( props ) {
 				: undefined;
 		}
 		return {
-			...pickRelevantMediaFiles( imageAttributes, sizeSlug ),
+			...pickRelevantMediaFiles( image, sizeSlug ),
 			...getHrefAndDestination( image, linkTo ),
 			...getUpdatedLinkTargetSettings( linkTarget, attributes ),
 			className: newClassName,
+			caption: imageAttributes.caption,
 			sizeSlug,
 		};
 	}
@@ -299,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

@@ -10,7 +10,7 @@ import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
 
 const allowedBlocks = [ 'core/image' ];
@@ -89,7 +89,7 @@ export const Gallery = ( props ) => {
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
 				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
 			/>
 		</figure>

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',
 				},
 			},
 		],