@wordpress/block-library 9.36.2-next.8fd3f8831.0 → 9.37.0

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -7,10 +7,9 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState, useEffect, Fragment } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
-import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -52,68 +51,29 @@ export function TaxonomyControls( { onChange, query } ) {
 	const { postType, taxQuery } = query;
 
 	const taxonomies = useTaxonomies( postType );
-	if ( ! taxonomies?.length ) {
+	if ( ! taxonomies || taxonomies.length === 0 ) {
 		return null;
 	}
 
 	return (
 		<VStack spacing={ 4 }>
 			{ taxonomies.map( ( taxonomy ) => {
-				const includeTermIds =
-					taxQuery?.include?.[ taxonomy.slug ] || [];
-				const excludeTermIds =
-					taxQuery?.exclude?.[ taxonomy.slug ] || [];
-				const onChangeTaxQuery = (
-					newTermIds,
-					/** @type {'include'|'exclude'} */ key
-				) => {
-					const newPartialTaxQuery = {
-						...taxQuery?.[ key ],
-						[ taxonomy.slug ]: newTermIds,
-					};
-					// Remove empty arrays from the partial `taxQuery` (include|exclude).
-					if ( ! newTermIds.length ) {
-						delete newPartialTaxQuery[ taxonomy.slug ];
-					}
-					const newTaxQuery = {
-						...taxQuery,
-						[ key ]: !! Object.keys( newPartialTaxQuery ).length
-							? newPartialTaxQuery
-							: undefined,
-					};
+				const termIds = taxQuery?.[ taxonomy.slug ] || [];
+				const handleChange = ( newTermIds ) =>
 					onChange( {
-						// Clean up `taxQuery` if all filters are removed.
-						taxQuery: Object.values( newTaxQuery ).every(
-							( value ) => ! value
-						)
-							? undefined
-							: newTaxQuery,
+						taxQuery: {
+							...taxQuery,
+							[ taxonomy.slug ]: newTermIds,
+						},
 					} );
-				};
+
 				return (
-					<Fragment key={ taxonomy.slug }>
-						<TaxonomyItem
-							taxonomy={ taxonomy }
-							termIds={ includeTermIds }
-							oppositeTermIds={ excludeTermIds }
-							onChange={ ( value ) =>
-								onChangeTaxQuery( value, 'include' )
-							}
-							label={ taxonomy.name }
-						/>
-						<TaxonomyItem
-							taxonomy={ taxonomy }
-							termIds={ excludeTermIds }
-							oppositeTermIds={ includeTermIds }
-							onChange={ ( value ) =>
-								onChangeTaxQuery( value, 'exclude' )
-							}
-							label={
-								/* translators: %s: taxonomy name */
-								sprintf( __( 'Exclude: %s' ), taxonomy.name )
-							}
-						/>
-					</Fragment>
+					<TaxonomyItem
+						key={ taxonomy.slug }
+						taxonomy={ taxonomy }
+						termIds={ termIds }
+						onChange={ handleChange }
+					/>
 				);
 			} ) }
 		</VStack>
@@ -123,21 +83,13 @@ export function TaxonomyControls( { onChange, query } ) {
 /**
  * Renders a `FormTokenField` for a given taxonomy.
  *
- * @param {Object}   props                 The props for the component.
- * @param {Object}   props.taxonomy        The taxonomy object.
- * @param {number[]} props.termIds         An array with the block's term ids for the given taxonomy.
- * @param {number[]} props.oppositeTermIds An array with the opposite control's term ids (to exclude from suggestions).
- * @param {Function} props.onChange        Callback `onChange` function.
- * @param {string}   props.label           Label of the control.
+ * @param {Object}   props          The props for the component.
+ * @param {Object}   props.taxonomy The taxonomy object.
+ * @param {number[]} props.termIds  An array with the block's term ids for the given taxonomy.
+ * @param {Function} props.onChange Callback `onChange` function.
  * @return {JSX.Element} The rendered component.
  */
-function TaxonomyItem( {
-	taxonomy,
-	termIds,
-	oppositeTermIds,
-	onChange,
-	label,
-} ) {
+function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 	const [ search, setSearch ] = useState( '' );
 	const [ value, setValue ] = useState( EMPTY_ARRAY );
 	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
@@ -149,11 +101,6 @@ function TaxonomyItem( {
 			}
 			const { getEntityRecords, hasFinishedResolution } =
 				select( coreStore );
-
-			// Combine current terms and opposite terms for exclusion, to prevent
-			// users from selecting the same term in both include and exclude controls.
-			const combinedExclude = [ ...termIds, ...oppositeTermIds ];
-
 			const selectorArgs = [
 				'taxonomy',
 				taxonomy.slug,
@@ -161,7 +108,7 @@ function TaxonomyItem( {
 					...BASE_QUERY,
 					search,
 					orderby: 'name',
-					exclude: combinedExclude,
+					exclude: termIds,
 					per_page: 20,
 				},
 			];
@@ -173,7 +120,7 @@ function TaxonomyItem( {
 				),
 			};
 		},
-		[ search, taxonomy.slug, termIds, oppositeTermIds ]
+		[ search, taxonomy.slug, termIds ]
 	);
 	// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
 	// They are used to extract the terms' names to populate the `FormTokenField` properly
@@ -236,7 +183,7 @@ function TaxonomyItem( {
 	return (
 		<div className="block-library-query-inspector__taxonomy-control">
 			<FormTokenField
-				label={ label }
+				label={ taxonomy.name }
 				value={ value }
 				onInputChange={ debouncedSearch }
 				suggestions={ suggestions }

package/src/query/edit/pattern-selection.js

@@ -48,9 +48,9 @@ export function useBlockPatterns( clientId, attributes ) {
 	// so that a Query block is always replaced by another Query block.
 	const rootBlockPatterns = useMemo( () => {
 		return allPatterns.filter( ( pattern ) => {
-			return pattern.blocks?.[ 0 ]?.name === 'core/query';
+			return pattern.blocks?.[ 0 ]?.name === blockNameForPatterns;
 		} );
-	}, [ allPatterns ] );
+	}, [ allPatterns, blockNameForPatterns ] );
 
 	return rootBlockPatterns;
 }
@@ -93,6 +93,7 @@ export default function PatternSelection( {
 			{ showSearch && (
 				<div className="block-library-query-pattern__selection-search">
 					<SearchControl
+						__nextHasNoMarginBottom
 						onChange={ setSearchValue }
 						value={ searchValue }
 						label={ __( 'Search' ) }

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

@@ -10,6 +10,7 @@ import {
 	store as blockEditorStore,
 	useInnerBlocksProps,
 	privateApis as blockEditorPrivateApis,
+	BlockControls,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -35,7 +36,6 @@ export default function QueryContent( {
 	clientId,
 	context,
 	name,
-	isSelected,
 } ) {
 	const {
 		queryId,
@@ -130,13 +130,13 @@ export default function QueryContent( {
 
 	return (
 		<>
-			{ isSelected && (
+			<BlockControls>
 				<QueryToolbar
 					clientId={ clientId }
 					attributes={ attributes }
 					hasInnerBlocks
 				/>
-			) }
+			</BlockControls>
 			<EnhancedPaginationModal
 				attributes={ attributes }
 				setAttributes={ setAttributes }

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

@@ -10,6 +10,7 @@ import { useState } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockVariationPicker,
+	BlockControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
@@ -28,7 +29,6 @@ export default function QueryPlaceholder( {
 	clientId,
 	name,
 	openPatternSelectionModal,
-	isSelected,
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
@@ -79,13 +79,13 @@ export default function QueryPlaceholder( {
 	}
 	return (
 		<div { ...blockProps }>
-			{ isSelected && (
+			<BlockControls>
 				<QueryToolbar
 					clientId={ clientId }
 					attributes={ attributes }
 					hasInnerBlocks={ false }
 				/>
-			) }
+			</BlockControls>
 			<Placeholder
 				className="block-editor-media-placeholder"
 				icon={ ! isSmallContainer && icon }

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

@@ -2,33 +2,34 @@
  * WordPress dependencies
  */
 import {
+	ToolbarGroup,
 	ToolbarButton,
 	Dropdown,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import {
-	BlockControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import PatternSelection, { useBlockPatterns } from './pattern-selection';
-import { unlock } from '../../lock-unlock';
 
-function PatternPicker( { clientId, attributes, hasInnerBlocks } ) {
+export default function QueryToolbar( {
+	clientId,
+	attributes,
+	hasInnerBlocks,
+} ) {
 	const hasPatterns = useBlockPatterns( clientId, attributes ).length;
 	if ( ! hasPatterns ) {
 		return null;
 	}
+
 	const buttonLabel = hasInnerBlocks
 		? __( 'Change design' )
 		: __( 'Choose pattern' );
+
 	return (
-		<BlockControls group="other">
+		<ToolbarGroup className="wp-block-template-part__block-control-group">
 			<DropdownContentWrapper>
 				<Dropdown
 					contentClassName="block-editor-block-settings-menu__popover"
@@ -53,20 +54,6 @@ function PatternPicker( { clientId, attributes, hasInnerBlocks } ) {
 					) }
 				/>
 			</DropdownContentWrapper>
-		</BlockControls>
-	);
-}
-
-export default function QueryToolbar( props ) {
-	const isLocked = useSelect(
-		( select ) => {
-			const { isLockedBlock } = unlock( select( blockEditorStore ) );
-			return isLockedBlock( props.clientId );
-		},
-		[ props.clientId ]
+		</ToolbarGroup>
 	);
-	if ( isLocked ) {
-		return null;
-	}
-	return <PatternPicker { ...props } />;
 }

package/src/query-pagination/query-pagination-arrow-controls.js

@@ -11,6 +11,7 @@ export function QueryPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }

package/src/query-pagination/query-pagination-label-control.js

@@ -7,6 +7,7 @@ import { ToggleControl } from '@wordpress/components';
 export function QueryPaginationLabelControl( { value, onChange } ) {
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label={ __( 'Show label text' ) }
 			help={ __( 'Make label text visible, e.g. "Next Page".' ) }
 			onChange={ onChange }

package/src/query-pagination-numbers/edit.js

@@ -73,6 +73,7 @@ export default function QueryPaginationNumbersEdit( {
 					>
 						<RangeControl
 							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 							label={ __( 'Number of links' ) }
 							help={ __(
 								'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'

package/src/query-title/edit.js

@@ -117,6 +117,7 @@ export default function QueryTitleEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Show archive type in title' ) }
 								onChange={ () =>
 									setAttributes( {
@@ -155,6 +156,7 @@ export default function QueryTitleEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Show search term in title' ) }
 								onChange={ () =>
 									setAttributes( {
@@ -213,6 +215,7 @@ export default function QueryTitleEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Show post type label' ) }
 								onChange={ () =>
 									setAttributes( {

package/src/read-more/edit.js

@@ -44,6 +44,7 @@ export default function ReadMore( {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

package/src/rss/edit.js

@@ -172,6 +172,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						isShownByDefault
 					>
 						<RangeControl
+							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label={ __( 'Number of items' ) }
 							value={ itemsToShow }
@@ -193,6 +194,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Display author' ) }
 							checked={ displayAuthor }
 							onChange={ toggleAttribute( 'displayAuthor' ) }
@@ -208,6 +210,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Display date' ) }
 							checked={ displayDate }
 							onChange={ toggleAttribute( 'displayDate' ) }
@@ -223,6 +226,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Display excerpt' ) }
 							checked={ displayExcerpt }
 							onChange={ toggleAttribute( 'displayExcerpt' ) }
@@ -239,6 +243,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 							isShownByDefault
 						>
 							<RangeControl
+								__nextHasNoMarginBottom
 								__next40pxDefaultSize
 								label={ __( 'Max number of words in excerpt' ) }
 								value={ excerptLength }
@@ -260,6 +265,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 							isShownByDefault
 						>
 							<RangeControl
+								__nextHasNoMarginBottom
 								__next40pxDefaultSize
 								label={ __( 'Columns' ) }
 								value={ columns }
@@ -282,6 +288,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open links in new tab' ) }
 							checked={ openInNewTab }
 							onChange={ ( value ) =>
@@ -294,6 +301,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 			<InspectorControls group="advanced">
 				<TextControl
 					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Link relation' ) }
 					help={ createInterpolateElement(
 						__(

package/src/search/edit.js

@@ -367,6 +367,7 @@ export default function SearchEdit( {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							checked={ showLabel }
 							label={ __( 'Show label' ) }
 							onChange={ ( value ) =>
@@ -390,6 +391,7 @@ export default function SearchEdit( {
 						<SelectControl
 							value={ buttonPosition }
 							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 							label={ __( 'Button position' ) }
 							onChange={ ( value ) => {
 								setAttributes( {
@@ -413,6 +415,7 @@ export default function SearchEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								checked={ buttonUseIcon }
 								label={ __( 'Use button with icon' ) }
 								onChange={ ( value ) =>
@@ -489,6 +492,7 @@ export default function SearchEdit( {
 								} }
 								isBlock
 								__next40pxDefaultSize
+								__nextHasNoMarginBottom
 							>
 								{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {
 									return (

package/src/separator/edit.js

@@ -40,6 +40,7 @@ const HtmlElementControl = ( { tagName, setAttributes } ) => {
 					  )
 			}
 			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 	);
 };

package/src/separator/transforms.js

@@ -24,7 +24,7 @@ const transforms = {
 			blocks: [ 'core/spacer' ], // Transform to Spacer.
 			transform: ( { anchor } ) => {
 				return createBlock( 'core/spacer', {
-					anchor: anchor || undefined,
+					anchor: anchor || '',
 				} );
 			},
 		},

package/src/site-logo/edit.js

@@ -301,6 +301,7 @@ const SiteLogo = ( {
 						}
 					>
 						<RangeControl
+							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label={ __( 'Image width' ) }
 							onChange={ ( newWidth ) =>
@@ -324,6 +325,7 @@ const SiteLogo = ( {
 						onDeselect={ () => setAttributes( { isLink: true } ) }
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Link image to home' ) }
 							onChange={ () =>
 								setAttributes( { isLink: ! isLink } )
@@ -342,6 +344,7 @@ const SiteLogo = ( {
 							}
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {
@@ -364,6 +367,7 @@ const SiteLogo = ( {
 							} }
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Use as Site Icon' ) }
 								onChange={ ( value ) => {
 									setAttributes( { shouldSyncIcon: value } );

package/src/site-title/edit.js

@@ -140,6 +140,7 @@ export default function SiteTitleEdit( {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Make title link to home' ) }
 							onChange={ () =>
 								setAttributes( { isLink: ! isLink } )
@@ -157,6 +158,7 @@ export default function SiteTitleEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {

package/src/social-link/edit.js

@@ -192,6 +192,7 @@ const SocialLinkEdit = ( {
 						renderContent={ () => (
 							<TextControl
 								__next40pxDefaultSize
+								__nextHasNoMarginBottom
 								className="wp-block-social-link__toolbar_content_text"
 								label={ __( 'Text' ) }
 								help={ __(
@@ -225,6 +226,7 @@ const SocialLinkEdit = ( {
 					>
 						<TextControl
 							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 							label={ __( 'Text' ) }
 							help={ __(
 								'The text is visible when enabled from the parent Social Icons block.'
@@ -241,6 +243,7 @@ const SocialLinkEdit = ( {
 			<InspectorControls group="advanced">
 				<TextControl
 					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Link relation' ) }
 					help={ createInterpolateElement(
 						__(

package/src/social-links/block.json

@@ -95,8 +95,7 @@
 				"style": true
 			}
 		},
-		"contentRole": true,
-		"listView": true
+		"contentRole": true
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },

package/src/social-links/edit.js

@@ -182,6 +182,7 @@ export function SocialLinksEdit( props ) {
 					>
 						<SelectControl
 							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 							label={ __( 'Icon size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {
@@ -201,6 +202,7 @@ export function SocialLinksEdit( props ) {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show text' ) }
 							checked={ showLabels }
 							onChange={ () =>
@@ -217,6 +219,7 @@ export function SocialLinksEdit( props ) {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open links in new tab' ) }
 							checked={ openInNewTab }
 							onChange={ () =>

package/src/spacer/transforms.js

@@ -10,7 +10,7 @@ const transforms = {
 			blocks: [ 'core/separator' ], // Transform to Separator.
 			transform: ( { anchor } ) => {
 				return createBlock( 'core/separator', {
-					anchor: anchor || undefined,
+					anchor: anchor || '',
 				} );
 			},
 		},

package/src/style.scss

@@ -37,7 +37,6 @@
 @use "./media-text/style.scss" as *;
 @use "./navigation/style.scss" as *;
 @use "./navigation-link/style.scss" as *;
-@use "./navigation-overlay-close/style.scss" as *;
 @use "./page-list/style.scss" as *;
 @use "./paragraph/style.scss" as *;
 @use "./post-author/style.scss" as *;

package/src/tab/controls.js

@@ -45,6 +45,7 @@ export default function Controls( {
 							} );
 						} }
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 					/>
 					<ToggleControl
 						label={ __( 'Default Tab' ) }
@@ -57,6 +58,7 @@ export default function Controls( {
 						help={ __(
 							'If toggled, this tab will be selected when the page loads.'
 						) }
+						__nextHasNoMarginBottom
 					/>
 				</PanelBody>
 			</InspectorControls>