@wordpress/block-library 7.0.0 → 7.0.2

package/src/cover/edit.js

@@ -27,7 +27,7 @@ import {
 	__experimentalBoxControl as BoxControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
+import { compose, useInstanceId } from '@wordpress/compose';
 import {
 	BlockControls,
 	BlockIcon,
@@ -47,7 +47,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { withDispatch, useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { cover as icon } from '@wordpress/icons';
 import { isBlobURL } from '@wordpress/blob';
 
@@ -310,7 +310,6 @@ function CoverEdit( {
 	setAttributes,
 	setOverlayColor,
 	toggleSelection,
-	markNextChangeAsNotPersistent,
 } ) {
 	const {
 		contentPosition,
@@ -329,6 +328,9 @@ function CoverEdit( {
 		allowedBlocks,
 		templateLock,
 	} = attributes;
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
 	const {
 		gradientClass,
 		gradientValue,
@@ -393,15 +395,13 @@ function CoverEdit( {
 
 	useEffect( () => {
 		// This side-effect should not create an undo level.
-		markNextChangeAsNotPersistent();
+		__unstableMarkNextChangeAsNotPersistent();
 		setAttributes( { isDark: isCoverDark } );
 	}, [ isCoverDark ] );
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
-	const [ temporaryMinHeight, setTemporaryMinHeight ] = useState( null );
-
 	const minHeightWithUnit = minHeightUnit
 		? `${ minHeight }${ minHeightUnit }`
 		: minHeight;
@@ -412,7 +412,7 @@ function CoverEdit( {
 		...( isImageBackground && ! isImgElement
 			? backgroundImageStyles( url )
 			: undefined ),
-		minHeight: temporaryMinHeight || minHeightWithUnit || undefined,
+		minHeight: minHeightWithUnit || undefined,
 	};
 
 	const bgStyle = { backgroundColor: overlayColor.color };
@@ -593,7 +593,7 @@ function CoverEdit( {
 					panelId={ clientId }
 				>
 					<CoverHeightInput
-						value={ temporaryMinHeight || minHeight }
+						value={ minHeight }
 						unit={ minHeightUnit }
 						onChange={ ( newMinHeight ) =>
 							setAttributes( { minHeight: newMinHeight } )
@@ -646,10 +646,7 @@ function CoverEdit( {
 						onSelectMedia={ onSelectMedia }
 						noticeOperations={ noticeOperations }
 						style={ {
-							minHeight:
-								temporaryMinHeight ||
-								minHeightWithUnit ||
-								undefined,
+							minHeight: minHeightWithUnit || undefined,
 						} }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
@@ -667,11 +664,12 @@ function CoverEdit( {
 							setAttributes( { minHeightUnit: 'px' } );
 							toggleSelection( false );
 						} }
-						onResize={ setTemporaryMinHeight }
+						onResize={ ( value ) => {
+							setAttributes( { minHeight: value } );
+						} }
 						onResizeStop={ ( newMinHeight ) => {
 							toggleSelection( true );
 							setAttributes( { minHeight: newMinHeight } );
-							setTemporaryMinHeight( null );
 						} }
 						showHandle={ isSelected }
 					/>
@@ -714,11 +712,12 @@ function CoverEdit( {
 						setAttributes( { minHeightUnit: 'px' } );
 						toggleSelection( false );
 					} }
-					onResize={ setTemporaryMinHeight }
+					onResize={ ( value ) => {
+						setAttributes( { minHeight: value } );
+					} }
 					onResizeStop={ ( newMinHeight ) => {
 						toggleSelection( true );
 						setAttributes( { minHeight: newMinHeight } );
-						setTemporaryMinHeight( null );
 					} }
 					showHandle={ isSelected }
 				/>
@@ -777,18 +776,6 @@ function CoverEdit( {
 }
 
 export default compose( [
-	withDispatch( ( dispatch ) => {
-		const {
-			toggleSelection,
-			__unstableMarkNextChangeAsNotPersistent,
-		} = dispatch( blockEditorStore );
-
-		return {
-			toggleSelection,
-			markNextChangeAsNotPersistent: __unstableMarkNextChangeAsNotPersistent,
-		};
-	} ),
 	withColors( { overlayColor: 'background-color' } ),
 	withNotices,
-	withInstanceId,
 ] )( CoverEdit );

package/src/cover/edit.native.js

@@ -31,6 +31,7 @@ import {
 	ColorPicker,
 	BottomSheetConsumer,
 	useConvertUnitToMobile,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -43,12 +44,17 @@ import {
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
-	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useEffect, useState, useRef, useCallback } from '@wordpress/element';
+import {
+	useEffect,
+	useState,
+	useRef,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import { cover as icon, replace, image, warning } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -142,11 +148,13 @@ const Cover = ( {
 	const isImage = backgroundType === MEDIA_TYPE_IMAGE;
 
 	const THEME_COLORS_COUNT = 4;
-	const colorsDefault = useSetting( 'color.palette' ) || [];
-	const coverDefaultPalette = {
-		colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
-	};
-	const gradients = useSetting( 'color.gradients' ) || [];
+	const colorsDefault = useMobileGlobalStylesColors();
+	const coverDefaultPalette = useMemo( () => {
+		return {
+			colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
+		};
+	}, [ colorsDefault ] );
+	const gradients = useMobileGlobalStylesColors( 'gradients' );
 	const gradientValue =
 		customGradient || getGradientValueBySlug( gradients, gradient );
 	const overlayColorValue = getColorObjectByAttributeValues(

package/src/cover/overlay-color-settings.native.js

@@ -12,9 +12,9 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
-	useSetting,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
+import { useMobileGlobalStylesColors } from '@wordpress/components';
 
 function OverlayColorSettings( {
 	overlayColor,
@@ -23,9 +23,8 @@ function OverlayColorSettings( {
 	customGradient,
 	setAttributes,
 } ) {
-	const EMPTY_ARRAY = [];
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const colors = useMobileGlobalStylesColors();
+	const gradients = useMobileGlobalStylesColors( 'gradients' );
 
 	const gradientValue =
 		customGradient || getGradientValueBySlug( gradients, gradient );

package/src/cover/style.scss

@@ -50,6 +50,10 @@
 		background-color: $black;
 	}
 
+	.has-background-dim.has-background-gradient {
+		background-color: transparent;
+	}
+
 	// the first selector is required for old Cover markup
 	&.has-background-dim::before,
 	.has-background-dim::before {

package/src/cover/transforms.js

@@ -33,6 +33,7 @@ const transforms = {
 						createBlock( 'core/paragraph', {
 							content: caption,
 							fontSize: 'large',
+							align: 'center',
 						} ),
 					]
 				),
@@ -55,6 +56,7 @@ const transforms = {
 						createBlock( 'core/paragraph', {
 							content: caption,
 							fontSize: 'large',
+							align: 'center',
 						} ),
 					]
 				),

package/src/editor.scss

@@ -5,6 +5,7 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comment-author-avatar/editor.scss";
 @import "./comments-query-loop/editor.scss";
 @import "./comments-pagination/editor.scss";
 @import "./comments-pagination-numbers/editor.scss";

package/src/gallery/index.php

@@ -34,17 +34,10 @@ add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility'
 
 /**
  * Registers the `core/gallery` block on server.
- * This render callback needs to be here
- * so that the gallery styles are loaded in block-based themes.
  */
 function register_block_core_gallery() {
 	register_block_type_from_metadata(
-		__DIR__ . '/gallery',
-		array(
-			'render_callback' => function ( $attributes, $content ) {
-				return $content;
-			},
-		)
+		__DIR__ . '/gallery'
 	);
 }
 

package/src/group/block.json

@@ -30,6 +30,7 @@
 			}
 		},
 		"spacing": {
+			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"blockGap": true,
 			"__experimentalDefaultControls": {

package/src/heading/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, Platform } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
@@ -41,6 +41,14 @@ function HeadingEdit( {
 		style,
 	} );
 
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+
+		return {
+			canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
+		};
+	}, [] );
+
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
@@ -48,6 +56,10 @@ function HeadingEdit( {
 	// 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.
 	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
 		if ( ! anchor && content ) {
 			// This side-effect should not create an undo level.
 			__unstableMarkNextChangeAsNotPersistent();
@@ -59,14 +71,15 @@ function HeadingEdit( {
 
 		// Remove anchor map when block unmounts.
 		return () => setAnchor( clientId, null );
-	}, [ content, anchor ] );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
 
 	const onContentChange = ( value ) => {
 		const newAttrs = { content: value };
 		if (
-			! anchor ||
-			! value ||
-			generateAnchor( clientId, content ) === anchor
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
 		) {
 			newAttrs.anchor = generateAnchor( clientId, value );
 		}

package/src/home-link/index.php

@@ -138,25 +138,7 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 	$html .= '>';
 
 	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses(
-			$attributes['label'],
-			array(
-				'code'   => array(),
-				'em'     => array(),
-				'img'    => array(
-					'scale' => array(),
-					'class' => array(),
-					'style' => array(),
-					'src'   => array(),
-					'alt'   => array(),
-				),
-				's'      => array(),
-				'span'   => array(
-					'style' => array(),
-				),
-				'strong' => array(),
-			)
-		);
+		$html .= wp_kses_post( $attributes['label'] );
 	}
 
 	$html .= '</a></li>';

package/src/image/deprecated.js

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const blockAttributes = {
 	align: {
@@ -68,7 +69,110 @@ const blockAttributes = {
 	},
 };
 
+const blockSupports = {
+	anchor: true,
+	color: {
+		__experimentalDuotone: 'img',
+		text: false,
+		background: false,
+	},
+	__experimentalBorder: {
+		radius: true,
+		__experimentalDefaultControls: {
+			radius: true,
+		},
+	},
+};
+
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'img',
+				attribute: 'title',
+			},
+			sizeSlug: {
+				type: 'string',
+			},
+		},
+		supports: blockSupports,
+		save( { attributes } ) {
+			const {
+				url,
+				alt,
+				caption,
+				align,
+				href,
+				rel,
+				linkClass,
+				width,
+				height,
+				id,
+				linkTarget,
+				sizeSlug,
+				title,
+			} = attributes;
+
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const classes = classnames( {
+				[ `align${ align }` ]: align,
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'is-resized': width || height,
+			} );
+
+			const image = (
+				<img
+					src={ url }
+					alt={ alt }
+					className={ id ? `wp-image-${ id }` : null }
+					width={ width }
+					height={ height }
+					title={ title }
+				/>
+			);
+
+			const figure = (
+				<>
+					{ href ? (
+						<a
+							className={ linkClass }
+							href={ href }
+							target={ linkTarget }
+							rel={ newRel }
+						>
+							{ image }
+						</a>
+					) : (
+						image
+					) }
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							value={ caption }
+						/>
+					) }
+				</>
+			);
+
+			if ( 'left' === align || 'right' === align || 'center' === align ) {
+				return (
+					<div { ...useBlockProps.save() }>
+						<figure className={ classes }>{ figure }</figure>
+					</div>
+				);
+			}
+
+			return (
+				<figure { ...useBlockProps.save( { className: classes } ) }>
+					{ figure }
+				</figure>
+			);
+		},
+	},
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {

package/src/image/editor.scss

@@ -70,24 +70,6 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-*:not([data-align]) {
-	> .wp-block-image {
-		display: grid;
-		grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
-		.components-placeholder {
-			grid-column: placeholder;
-		}
-		> div:not(.components-placeholder) {
-			grid-column: image;
-		}
-		> figcaption {
-			grid-column: image;
-			display: table-caption;
-			caption-side: bottom;
-		}
-	}
-}
-
 .wp-block[data-align="left"] > .wp-block-image {
 	margin-right: 1em;
 	margin-left: 0;

package/src/image/save.js

@@ -65,14 +65,6 @@ export default function save( { attributes } ) {
 		</>
 	);
 
-	if ( 'left' === align || 'right' === align || 'center' === align ) {
-		return (
-			<div { ...useBlockProps.save() }>
-				<figure className={ classes }>{ figure }</figure>
-			</div>
-		);
-	}
-
 	return (
 		<figure { ...useBlockProps.save( { className: classes } ) }>
 			{ figure }

package/src/image/style.scss

@@ -22,6 +22,9 @@
 		width: 100%;
 	}
 
+	&.alignleft,
+	&.alignright,
+	&.aligncenter,
 	.alignleft,
 	.alignright,
 	.aligncenter {

package/src/image/test/edit.native.js

@@ -15,7 +15,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
  * WordPress dependencies
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { apiFetch } from '@wordpress/data-controls';
 import {
 	setFeaturedImage,
 	sendMediaUpload,
@@ -40,14 +39,6 @@ sendMediaUpload.mockImplementation( ( payload ) => {
 	uploadCallBack( payload );
 } );
 
-jest.mock( '@wordpress/data-controls', () => {
-	const dataControls = jest.requireActual( '@wordpress/data-controls' );
-	return {
-		...dataControls,
-		apiFetch: jest.fn(),
-	};
-} );
-
 /**
  * Immediately invoke delayed functions. A better alternative would be using
  * fake timers and test the delay itself. However, fake timers does not work
@@ -59,7 +50,6 @@ jest.mock( 'lodash', () => {
 } );
 
 const apiFetchPromise = Promise.resolve( {} );
-apiFetch.mockImplementation( () => apiFetchPromise );
 
 const clipboardPromise = Promise.resolve( '' );
 Clipboard.getString.mockImplementation( () => clipboardPromise );

package/src/latest-posts/edit.js

@@ -480,6 +480,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								<div className={ imageClasses }>
 									{ addLinkToFeaturedImage ? (
 										<a
+											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
 										>

package/src/latest-posts/index.php

@@ -105,7 +105,7 @@ function render_block_core_latest_posts( $attributes ) {
 		}
 
 		$list_items_markup .= sprintf(
-			'<a href="%1$s">%2$s</a>',
+			'<a class="wp-block-latest-posts__post-title" href="%1$s">%2$s</a>',
 			esc_url( $post_link ),
 			$title
 		);

package/src/navigation/edit/index.js

@@ -223,12 +223,12 @@ function Navigation( {
 		hasResolvedNavigationMenus,
 		navigationMenus,
 		navigationMenu,
-		canUserUpdateNavigationEntity,
-		hasResolvedCanUserUpdateNavigationEntity,
-		canUserDeleteNavigationEntity,
-		hasResolvedCanUserDeleteNavigationEntity,
-		canUserCreateNavigation,
-		hasResolvedCanUserCreateNavigation,
+		canUserUpdateNavigationMenu,
+		hasResolvedCanUserUpdateNavigationMenu,
+		canUserDeleteNavigationMenu,
+		hasResolvedCanUserDeleteNavigationMenu,
+		canUserCreateNavigationMenu,
+		hasResolvedCanUserCreateNavigationMenu,
 	} = useNavigationMenu( ref );
 
 	const navRef = useRef();
@@ -361,16 +361,16 @@ function Navigation( {
 
 		if ( isSelected || isInnerBlockSelected ) {
 			if (
-				hasResolvedCanUserUpdateNavigationEntity &&
-				! canUserUpdateNavigationEntity
+				hasResolvedCanUserUpdateNavigationMenu &&
+				! canUserUpdateNavigationMenu
 			) {
 				showCantEditNotice();
 			}
 
 			if (
 				! ref &&
-				hasResolvedCanUserCreateNavigation &&
-				! canUserCreateNavigation
+				hasResolvedCanUserCreateNavigationMenu &&
+				! canUserCreateNavigationMenu
 			) {
 				showCantCreateNotice();
 			}
@@ -378,10 +378,10 @@ function Navigation( {
 	}, [
 		isSelected,
 		isInnerBlockSelected,
-		canUserUpdateNavigationEntity,
-		hasResolvedCanUserUpdateNavigationEntity,
-		canUserCreateNavigation,
-		hasResolvedCanUserCreateNavigation,
+		canUserUpdateNavigationMenu,
+		hasResolvedCanUserUpdateNavigationMenu,
+		canUserCreateNavigationMenu,
+		hasResolvedCanUserCreateNavigationMenu,
 		ref,
 	] );
 
@@ -496,12 +496,9 @@ function Navigation( {
 											onClose();
 										} }
 										onCreateNew={ startWithEmptyMenu }
-										canUserCreateNavigation={
-											canUserCreateNavigation
-										}
-										canUserSwitchNavigation={
-											canSwitchNavigationMenu
-										}
+										/* translators: %s: The name of a menu. */
+										actionLabel={ __( "Switch to '%s'" ) }
+										showManageActions
 									/>
 								) }
 							</ToolbarDropdownMenu>
@@ -648,12 +645,12 @@ function Navigation( {
 				</InspectorControls>
 				{ isEntityAvailable && (
 					<InspectorControls __experimentalGroup="advanced">
-						{ hasResolvedCanUserUpdateNavigationEntity &&
-							canUserUpdateNavigationEntity && (
+						{ hasResolvedCanUserUpdateNavigationMenu &&
+							canUserUpdateNavigationMenu && (
 								<NavigationMenuNameControl />
 							) }
-						{ hasResolvedCanUserDeleteNavigationEntity &&
-							canUserDeleteNavigationEntity && (
+						{ hasResolvedCanUserDeleteNavigationMenu &&
+							canUserDeleteNavigationMenu && (
 								<NavigationMenuDeleteControl
 									onDelete={ startWithEmptyMenu }
 								/>
@@ -675,10 +672,12 @@ function Navigation( {
 								hasResolvedNavigationMenus
 							}
 							clientId={ clientId }
-							canUserCreateNavigation={ canUserCreateNavigation }
+							canUserCreateNavigationMenu={
+								canUserCreateNavigationMenu
+							}
 						/>
 					) }
-					{ ! hasResolvedCanUserCreateNavigation ||
+					{ ! hasResolvedCanUserCreateNavigationMenu ||
 						( ! isEntityAvailable && ! isPlaceholderShown && (
 							<PlaceholderPreview isLoading />
 						) ) }