@wordpress/block-library 9.4.0 → 9.6.0

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

@@ -6,7 +6,6 @@ import {
 	TextControl,
 	SelectControl,
 	RangeControl,
-	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Notice,
@@ -28,6 +27,9 @@ import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import EnhancedPaginationControl from './enhanced-pagination-control';
 import CreateNewPostLink from './create-new-post-link';
+import PerPageControl from './per-page-control';
+import OffsetControl from './offset-controls';
+import PagesControl from './pages-control';
 import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
@@ -48,7 +50,10 @@ export default function QueryInspectorControls( props ) {
 		order,
 		orderBy,
 		author: authorIds,
+		pages,
 		postType,
+		perPage,
+		offset,
 		sticky,
 		inherit,
 		taxQuery,
@@ -103,9 +108,9 @@ export default function QueryInspectorControls( props ) {
 	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
-	const postTypeControlLabel = __( 'Content type' );
+	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
-		'WordPress contains different types of content you can filter by. Posts and pages are the default types, but plugins could add more.'
+		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
@@ -136,6 +141,16 @@ export default function QueryInspectorControls( props ) {
 		showParentControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const showPostCountControl = isControlAllowed(
+		allowedControls,
+		'postCount'
+	);
+	const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
+	const showPagesControl = isControlAllowed( allowedControls, 'pages' );
+
+	const showDisplayPanel =
+		showPostCountControl || showOffSetControl || showPagesControl;
+
 	return (
 		<>
 			{ !! postType && (
@@ -146,17 +161,34 @@ export default function QueryInspectorControls( props ) {
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (
-						<ToggleControl
+						<ToggleGroupControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Inherit query from template' ) }
-							help={ __(
-								'Enable to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-							) }
-							checked={ !! inherit }
-							onChange={ ( value ) =>
-								setQuery( { inherit: !! value } )
+							label={ __( 'Query type' ) }
+							isBlock
+							onChange={ ( value ) => {
+								setQuery( { inherit: !! value } );
+							} }
+							help={
+								inherit
+									? __(
+											'Display a list of posts or custom post types based on the current template.'
+									  )
+									: __(
+											'Display a list of posts or custom post types based on specific criteria.'
+									  )
 							}
-						/>
+							value={ !! inherit }
+						>
+							<ToggleGroupControlOption
+								value
+								label={ __( 'Default' ) }
+							/>
+							<ToggleGroupControlOption
+								value={ false }
+								label={ __( 'Custom' ) }
+							/>
+						</ToggleGroupControl>
 					) }
 					{ showPostTypeControl &&
 						( postTypesSelectOptions.length > 2 ? (
@@ -237,6 +269,47 @@ export default function QueryInspectorControls( props ) {
 					/>
 				</PanelBody>
 			) }
+			{ ! inherit && showDisplayPanel && (
+				<ToolsPanel
+					className="block-library-query-toolspanel__display"
+					label={ __( 'Display' ) }
+					resetAll={ () => {
+						setQuery( {
+							offset: 0,
+							pages: 0,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Items' ) }
+						hasValue={ () => perPage > 0 }
+					>
+						<PerPageControl
+							perPage={ perPage }
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Offset' ) }
+						hasValue={ () => offset > 0 }
+						onDeselect={ () => setQuery( { offset: 0 } ) }
+					>
+						<OffsetControl
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Max Pages to Show' ) }
+						hasValue={ () => pages > 0 }
+						onDeselect={ () => setQuery( { pages: 0 } ) }
+					>
+						<PagesControl pages={ pages } onChange={ setQuery } />
+					</ToolsPanelItem>
+				</ToolsPanel>
+			) }
 			{ ! inherit && showFiltersPanel && (
 				<ToolsPanel
 					className="block-library-query-toolspanel__filters" // unused but kept for backward compatibility

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_OFFSET = 0;
+const MAX_OFFSET = 100;
+
+export const OffsetControl = ( { offset = 0, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Offset' ) }
+			value={ offset }
+			min={ MIN_OFFSET }
+			onChange={ ( newOffset ) => {
+				if (
+					isNaN( newOffset ) ||
+					newOffset < MIN_OFFSET ||
+					newOffset > MAX_OFFSET
+				) {
+					return;
+				}
+				onChange( { offset: newOffset } );
+			} }
+		/>
+	);
+};
+
+export default OffsetControl;

package/src/query/edit/inspector-controls/pages-control.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const PagesControl = ( { pages, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Max pages' ) }
+			value={ pages }
+			min={ 0 }
+			onChange={ ( newPages ) => {
+				if ( isNaN( newPages ) || newPages < 0 ) {
+					return;
+				}
+				onChange( { pages: newPages } );
+			} }
+			help={ __(
+				'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
+			) }
+		/>
+	);
+};
+
+export default PagesControl;

package/src/query/edit/inspector-controls/parent-control.js

@@ -132,6 +132,7 @@ function ParentControl( { parents, postType, onChange } ) {
 	};
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			label={ __( 'Parents' ) }
 			value={ value }
 			onInputChange={ debouncedSearch }

package/src/query/edit/inspector-controls/per-page-control.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_POSTS_PER_PAGE = 1;
+const MAX_POSTS_PER_PAGE = 100;
+
+const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
+	return (
+		<RangeControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Posts per page' ) }
+			min={ MIN_POSTS_PER_PAGE }
+			max={ MAX_POSTS_PER_PAGE }
+			onChange={ ( newPerPage ) => {
+				if (
+					isNaN( newPerPage ) ||
+					newPerPage < MIN_POSTS_PER_PAGE ||
+					newPerPage > MAX_POSTS_PER_PAGE
+				) {
+					return;
+				}
+				onChange( { perPage: newPerPage, offset } );
+			} }
+			value={ parseInt( perPage, 10 ) }
+		/>
+	);
+};
+
+export default PerPageControl;

package/src/query/edit/inspector-controls/sticky-control.js

@@ -20,7 +20,7 @@ export default function StickyControl( { value, onChange } ) {
 			value={ value }
 			onChange={ onChange }
 			help={ __(
-				'Blog posts can be “stickied”, a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+				'Sticky posts always appear first, regardless of their publish date.'
 			) }
 		/>
 	);

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

@@ -109,7 +109,7 @@ export default function QueryContent( {
 		} );
 	const htmlElementMessages = {
 		main: __(
-			'The <main> element should be used for the primary content of your document only. '
+			'The <main> element should be used for the primary content of your document only.'
 		),
 		section: __(
 			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."

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

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarGroup,
-	Dropdown,
-	ToolbarButton,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,8 +10,6 @@ import { settings } from '@wordpress/icons';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
-	attributes: { query },
-	setQuery,
 	openPatternSelectionModal,
 	name,
 	clientId,
@@ -26,87 +18,6 @@ export default function QueryToolbar( {
 
 	return (
 		<>
-			{ ! query.inherit && (
-				<ToolbarGroup>
-					<Dropdown
-						contentClassName="block-library-query-toolbar__popover"
-						renderToggle={ ( { onToggle } ) => (
-							<ToolbarButton
-								icon={ settings }
-								label={ __( 'Display settings' ) }
-								onClick={ onToggle }
-							/>
-						) }
-						renderContent={ () => (
-							<>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Items per Page' ) }
-									labelPosition="edge"
-									min={ 1 }
-									max={ 100 }
-									onChange={ ( value ) => {
-										if (
-											isNaN( value ) ||
-											value < 1 ||
-											value > 100
-										) {
-											return;
-										}
-										setQuery( {
-											perPage: value,
-										} );
-									} }
-									step="1"
-									value={ query.perPage }
-									isDragEnabled={ false }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Offset' ) }
-									labelPosition="edge"
-									min={ 0 }
-									max={ 100 }
-									onChange={ ( value ) => {
-										if (
-											isNaN( value ) ||
-											value < 0 ||
-											value > 100
-										) {
-											return;
-										}
-										setQuery( { offset: value } );
-									} }
-									step="1"
-									value={ query.offset }
-									isDragEnabled={ false }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Max pages to show' ) }
-									labelPosition="edge"
-									min={ 0 }
-									onChange={ ( value ) => {
-										if ( isNaN( value ) || value < 0 ) {
-											return;
-										}
-										setQuery( { pages: value } );
-									} }
-									step="1"
-									value={ query.pages }
-									isDragEnabled={ false }
-									help={ __(
-										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
-									) }
-								/>
-							</>
-						) }
-					/>
-				</ToolbarGroup>
-			) }
 			{ hasPatterns && (
 				<ToolbarGroup className="wp-block-template-part__block-control-group">
 					<ToolbarButton onClick={ openPatternSelectionModal }>

package/src/query/utils.js

@@ -136,11 +136,15 @@ export const usePostTypes = () => {
 export const useTaxonomies = ( postType ) => {
 	const taxonomies = useSelect(
 		( select ) => {
-			const { getTaxonomies } = select( coreStore );
-			return getTaxonomies( {
-				type: postType,
-				per_page: -1,
-			} );
+			const { getTaxonomies, getPostType } = select( coreStore );
+			// Does the post type have taxonomies?
+			if ( getPostType( postType )?.taxonomies?.length > 0 ) {
+				return getTaxonomies( {
+					type: postType,
+					per_page: -1,
+				} );
+			}
+			return [];
 		},
 		[ postType ]
 	);

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

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

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

@@ -51,6 +51,7 @@ export default function QueryPaginationNumbersEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Number of links' ) }
 						help={ __(

package/src/query-title/block.json

@@ -17,6 +17,9 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"showPrefix": {
 			"type": "boolean",
 			"default": true
@@ -55,6 +58,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-query-title"

package/src/query-title/edit.js

@@ -25,7 +25,14 @@ import { useArchiveLabel } from './use-archive-label';
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
+	attributes: {
+		type,
+		level,
+		levelOptions,
+		textAlign,
+		showPrefix,
+		showSearchTerm,
+	},
 	setAttributes,
 } ) {
 	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
@@ -130,6 +137,7 @@ export default function QueryTitleEdit( {
 			<BlockControls group="block">
 				<HeadingLevelDropdown
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/quote/block.json

@@ -28,6 +28,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"align": [ "left", "right", "wide", "full" ],
 		"html": false,
 		"background": {
 			"backgroundImage": true,

package/src/quote/test/transforms.native.js

@@ -14,7 +14,7 @@ import {
 
 const block = 'Quote';
 const initialHtml = `
-<!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
 <blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>

package/src/quote/theme.scss

@@ -10,19 +10,21 @@
 		font-style: normal;
 	}
 
-	&.has-text-align-right {
+	&:where(.has-text-align-right) {
 		border-left: none;
 		border-right: 0.25em solid currentColor;
 		padding-left: 0;
 		padding-right: 1em;
 	}
 
-	&.has-text-align-center {
+	&:where(.has-text-align-center) {
 		border: none;
 		padding-left: 0;
 	}
 	// .is-style-large and .is-large are kept for backwards compatibility.
-	&.is-style-plain,
+	// They are not wrapped in `:where()` to keep specificity as it was before
+	// they were deprecated.
+	&:where(.is-style-plain),
 	&.is-style-large,
 	&.is-large {
 		border: none;

package/src/quote/transforms.js

@@ -9,10 +9,18 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor, fontSize, style } ) => {
+			transform: ( {
+				value,
+				align,
+				citation,
+				anchor,
+				fontSize,
+				style,
+			} ) => {
 				return createBlock(
 					'core/quote',
 					{
+						align,
 						citation,
 						anchor,
 						fontSize,
@@ -95,7 +103,7 @@ const transforms = {
 				);
 			},
 			transform: (
-				{ citation, anchor, fontSize, style },
+				{ align, citation, anchor, fontSize, style },
 				innerBlocks
 			) => {
 				const value = innerBlocks
@@ -103,6 +111,7 @@ const transforms = {
 					.join( '<br>' );
 				return createBlock( 'core/pullquote', {
 					value,
+					align,
 					citation,
 					anchor,
 					fontSize,

package/src/search/edit.js

@@ -28,7 +28,7 @@ import {
 	ToolbarButton,
 	ResizableBox,
 	PanelBody,
-	BaseControl,
+	__experimentalVStack as VStack,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
@@ -408,12 +408,14 @@ export default function SearchEdit( {
 
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					<BaseControl
-						label={ __( 'Width' ) }
-						id={ unitControlInputId }
+					<VStack
+						className="wp-block-search__inspector-controls"
+						spacing={ 4 }
 					>
 						<UnitControl
-							id={ unitControlInputId }
+							__next40pxDefaultSize
+							label={ __( 'Width' ) }
+							id={ unitControlInputId } // unused, kept for backwards compatibility
 							min={
 								isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
 							}
@@ -427,7 +429,6 @@ export default function SearchEdit( {
 									parseInt( newWidth, 10 ) > 100
 										? 100
 										: newWidth;
-
 								setAttributes( {
 									width: parseInt( filteredWidth, 10 ),
 								} );
@@ -445,9 +446,8 @@ export default function SearchEdit( {
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>
-
 						<ButtonGroup
-							className="wp-block-search__components-button-group"
+							className="wp-block-search__components-button-group" // unused, kept for backwards compatibility
 							aria-label={ __( 'Percentage Width' ) }
 						>
 							{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
@@ -473,7 +473,7 @@ export default function SearchEdit( {
 								);
 							} ) }
 						</ButtonGroup>
-					</BaseControl>
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 		</>

package/src/search/editor.scss

@@ -15,8 +15,11 @@
 		justify-content: center;
 		text-align: center;
 	}
+}
 
-	&__components-button-group {
-		margin-top: 10px;
+.wp-block-search__inspector-controls {
+	.components-base-control {
+		// Counteract the margin added by the block inspector.
+		margin-bottom: 0;
 	}
 }