@wordpress/block-library 7.12.2-next.d6164808d3.0 → 7.14.0

package/src/gallery/edit.js

@@ -13,7 +13,6 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
-	withNotices,
 	RangeControl,
 	Spinner,
 } from '@wordpress/components';
@@ -80,9 +79,7 @@ function GalleryEdit( props ) {
 		attributes,
 		className,
 		clientId,
-		noticeOperations,
 		isSelected,
-		noticeUI,
 		insertBlocksAfter,
 	} = props;
 
@@ -95,7 +92,8 @@ function GalleryEdit( props ) {
 		selectBlock,
 		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
-	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	const { getBlock, getSettings, preferredStyle } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
@@ -244,12 +242,11 @@ function GalleryEdit( props ) {
 			: selectedImages;
 
 		if ( ! imageArray.every( isValidFileType ) ) {
-			noticeOperations.removeAllNotices();
-			noticeOperations.createErrorNotice(
+			createErrorNotice(
 				__(
 					'If uploading to a gallery all files need to be image formats'
 				),
-				{ id: 'gallery-upload-invalid-file' }
+				{ id: 'gallery-upload-invalid-file', type: 'snackbar' }
 			);
 		}
 
@@ -316,8 +313,7 @@ function GalleryEdit( props ) {
 	}
 
 	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
+		createErrorNotice( message, { type: 'snackbar' } );
 	}
 
 	function setLinkTo( value ) {
@@ -470,7 +466,6 @@ function GalleryEdit( props ) {
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			multiple
 			onError={ onUploadError }
-			notices={ noticeUI }
 			{ ...mediaPlaceholderProps }
 		/>
 	);
@@ -560,7 +555,6 @@ function GalleryEdit( props ) {
 					addToGallery={ hasImageIds }
 				/>
 			</BlockControls>
-			{ noticeUI }
 			{ Platform.isWeb && (
 				<GapStyles
 					blockGap={ attributes.style?.spacing?.blockGap }
@@ -581,7 +575,6 @@ function GalleryEdit( props ) {
 		</>
 	);
 }
-export default compose( [
-	withNotices,
-	withViewportMatch( { isNarrow: '< small' } ),
-] )( GalleryEdit );
+export default compose( [ withViewportMatch( { isNarrow: '< small' } ) ] )(
+	GalleryEdit
+);

package/src/gallery/gap-styles.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { BlockList } from '@wordpress/block-editor';
+import {
+	BlockList,
+	__experimentalGetGapCSSValue as getGapCSSValue,
+} from '@wordpress/block-editor';
 import { useContext, createPortal } from '@wordpress/element';
 
 export default function GapStyles( { blockGap, clientId } ) {
@@ -17,17 +20,18 @@ export default function GapStyles( { blockGap, clientId } ) {
 	if ( !! blockGap ) {
 		row =
 			typeof blockGap === 'string'
-				? blockGap
-				: blockGap?.top || fallbackValue;
+				? getGapCSSValue( blockGap )
+				: getGapCSSValue( blockGap?.top ) || fallbackValue;
 		column =
 			typeof blockGap === 'string'
-				? blockGap
-				: blockGap?.left || fallbackValue;
+				? getGapCSSValue( blockGap )
+				: getGapCSSValue( blockGap?.left ) || fallbackValue;
 		gapValue = row === column ? row : `${ row } ${ column }`;
 	}
 
+	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
 	const gap = `#block-${ clientId } {
-		--wp--style--unstable-gallery-gap: ${ column };
+		--wp--style--unstable-gallery-gap: ${ column === '0' ? '0px' : column };
 		gap: ${ gapValue }
 	}`;
 

package/src/gallery/index.js

@@ -6,6 +6,7 @@ import { gallery as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit-wrapper';
 import metadata from './block.json';
@@ -42,3 +43,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/gallery/index.php

@@ -51,13 +51,29 @@ function block_core_gallery_render( $attributes, $content ) {
 	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;
+			$value = is_string( $value ) ? $value : '';
+			$value = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
+
+			// Get spacing CSS variable from preset value if provided.
+			if ( is_string( $value ) && str_contains( $value, 'var:preset|spacing|' ) ) {
+				$index_to_splice = strrpos( $value, '|' ) + 1;
+				$slug            = _wp_to_kebab_case( substr( $value, $index_to_splice ) );
+				$value           = "var(--wp--preset--spacing--$slug)";
+			}
+
+			$gap[ $key ] = $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;
+
+		// Get spacing CSS variable from preset value if provided.
+		if ( is_string( $gap ) && str_contains( $gap, 'var:preset|spacing|' ) ) {
+			$index_to_splice = strrpos( $gap, '|' ) + 1;
+			$slug            = _wp_to_kebab_case( substr( $gap, $index_to_splice ) );
+			$gap             = "var(--wp--preset--spacing--$slug)";
+		}
 	}
 
 	$class   = wp_unique_id( 'wp-block-gallery-' );
@@ -80,10 +96,15 @@ function block_core_gallery_render( $attributes, $content ) {
 		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
 	}
 
+	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
+	if ( '0' === $gap_column ) {
+		$gap_column = '0px';
+	}
+
 	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
 	$style = '.wp-block-gallery.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
 
-	gutenberg_enqueue_block_support_styles( $style, 11 );
+	wp_enqueue_block_support_styles( $style, 11 );
 	return $content;
 }
 /**

package/src/gallery/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/gallery/transforms.native.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
 
 const transforms = {
 	...webTransforms,

package/src/gallery/v1/edit.js

@@ -1,17 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	every,
-	filter,
-	find,
-	forEach,
-	get,
-	isEmpty,
-	map,
-	reduce,
-	some,
-} from 'lodash';
+import { every, filter, find, get, isEmpty, map, reduce, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -346,7 +336,7 @@ function GalleryEdit( props ) {
 			every( images, ( { url } ) => isBlobURL( url ) )
 		) {
 			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
-			forEach( images, ( { url } ) => revokeBlobURL( url ) );
+			images.forEach( ( { url } ) => revokeBlobURL( url ) );
 			mediaUpload( {
 				filesList,
 				onFileChange: onSelectImages,

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, omit } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,14 +111,18 @@ class GalleryImage extends Component {
 		// written by the user, make sure the text is not overwritten.
 		if ( isTemporaryImage( id, url ) ) {
 			if ( alt ) {
-				mediaAttributes = omit( mediaAttributes, [ 'alt' ] );
+				const { alt: omittedAlt, ...restMediaAttributes } =
+					mediaAttributes;
+				mediaAttributes = restMediaAttributes;
 			}
 		}
 
 		// If a caption text was meanwhile written by the user,
 		// make sure the text is not overwritten by empty captions.
 		if ( caption && ! get( mediaAttributes, [ 'caption' ] ) ) {
-			mediaAttributes = omit( mediaAttributes, [ 'caption' ] );
+			const { caption: omittedCaption, ...restMediaAttributes } =
+				mediaAttributes;
+			mediaAttributes = restMediaAttributes;
 		}
 
 		setAttributes( mediaAttributes );

package/src/group/block.json

@@ -14,7 +14,7 @@
 		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
-			"enum": [ "all", "insert", false ]
+			"enum": [ "all", "insert", "noContent", false ]
 		},
 		"layout": {
 			"type": "object",

package/src/group/editor.scss

@@ -39,12 +39,10 @@
 	&::after {
 		content: "";
 		display: flex;
-		border: $border-width dashed currentColor;
-		opacity: 0.4;
-		border-radius: $radius-block-ui;
 		flex: 1 0 $grid-unit-60;
 		pointer-events: none;
 		min-height: $grid-unit-60 - $border-width - $border-width;
+		@include placeholder-style();
 	}
 
 	// Let the parent be selectable in the placeholder area.
@@ -53,28 +51,3 @@
 		pointer-events: all;
 	}
 }
-
-// Show an unselected empty group button as a dashed outline instead of the appender button.
-// This effectively adds a selectable-to-delete state.
-.is-layout-flow.block-editor-block-list__block:not(.is-selected) {
-	> .block-list-appender:only-child {
-		pointer-events: none;
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			border-radius: $radius-block-ui;
-			pointer-events: none;
-		}
-
-		.block-editor-inserter {
-			visibility: hidden;
-		}
-	}
-}

package/src/group/index.js

@@ -7,6 +7,7 @@ import { group as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -86,3 +87,5 @@ export const settings = {
 	deprecated,
 	variations,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/group/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/heading/block.json

@@ -50,6 +50,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true,
 				"fontAppearance": true,

package/src/heading/index.js

@@ -12,6 +12,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -66,3 +67,5 @@ export const settings = {
 	edit,
 	save,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/heading/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/heading/transforms.native.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
 
 const transforms = {
 	...webTransforms,

package/src/home-link/block.json

@@ -23,7 +23,20 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-home-link-editor",
 	"style": "wp-block-home-link"

package/src/home-link/index.js

@@ -7,6 +7,7 @@ import { home } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
@@ -28,3 +29,5 @@ export const settings = {
 		},
 	},
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/home-link/index.php

@@ -128,7 +128,7 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
 
 	return sprintf(
-		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" "rel="home"%3$s>%4$s</a><li>',
+		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" "rel="home"%3$s>%4$s</a></li>',
 		block_core_home_link_build_li_wrapper_attributes( $block->context ),
 		esc_url( home_url() ),
 		$aria_current,

package/src/home-link/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/html/index.js

@@ -7,6 +7,7 @@ import { html as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -30,3 +31,5 @@ export const settings = {
 	save,
 	transforms,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/html/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/image/block.json

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

package/src/image/edit.js

@@ -2,14 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, has, isEmpty, omit, pick } from 'lodash';
+import { get, isEmpty, pick } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { withNotices, Placeholder } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { Placeholder } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockAlignmentControl,
 	BlockControls,
@@ -22,6 +22,7 @@ import {
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -98,8 +99,8 @@ export const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
  */
 function hasDefaultSize( image, defaultSize ) {
 	return (
-		has( image, [ 'sizes', defaultSize, 'url' ] ) ||
-		has( image, [ 'media_details', 'sizes', defaultSize, 'source_url' ] )
+		'url' in ( image?.sizes?.[ defaultSize ] ?? {} ) ||
+		'source_url' in ( image?.media_details?.sizes?.[ defaultSize ] ?? {} )
 	);
 }
 
@@ -108,9 +109,7 @@ export function ImageEdit( {
 	setAttributes,
 	isSelected,
 	className,
-	noticeUI,
 	insertBlocksAfter,
-	noticeOperations,
 	onReplace,
 	context,
 	clientId,
@@ -138,14 +137,24 @@ export function ImageEdit( {
 	}, [ caption ] );
 
 	const ref = useRef();
-	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
-	}, [] );
+	const { imageDefaultSize, mediaUpload, isContentLocked } = useSelect(
+		( select ) => {
+			const { getSettings, __unstableGetContentLockingParent } =
+				select( blockEditorStore );
+			const settings = getSettings();
+			return {
+				imageDefaultSize: settings.imageDefaultSize,
+				mediaUpload: settings.mediaUpload,
+				isContentLocked:
+					!! __unstableGetContentLockingParent( clientId ),
+			};
+		},
+		[]
+	);
 
+	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
+		createErrorNotice( message, { type: 'snackbar' } );
 		setAttributes( {
 			src: undefined,
 			id: undefined,
@@ -179,7 +188,9 @@ export function ImageEdit( {
 		// If a caption text was meanwhile written by the user,
 		// make sure the text is not overwritten by empty captions.
 		if ( captionRef.current && ! get( mediaAttributes, [ 'caption' ] ) ) {
-			mediaAttributes = omit( mediaAttributes, [ 'caption' ] );
+			const { caption: omittedCaption, ...restMediaAttributes } =
+				mediaAttributes;
+			mediaAttributes = restMediaAttributes;
 		}
 
 		let additionalAttributes;
@@ -345,9 +356,10 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
+					isContentLocked={ isContentLocked }
 				/>
 			) }
-			{ ! url && (
+			{ ! url && ! isContentLocked && (
 				<BlockControls group="block">
 					<BlockAlignmentControl
 						value={ align }
@@ -359,7 +371,6 @@ export function ImageEdit( {
 				icon={ <BlockIcon icon={ icon } /> }
 				onSelect={ onSelectImage }
 				onSelectURL={ onSelectURL }
-				notices={ noticeUI }
 				onError={ onUploadError }
 				placeholder={ placeholder }
 				accept="image/*"
@@ -372,4 +383,4 @@ export function ImageEdit( {
 	);
 }
 
-export default withNotices( ImageEdit );
+export default ImageEdit;

package/src/image/image.js

@@ -69,6 +69,7 @@ export default function Image( {
 	containerRef,
 	context,
 	clientId,
+	isContentLocked,
 } ) {
 	const {
 		url = '',
@@ -111,7 +112,7 @@ export default function Image( {
 					),
 			};
 		},
-		[ id, isSelected ]
+		[ id, isSelected, clientId ]
 	);
 	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
 		useSelect(
@@ -152,7 +153,10 @@ export default function Image( {
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
-	const isResizable = allowResize && ! ( isWideAligned && isLargeViewport );
+	const isResizable =
+		allowResize &&
+		! isContentLocked &&
+		! ( isWideAligned && isLargeViewport );
 	const imageSizeOptions = map(
 		filter( imageSizes, ( { slug } ) =>
 			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
@@ -309,10 +313,12 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				<BlockAlignmentControl
-					value={ align }
-					onChange={ updateAlignment }
-				/>
+				{ ! isContentLocked && (
+					<BlockAlignmentControl
+						value={ align }
+						onChange={ updateAlignment }
+					/>
+				) }
 				{ ! multiImageSelection && ! isEditingImage && (
 					<ImageURLInputUI
 						url={ href || '' }

package/src/image/index.js

@@ -7,6 +7,7 @@ import { image as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -54,3 +55,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/image/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/image/theme.scss

@@ -1,3 +1,7 @@
 .wp-block-image figcaption {
 	@include caption-style-theme();
 }
+
+.wp-block-image {
+	margin: 0 0 1em 0;
+}

package/src/image/transforms.js

@@ -151,7 +151,10 @@ const transforms = {
 						__(
 							'If uploading to a gallery all files need to be image formats'
 						),
-						{ id: 'gallery-transform-invalid-file' }
+						{
+							id: 'gallery-transform-invalid-file',
+							type: 'snackbar',
+						}
 					);
 				}
 				return every(