@wordpress/block-library 7.7.0 → 7.8.0

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/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/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.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/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/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/index.native.js

@@ -110,13 +110,10 @@ describe( 'Gallery block', () => {
 	// is addressed.
 	it.skip( 'displays media options picker when selecting the block', async () => {
 		// Initialize with an empty gallery
-		const {
-			getByA11yLabel,
-			getByText,
-			getByTestId,
-		} = await initializeEditor( {
-			initialHtml: generateGalleryBlock( 0 ),
-		} );
+		const { getByA11yLabel, getByText, getByTestId } =
+			await initializeEditor( {
+				initialHtml: generateGalleryBlock( 0 ),
+			} );
 
 		// Tap on Gallery block
 		fireEvent.press( getByText( 'ADD MEDIA' ) );
@@ -208,9 +205,8 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem );
 
 		// Set gallery item caption
-		const captionField = within( galleryItem ).getByPlaceholderText(
-			'Add caption'
-		);
+		const captionField =
+			within( galleryItem ).getByPlaceholderText( 'Add caption' );
 		setCaption(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
@@ -223,10 +219,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc005
 	it( 'successfully uploads items', async () => {
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -263,10 +257,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc006
 	it( 'handles failed uploads', async () => {
 		const { notifyUploadingState, notifyFailedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -319,10 +311,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc007
 	it( 'takes a photo', async () => {
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -360,10 +350,8 @@ describe( 'Gallery block', () => {
 			}.jpeg`,
 		} ) );
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		let otherMediaOptionsCallback;
 		getOtherMediaOptions.mockImplementation( ( filter, callback ) => {
@@ -417,10 +405,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc009
 	it( 'cancels uploads', async () => {
 		const { notifyUploadingState, notifyResetState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -506,10 +492,8 @@ describe( 'Gallery block', () => {
 			localUrl: `file:///IMG_${ index + 1 }.JPG`,
 		} ) );
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		let otherMediaOptionsCallback;
 		getOtherMediaOptions.mockImplementation( ( filter, callback ) => {

package/src/gallery/v1/edit.js

@@ -90,27 +90,22 @@ function GalleryEdit( props ) {
 	} = attributes;
 	const [ selectedImage, setSelectedImage ] = useState();
 	const [ attachmentCaptions, setAttachmentCaptions ] = useState();
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
-	const {
-		imageSizes,
-		mediaUpload,
-		getMedia,
-		wasBlockJustInserted,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-
-		return {
-			imageSizes: settings.imageSizes,
-			mediaUpload: settings.mediaUpload,
-			getMedia: select( coreStore ).getMedia,
-			wasBlockJustInserted: select(
-				blockEditorStore
-			).wasBlockJustInserted( clientId, 'inserter_menu' ),
-		};
-	} );
+	const { imageSizes, mediaUpload, getMedia, wasBlockJustInserted } =
+		useSelect( ( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+
+			return {
+				imageSizes: settings.imageSizes,
+				mediaUpload: settings.mediaUpload,
+				getMedia: select( coreStore ).getMedia,
+				wasBlockJustInserted: select(
+					blockEditorStore
+				).wasBlockJustInserted( clientId, 'inserter_menu' ),
+			};
+		} );
 
 	const resizedImages = useMemo( () => {
 		if ( isSelected ) {

package/src/gallery/v1/gallery-image.js

@@ -47,9 +47,8 @@ class GalleryImage extends Component {
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.bindContainer = this.bindContainer.bind( this );
 		this.onEdit = this.onEdit.bind( this );
-		this.onSelectImageFromLibrary = this.onSelectImageFromLibrary.bind(
-			this
-		);
+		this.onSelectImageFromLibrary =
+			this.onSelectImageFromLibrary.bind( this );
 		this.onSelectCustomURL = this.onSelectCustomURL.bind( this );
 		this.state = {
 			isEditing: false,
@@ -84,11 +83,8 @@ class GalleryImage extends Component {
 	}
 
 	componentDidUpdate() {
-		const {
-			image,
-			url,
-			__unstableMarkNextChangeAsNotPersistent,
-		} = this.props;
+		const { image, url, __unstableMarkNextChangeAsNotPersistent } =
+			this.props;
 		if ( image && ! url ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			this.props.setAttributes( {
@@ -273,9 +269,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { __unstableMarkNextChangeAsNotPersistent } = dispatch(
-			blockEditorStore
-		);
+		const { __unstableMarkNextChangeAsNotPersistent } =
+			dispatch( blockEditorStore );
 		return {
 			__unstableMarkNextChangeAsNotPersistent,
 		};

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

@@ -50,12 +50,10 @@ class GalleryImage extends Component {
 		this.onSelectMedia = this.onSelectMedia.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.renderContent = this.renderContent.bind( this );
 
 		this.state = {
@@ -79,11 +77,8 @@ class GalleryImage extends Component {
 
 	onMediaPressed() {
 		const { id, url, isSelected } = this.props;
-		const {
-			captionSelected,
-			isUploadInProgress,
-			didUploadFail,
-		} = this.state;
+		const { captionSelected, isUploadInProgress, didUploadFail } =
+			this.state;
 
 		this.onSelectImage();
 
@@ -303,12 +298,8 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const {
-			id,
-			onRemove,
-			getStylesFromColorScheme,
-			isSelected,
-		} = this.props;
+		const { id, onRemove, getStylesFromColorScheme, isSelected } =
+			this.props;
 
 		const containerStyle = getStylesFromColorScheme(
 			style.galleryImageContainer,

package/src/heading/autogenerate-anchors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { deburr, trim } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * Object map tracking anchors.
@@ -32,11 +32,14 @@ const getTextWithoutMarkup = ( text ) => {
  */
 const getSlug = ( content ) => {
 	// Get the slug.
-	return trim(
-		deburr( getTextWithoutMarkup( content ) )
+	return (
+		removeAccents( getTextWithoutMarkup( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
 			.replace( /[^\p{L}\p{N}]+/gu, '-' )
-			.toLowerCase(),
-		'-'
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
 	);
 };
 

package/src/heading/deprecated.js

@@ -112,13 +112,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				content,
-				customTextColor,
-				level,
-				textColor,
-			} = attributes;
+			const { align, content, customTextColor, level, textColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );
@@ -154,13 +149,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				content,
-				customTextColor,
-				level,
-				textColor,
-			} = attributes;
+			const { align, content, customTextColor, level, textColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );
@@ -197,13 +187,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				level,
-				content,
-				textColor,
-				customTextColor,
-			} = attributes;
+			const { align, level, content, textColor, customTextColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );

package/src/heading/edit.js

@@ -52,9 +52,8 @@ function HeadingEdit( {
 		};
 	}, [] );
 
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Initially set anchor for headings that have content but no anchor set.
 	// This is used when transforming a block to heading, or for legacy anchors.

package/src/image/block.json

@@ -88,6 +88,11 @@
 			"__experimentalDefaultControls": {
 				"radius": true
 			}
+		},
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
 		}
 	},
 	"styles": [

package/src/image/deprecated.js

@@ -176,16 +176,8 @@ const deprecated = [
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				width,
-				height,
-				id,
-			} = attributes;
+			const { url, alt, caption, align, href, width, height, id } =
+				attributes;
 
 			const classes = classnames( {
 				[ `align${ align }` ]: align,
@@ -218,16 +210,8 @@ const deprecated = [
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				width,
-				height,
-				id,
-			} = attributes;
+			const { url, alt, caption, align, href, width, height, id } =
+				attributes;
 
 			const image = (
 				<img
@@ -255,15 +239,8 @@ const deprecated = [
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				width,
-				height,
-			} = attributes;
+			const { url, alt, caption, align, href, width, height } =
+				attributes;
 			const extraImageProps = width || height ? { width, height } : {};
 			const image = (
 				<img src={ url } alt={ alt } { ...extraImageProps } />

package/src/image/edit.native.js

@@ -196,16 +196,13 @@ export class ImageEdit extends Component {
 
 		this.replacedFeaturedImage = false;
 
-		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.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(
-			this
-		);
+		this.onSelectMediaUploadOption =
+			this.onSelectMediaUploadOption.bind( this );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
 		this.onSetNewTab = this.onSetNewTab.bind( this );
@@ -215,9 +212,8 @@ export class ImageEdit extends Component {
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
 		this.updateAlignment = this.updateAlignment.bind( this );
-		this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(
-			this
-		);
+		this.accessibilityLabelCreator =
+			this.accessibilityLabelCreator.bind( this );
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
 		this.onSizeChangeValue = this.onSizeChangeValue.bind( this );
 	}
@@ -270,12 +266,8 @@ export class ImageEdit extends Component {
 	}
 
 	componentDidUpdate( previousProps ) {
-		const {
-			image,
-			attributes,
-			setAttributes,
-			featuredImageId,
-		} = this.props;
+		const { image, attributes, setAttributes, featuredImageId } =
+			this.props;
 		if ( ! previousProps.image && image ) {
 			const url =
 				getUrlForSlug( image, attributes?.sizeSlug ) ||
@@ -469,11 +461,8 @@ export class ImageEdit extends Component {
 	}
 
 	onSelectURL( newURL ) {
-		const {
-			createErrorNotice,
-			imageDefaultSize,
-			setAttributes,
-		} = this.props;
+		const { createErrorNotice, imageDefaultSize, setAttributes } =
+			this.props;
 
 		if ( isURL( newURL ) ) {
 			this.setState( {
@@ -906,9 +895,8 @@ export class ImageEdit extends Component {
 export default compose( [
 	withSelect( ( select, props ) => {
 		const { getMedia } = select( coreStore );
-		const { getSettings, wasBlockJustInserted } = select(
-			blockEditorStore
-		);
+		const { getSettings, wasBlockJustInserted } =
+			select( blockEditorStore );
 		const { getEditedPostAttribute } = select( 'core/editor' );
 		const {
 			attributes: { id, url },