@wordpress/block-library 7.7.0 → 7.8.0

package/src/query/edit/query-toolbar.js

@@ -11,13 +11,31 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { settings, list, grid } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 export default function QueryToolbar( {
 	attributes: { query, displayLayout },
 	setQuery,
 	setDisplayLayout,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
+	const hasPatterns = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			return !! __experimentalGetPatternsByBlockTypes(
+				name,
+				rootClientId
+			).length;
+		},
+		[ name, clientId ]
+	);
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
@@ -129,11 +147,13 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
-			<ToolbarGroup className="wp-block-template-part__block-control-group">
-				<ToolbarButton onClick={ openPatternSelectionModal }>
-					{ __( 'Replace' ) }
-				</ToolbarButton>
-			</ToolbarGroup>
+			{ hasPatterns && (
+				<ToolbarGroup className="wp-block-template-part__block-control-group">
+					<ToolbarButton onClick={ openPatternSelectionModal }>
+						{ __( 'Replace' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
 			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);

package/src/quote/v2/edit.js

@@ -39,9 +39,8 @@ const TEMPLATE = [ [ 'core/paragraph', {} ] ];
  */
 const useMigrateOnLoad = ( attributes, clientId ) => {
 	const registry = useRegistry();
-	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { updateBlockAttributes, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		// As soon as the block is loaded, migrate it to the new version.
 
@@ -50,9 +49,8 @@ const useMigrateOnLoad = ( attributes, clientId ) => {
 			return;
 		}
 
-		const [ newAttributes, newInnerBlocks ] = migrateToQuoteV2(
-			attributes
-		);
+		const [ newAttributes, newInnerBlocks ] =
+			migrateToQuoteV2( attributes );
 
 		deprecated( 'Value attribute on the quote block', {
 			since: '6.0',

package/src/quote/v2/test/migrate.js

@@ -68,8 +68,7 @@ describe( 'Migrate quote block', () => {
 
 	it( 'should keep the formats of the value', () => {
 		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
-			value:
-				'<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
+			value: '<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
 			citation: 'Author',
 		} );
 		expect( attributes ).toEqual( {

package/src/search/edit.js

@@ -80,9 +80,8 @@ export default function SearchEdit( {
 
 	const insertedInNavigationBlock = useSelect(
 		( select ) => {
-			const { getBlockParentsByBlockName, wasBlockJustInserted } = select(
-				blockEditorStore
-			);
+			const { getBlockParentsByBlockName, wasBlockJustInserted } =
+				select( blockEditorStore );
 			return (
 				!! getBlockParentsByBlockName( clientId, 'core/navigation' )
 					?.length && wasBlockJustInserted( clientId )
@@ -90,9 +89,8 @@ export default function SearchEdit( {
 		},
 		[ clientId ]
 	);
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		if ( ! insertedInNavigationBlock ) return;
 		// This side-effect should not create an undo level.
@@ -418,12 +416,8 @@ export default function SearchEdit( {
 
 			if ( typeof borderRadius === 'object' ) {
 				// Individual corner border radii present.
-				const {
-					topLeft,
-					topRight,
-					bottomLeft,
-					bottomRight,
-				} = borderRadius;
+				const { topLeft, topRight, bottomLeft, bottomRight } =
+					borderRadius;
 
 				return {
 					...styles,

package/src/search/edit.native.js

@@ -53,14 +53,12 @@ export default function SearchEdit( {
 } ) {
 	const [ isButtonSelected, setIsButtonSelected ] = useState( false );
 	const [ isLabelSelected, setIsLabelSelected ] = useState( false );
-	const [ isPlaceholderSelected, setIsPlaceholderSelected ] = useState(
-		false
-	);
+	const [ isPlaceholderSelected, setIsPlaceholderSelected ] =
+		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
-		false
-	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
 
 	const textInputRef = useRef( null );
 

package/src/search/style.scss

@@ -47,7 +47,8 @@
 	}
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: 4px;
 	border: 1px solid #949494;
 

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';
 
 /**
@@ -370,9 +369,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;
@@ -520,20 +518,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>
 		);

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/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/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/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/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/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.'