@wordpress/block-library 7.7.0 → 7.10.0

package/src/search/theme.scss

@@ -3,3 +3,8 @@
 		font-weight: bold;
 	}
 }
+
+.wp-block-search__button {
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+}

package/src/separator/use-deprecated-opacity.js

@@ -9,10 +9,8 @@ export default function useDeprecatedOpacity(
 	currentColor,
 	setAttributes
 ) {
-	const [
-		deprecatedOpacityWithNoColor,
-		setDeprecatedOpacityWithNoColor,
-	] = useState( false );
+	const [ deprecatedOpacityWithNoColor, setDeprecatedOpacityWithNoColor ] =
+		useState( false );
 	const previousColor = usePrevious( currentColor );
 
 	// A separator with no color set will always have previousColor set to undefined,

package/src/shortcode/edit.native.js

@@ -48,9 +48,10 @@ export function ShortcodeEdit( props ) {
 		shortcodeContainerStyle.paddingLeft +
 		shortcodeContainerStyle.paddingRight;
 
-	const onChange = useCallback( ( text ) => setAttributes( { text } ), [
-		setAttributes,
-	] );
+	const onChange = useCallback(
+		( text ) => setAttributes( { text } ),
+		[ setAttributes ]
+	);
 
 	return (
 		<View>

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

@@ -28,11 +28,8 @@ afterAll( () => {
 
 describe( 'Shortcode block', () => {
 	it( 'inserts block', async () => {
-		const {
-			getByA11yLabel,
-			getByTestId,
-			getByText,
-		} = await initializeEditor();
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
 
 		fireEvent.press( getByA11yLabel( 'Add block' ) );
 

package/src/site-logo/edit.js

@@ -40,7 +40,6 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { crop, upload } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -359,7 +358,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-	const [ logoUrl, setLogoUrl ] = useState();
 	const ref = useRef();
 
 	const {
@@ -370,9 +368,8 @@ export default function LogoEdit( {
 		mediaItemData,
 		isRequestingMediaItem,
 	} = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEditedEntityRecord } = select(
-			coreStore
-		);
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
 		const siteSettings = getEditedEntityRecord( 'root', 'site' );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
 		const _siteLogo = siteSettings?.site_logo;
@@ -422,13 +419,7 @@ export default function LogoEdit( {
 			site_icon: newValue ?? null,
 		} );
 
-	let alt = null;
-	if ( mediaItemData ) {
-		alt = mediaItemData.alt_text;
-		if ( logoUrl !== mediaItemData.source_url ) {
-			setLogoUrl( mediaItemData.source_url );
-		}
-	}
+	const { alt_text: alt, source_url: logoUrl } = mediaItemData ?? {};
 
 	const onInitialSelectLogo = ( media ) => {
 		// Initialize the syncSiteIcon toggle. If we currently have no Site logo and no
@@ -454,7 +445,6 @@ export default function LogoEdit( {
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
 			setLogo( undefined );
-			setLogoUrl( media.url );
 			return;
 		}
 
@@ -463,7 +453,6 @@ export default function LogoEdit( {
 
 	const onRemoveLogo = () => {
 		setLogo( null );
-		setLogoUrl( undefined );
 		setAttributes( { width: undefined } );
 	};
 
@@ -520,20 +509,8 @@ export default function LogoEdit( {
 			<Placeholder
 				className={ placeholderClassName }
 				preview={ logoImage }
+				withIllustration={ true }
 			>
-				{
-					<SVG
-						className="components-placeholder__illustration"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 60 60"
-					>
-						<Path
-							vectorEffect="non-scaling-stroke"
-							d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5"
-						/>
-					</SVG>
-				}
 				{ content }
 			</Placeholder>
 		);
@@ -556,7 +533,7 @@ export default function LogoEdit( {
 			{ !! logoUrl && logoImage }
 			{ ! logoUrl && ! canUserEdit && (
 				<Placeholder className="site-logo_placeholder">
-					{ isLoading && (
+					{ !! isLoading && (
 						<span className="components-placeholder__preview">
 							<Spinner />
 						</span>

package/src/site-logo/editor.scss

@@ -131,20 +131,6 @@
 		.components-button.components-button > svg {
 			color: $white;
 		}
-
-		// Style the placeholder illustration.
-		.components-placeholder__illustration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			stroke: currentColor;
-			stroke-dasharray: 3;
-			opacity: 0.4;
-		}
 	}
 
 	// Show upload button on block selection.

package/src/site-title/edit/level-toolbar.js

@@ -21,6 +21,7 @@ export default function LevelControl( { level, onChange } ) {
 					  sprintf( __( 'Heading %d' ), currentLevel ),
 			isActive,
 			onClick: () => onChange( currentLevel ),
+			role: 'menuitemradio',
 		};
 	} );
 	return (

package/src/social-link/index.php

@@ -27,6 +27,22 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		return '';
 	}
 
+	/**
+	 * Prepend emails with `mailto:` if not set.
+	 * The `is_email` returns false for emails with schema.
+	 */
+	if ( is_email( $url ) ) {
+		$url = 'mailto:' . $url;
+	}
+
+	/**
+	 * Prepend URL with https:// if it doesn't appear to contain a scheme
+	 * and it's not a relative link starting with //.
+	 */
+	if ( ! parse_url( $url, PHP_URL_SCHEME ) && ! str_starts_with( $url, '//' ) ) {
+		$url = 'https://' . $url;
+	}
+
 	$rel_target_attributes = '';
 	if ( $open_in_new_tab ) {
 		$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';

package/src/social-links/deprecated.js

@@ -99,12 +99,14 @@ const deprecated = [
 			const className = classNames( size, {
 				'has-icon-color': iconColorValue,
 				'has-icon-background-color': iconBackgroundColorValue,
-				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
+				[ `items-justified-${ itemsJustification }` ]:
+					itemsJustification,
 			} );
 
 			const style = {
 				'--wp--social-links--icon-color': iconColorValue,
-				'--wp--social-links--icon-background-color': iconBackgroundColorValue,
+				'--wp--social-links--icon-background-color':
+					iconBackgroundColorValue,
 			};
 
 			return (

package/src/social-links/edit.native.js

@@ -68,11 +68,9 @@ function SocialLinksEdit( {
 	);
 
 	function renderPlaceholder() {
-		return [
-			...new Array( innerBlocks.length || 1 ),
-		].map( ( _, index ) => (
-			<View style={ placeholderStyle } key={ index } />
-		) );
+		return [ ...new Array( innerBlocks.length || 1 ) ].map(
+			( _, index ) => <View style={ placeholderStyle } key={ index } />
+		);
 	}
 
 	function filterInnerBlocks( blockIds ) {

package/src/spacer/controls.js

@@ -43,9 +43,8 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	};
 
 	// Force the unit to update to `px` when the Spacer is being resized.
-	const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue(
-		value
-	);
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( value );
 	const computedValue = [
 		parsedQuantity,
 		isResizing ? 'px' : parsedUnit,

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

@@ -28,11 +28,8 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const {
-			getByA11yLabel,
-			getByTestId,
-			getByText,
-		} = await initializeEditor();
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
 
 		fireEvent.press( getByA11yLabel( 'Add block' ) );
 
@@ -56,14 +53,10 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const {
-			getByA11yLabel,
-			getByDisplayValue,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml,
-		} );
+		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml,
+			} );
 
 		// Select Spacer block
 		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
@@ -87,14 +80,10 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const {
-			getByA11yLabel,
-			getByDisplayValue,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml,
-		} );
+		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml,
+			} );
 
 		// Select Spacer block
 		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );

package/src/style.scss

@@ -50,3 +50,4 @@
 @import "./video/style.scss";
 
 @import "common.scss";
+@import "./elements.scss";

package/src/table/block.json

@@ -156,7 +156,12 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table"
+		"__experimentalSelector": ".wp-block-table > table",
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"styles": [
 		{

package/src/table/deprecated.js

@@ -198,7 +198,8 @@ const deprecated = [
 										cellIndex
 									) => {
 										const cellClasses = classnames( {
-											[ `has-text-align-${ align }` ]: align,
+											[ `has-text-align-${ align }` ]:
+												align,
 										} );
 
 										return (
@@ -367,13 +368,8 @@ const deprecated = [
 		},
 		supports,
 		save( { attributes } ) {
-			const {
-				hasFixedLayout,
-				head,
-				body,
-				foot,
-				backgroundColor,
-			} = attributes;
+			const { hasFixedLayout, head, body, foot, backgroundColor } =
+				attributes;
 			const isEmpty = ! head.length && ! body.length && ! foot.length;
 
 			if ( isEmpty ) {

package/src/table/edit.js

@@ -16,6 +16,7 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -509,6 +510,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<RichText
 					tagName="figcaption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }
 					placeholder={ __( 'Add caption' ) }
 					value={ caption }

package/src/table/save.js

@@ -11,6 +11,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -82,7 +83,11 @@ export default function save( { attributes } ) {
 				<Section type="foot" rows={ foot } />
 			</table>
 			{ hasCaption && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					tagName="figcaption"
+					value={ caption }
+					className={ __experimentalGetElementClassName( 'caption' ) }
+				/>
 			) }
 		</figure>
 	);

package/src/table/state.js

@@ -79,10 +79,8 @@ export function updateSelectedCell( state, selection, updateCell ) {
 	}
 
 	const tableSections = pick( state, [ 'head', 'body', 'foot' ] );
-	const {
-		sectionName: selectionSectionName,
-		rowIndex: selectionRowIndex,
-	} = selection;
+	const { sectionName: selectionSectionName, rowIndex: selectionRowIndex } =
+		selection;
 
 	return mapValues( tableSections, ( section, sectionName ) => {
 		if ( selectionSectionName && selectionSectionName !== sectionName ) {

package/src/table/style.scss

@@ -1,5 +1,4 @@
 .wp-block-table {
-	margin: 0 0 1em 0;
 	$subtle-light-gray: #f3f4f5;
 	$subtle-pale-green: #e9fbe5;
 	$subtle-pale-blue: #e7f5fe;

package/src/table-of-contents/edit.js

@@ -59,9 +59,8 @@ export default function TableOfContentsEdit( {
 
 	const canInsertList = useSelect(
 		( select ) => {
-			const { getBlockRootClientId, canInsertBlockType } = select(
-				blockEditorStore
-			);
+			const { getBlockRootClientId, canInsertBlockType } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
 			return canInsertBlockType( 'core/list', rootClientId );
@@ -69,10 +68,8 @@ export default function TableOfContentsEdit( {
 		[ clientId ]
 	);
 
-	const {
-		__unstableMarkNextChangeAsNotPersistent,
-		replaceBlocks,
-	} = useDispatch( blockEditorStore );
+	const { __unstableMarkNextChangeAsNotPersistent, replaceBlocks } =
+		useDispatch( blockEditorStore );
 
 	/**
 	 * The latest heading data, or null if the new data deeply equals the saved
@@ -184,9 +181,8 @@ export default function TableOfContentsEdit( {
 					headingPage === tocPage
 				) {
 					if ( blockName === 'core/heading' ) {
-						const headingAttributes = getBlockAttributes(
-							blockClientId
-						);
+						const headingAttributes =
+							getBlockAttributes( blockClientId );
 
 						const canBeLinked =
 							typeof headingPageLink === 'string' &&

package/src/tag-cloud/edit.js

@@ -83,9 +83,8 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 
 	const onFontSizeChange = ( fontSizeLabel, newValue ) => {
 		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-		const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue(
-			newValue
-		);
+		const [ quantity, newUnit ] =
+			parseQuantityAndUnitFromRawValue( newValue );
 		if ( ! Number.isFinite( quantity ) ) {
 			return;
 		}
@@ -96,10 +95,8 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 			smallestFontSize,
 			largestFontSize,
 		} ).forEach( ( [ attribute, currentValue ] ) => {
-			const [
-				currentQuantity,
-				currentUnit,
-			] = parseQuantityAndUnitFromRawValue( currentValue );
+			const [ currentQuantity, currentUnit ] =
+				parseQuantityAndUnitFromRawValue( currentValue );
 			// Only add an update if the other font size attribute has a different unit.
 			if ( attribute !== fontSizeLabel && currentUnit !== newUnit ) {
 				updateObj[ attribute ] = `${ currentQuantity }${ newUnit }`;

package/src/template-part/edit/advanced-controls.js

@@ -31,10 +31,10 @@ export function TemplatePartAdvancedControls( {
 	const { areaOptions } = useSelect( ( select ) => {
 		// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
 		// Blocks can be loaded into a *non-post* block editor.
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const definedAreas = select(
-			'core/editor'
-		).__experimentalGetDefaultTemplatePartAreas();
+		/* eslint-disable @wordpress/data-no-store-string-literals */
+		const definedAreas =
+			select( 'core/editor' ).__experimentalGetDefaultTemplatePartAreas();
+		/* eslint-enable @wordpress/data-no-store-string-literals */
 		return {
 			areaOptions: definedAreas.map( ( { label, area: _area } ) => ( {
 				label,

package/src/template-part/edit/index.js

@@ -46,22 +46,18 @@ export default function TemplatePartEdit( {
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		templatePartId
-	);
-	const [
-		isTemplatePartSelectionOpen,
-		setIsTemplatePartSelectionOpen,
-	] = useState( false );
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( templatePartId );
+	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
+		useState( false );
 
 	// Set the postId block attribute if it did not exist,
 	// but wait until the inner blocks have loaded to allow
 	// new edits to trigger this.
 	const { isResolved, innerBlocks, isMissing, area } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution } = select(
-				coreStore
-			);
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
 
 			const getEntityArgs = [

package/src/template-part/edit/utils/hooks.js

@@ -28,9 +28,8 @@ import { createTemplatePartId } from './create-template-part-id';
  */
 export function useAlternativeTemplateParts( area, excludedId ) {
 	const { templateParts, isResolving } = useSelect( ( select ) => {
-		const { getEntityRecords, isResolving: _isResolving } = select(
-			coreStore
-		);
+		const { getEntityRecords, isResolving: _isResolving } =
+			select( coreStore );
 		const query = { per_page: -1 };
 		return {
 			templateParts: getEntityRecords(
@@ -144,10 +143,12 @@ export function useTemplatePartArea( area ) {
 		( select ) => {
 			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
 			// Blocks can be loaded into a *non-post* block editor.
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const definedAreas = select(
-				'core/editor'
-			).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-disable @wordpress/data-no-store-string-literals */
+			const definedAreas =
+				select(
+					'core/editor'
+				).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-enable @wordpress/data-no-store-string-literals */
 
 			const selectedArea = find( definedAreas, { area } );
 			const defaultArea = find( definedAreas, { area: 'uncategorized' } );

package/src/template-part/index.js

@@ -47,7 +47,7 @@ export const settings = {
 	edit,
 };
 
-// Importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects
+// Importing this file includes side effects. This is added in block-library/package.json under sideEffects
 addFilter(
 	'blocks.registerBlockType',
 	'core/template-part',

package/src/template-part/variations.js

@@ -10,11 +10,6 @@ import {
 	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import fallbackVariations from './fallback-variations';
-
 function getTemplatePartIcon( iconName ) {
 	if ( 'header' === iconName ) {
 		return headerIcon;
@@ -31,12 +26,6 @@ export function enhanceTemplatePartVariations( settings, name ) {
 		return settings;
 	}
 
-	// WordPress versions pre-5.8 do not support server side variation registration.
-	// So we must register the fallback variations until those versions are no longer supported.
-	if ( ! ( settings.variations && settings.variations.length ) ) {
-		return { ...settings, variations: fallbackVariations };
-	}
-
 	if ( settings.variations ) {
 		const isActive = ( blockAttributes, variationAttributes ) => {
 			const { area, theme, slug } = blockAttributes;

package/src/transformationCategories.native.js

@@ -32,9 +32,9 @@ const transformationCategories = {
 };
 
 export const transformationCategory = ( blockName ) => {
-	const found = Object.entries(
-		transformationCategories
-	).find( ( [ , value ] ) => value.includes( blockName ) );
+	const found = Object.entries( transformationCategories ).find(
+		( [ , value ] ) => value.includes( blockName )
+	);
 	if ( ! found ) {
 		return [];
 	}

package/src/utils/clean-empty-object.js

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
-import { isEmpty, isObject, identity, mapValues, pickBy } from 'lodash';
+import { isEmpty, mapValues, pickBy } from 'lodash';
+
+const identity = ( x ) => x;
 
 /**
  * Removed empty nodes from nested objects.
@@ -10,7 +12,11 @@ import { isEmpty, isObject, identity, mapValues, pickBy } from 'lodash';
  * @return {Object} Object cleaned from empty nodes.
  */
 const cleanEmptyObject = ( object ) => {
-	if ( ! isObject( object ) || Array.isArray( object ) ) {
+	if (
+		object === null ||
+		typeof object !== 'object' ||
+		Array.isArray( object )
+	) {
 		return object;
 	}
 	const cleanedNestedObjects = pickBy(

package/src/video/block.json

@@ -76,7 +76,12 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-video-editor",
 	"style": "wp-block-video"

package/src/video/edit-common-settings.js

@@ -12,14 +12,8 @@ const options = [
 ];
 
 const VideoSettings = ( { setAttributes, attributes } ) => {
-	const {
-		autoplay,
-		controls,
-		loop,
-		muted,
-		playsInline,
-		preload,
-	} = attributes;
+	const { autoplay, controls, loop, muted, playsInline, preload } =
+		attributes;
 
 	const autoPlayHelpText = __(
 		'Autoplay may cause usability issues for some users.'

package/src/video/edit.js

@@ -26,6 +26,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -266,6 +267,9 @@ function VideoEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Video caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }