@wordpress/block-library 9.23.0 → 9.25.0

package/src/post-template/edit.js

@@ -181,14 +181,15 @@ export default function PostTemplateEdit( {
 			 * Handle cases where sticky is set to `exclude` or `only`.
 			 * Which works as a `post__in/post__not_in` query for sticky posts.
 			 */
-			if ( sticky && sticky !== 'ignore' ) {
+			if ( [ 'exclude', 'only' ].includes( sticky ) ) {
 				query.sticky = sticky === 'only';
 			}
 
-			if ( sticky === 'ignore' ) {
+			// Empty string represents the default behavior of including sticky posts.
+			if ( [ '', 'ignore' ].includes( sticky ) ) {
 				// Remove any leftover sticky query parameter.
 				delete query.sticky;
-				query.ignore_sticky = true;
+				query.ignore_sticky = sticky === 'ignore';
 			}
 
 			// If `inherit` is truthy, adjust conditionally the query to create a better preview.

package/src/post-terms/block.json

@@ -19,11 +19,13 @@
 		},
 		"prefix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"suffix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/post-terms/edit.js

@@ -13,6 +13,7 @@ import {
 	useBlockProps,
 	useBlockDisplayInformation,
 	RichText,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
@@ -46,6 +47,8 @@ export default function PostTermsEdit( {
 } ) {
 	const { term, textAlign, separator, prefix, suffix } = attributes;
 	const { postId, postType } = context;
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 
 	const selectedTerm = useSelect(
 		( select ) => {
@@ -73,14 +76,16 @@ export default function PostTermsEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls group="advanced">
 				<TextControl
 					__next40pxDefaultSize

package/src/post-title/edit.js

@@ -15,12 +15,22 @@ import {
 	HeadingLevelDropdown,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function PostTitleEdit( {
 	attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
 	setAttributes,
@@ -66,6 +76,7 @@ export default function PostTitleEdit( {
 		} ),
 	} );
 	const blockEditingMode = useBlockEditingMode();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	let titleElement = <TagName { ...blockProps }>{ __( 'Title' ) }</TagName>;
 
@@ -138,41 +149,82 @@ export default function PostTitleEdit( {
 						/>
 					</BlockControls>
 					<InspectorControls>
-						<PanelBody title={ __( 'Settings' ) }>
-							<ToggleControl
-								__nextHasNoMarginBottom
+						<ToolsPanel
+							label={ __( 'Settings' ) }
+							resetAll={ () => {
+								setAttributes( {
+									rel: '',
+									linkTarget: '_self',
+									isLink: false,
+								} );
+							} }
+							dropdownMenuProps={ dropdownMenuProps }
+						>
+							<ToolsPanelItem
 								label={ __( 'Make title a link' ) }
-								onChange={ () =>
-									setAttributes( { isLink: ! isLink } )
+								isShownByDefault
+								hasValue={ () => isLink }
+								onDeselect={ () =>
+									setAttributes( { isLink: false } )
 								}
-								checked={ isLink }
-							/>
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Make title a link' ) }
+									onChange={ () =>
+										setAttributes( { isLink: ! isLink } )
+									}
+									checked={ isLink }
+								/>
+							</ToolsPanelItem>
 							{ isLink && (
 								<>
-									<ToggleControl
-										__nextHasNoMarginBottom
+									<ToolsPanelItem
 										label={ __( 'Open in new tab' ) }
-										onChange={ ( value ) =>
+										isShownByDefault
+										hasValue={ () =>
+											linkTarget === '_blank'
+										}
+										onDeselect={ () =>
 											setAttributes( {
-												linkTarget: value
-													? '_blank'
-													: '_self',
+												linkTarget: '_self',
 											} )
 										}
-										checked={ linkTarget === '_blank' }
-									/>
-									<TextControl
-										__next40pxDefaultSize
-										__nextHasNoMarginBottom
+									>
+										<ToggleControl
+											__nextHasNoMarginBottom
+											label={ __( 'Open in new tab' ) }
+											onChange={ ( value ) =>
+												setAttributes( {
+													linkTarget: value
+														? '_blank'
+														: '_self',
+												} )
+											}
+											checked={ linkTarget === '_blank' }
+										/>
+									</ToolsPanelItem>
+									<ToolsPanelItem
 										label={ __( 'Link rel' ) }
-										value={ rel }
-										onChange={ ( newRel ) =>
-											setAttributes( { rel: newRel } )
+										isShownByDefault
+										hasValue={ () => !! rel }
+										onDeselect={ () =>
+											setAttributes( { rel: '' } )
 										}
-									/>
+									>
+										<TextControl
+											__next40pxDefaultSize
+											__nextHasNoMarginBottom
+											label={ __( 'Link rel' ) }
+											value={ rel }
+											onChange={ ( newRel ) =>
+												setAttributes( { rel: newRel } )
+											}
+										/>
+									</ToolsPanelItem>
 								</>
 							) }
-						</PanelBody>
+						</ToolsPanel>
 					</InspectorControls>
 				</>
 			) }

package/src/preformatted/test/__snapshots__/transforms.native.js.snap

@@ -29,3 +29,9 @@ exports[`Preformatted block transforms to Paragraph block 1`] = `
 <p>Some <em>preformatted</em> text...<br />And more!</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Preformatted block transforms to Verse block 1`] = `
+"<!-- wp:verse -->
+<pre class="wp-block-verse">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:verse -->"
+`;

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

@@ -16,7 +16,12 @@ const initialHtml = `
 <!-- /wp:preformatted -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Paragraph', 'Code', ...transformsWithInnerBlocks ];
+const blockTransforms = [
+	'Paragraph',
+	'Code',
+	'Verse',
+	...transformsWithInnerBlocks,
+];
 
 setupCoreBlocks();
 

package/src/preformatted/transforms.js

@@ -7,7 +7,7 @@ const transforms = {
 	from: [
 		{
 			type: 'block',
-			blocks: [ 'core/code', 'core/paragraph' ],
+			blocks: [ 'core/code', 'core/paragraph', 'core/verse' ],
 			transform: ( { content, anchor } ) =>
 				createBlock( 'core/preformatted', {
 					content,
@@ -41,6 +41,12 @@ const transforms = {
 			blocks: [ 'core/code' ],
 			transform: ( attributes ) => createBlock( 'core/code', attributes ),
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/verse' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/verse', attributes ),
+		},
 	],
 };
 

package/src/pullquote/editor.scss

@@ -12,6 +12,6 @@
 	}
 }
 
-.wp-block-pullquote .wp-block-pullquote__citation {
+.wp-block-pullquote__citation {
 	color: inherit;
 }

package/src/pullquote/style.scss

@@ -6,8 +6,7 @@
 	padding: 4em 0;
 
 	p,
-	blockquote,
-	cite {
+	blockquote {
 		color: inherit;
 	}
 
@@ -74,7 +73,7 @@
 	}
 }
 
-.wp-block-pullquote cite {
+.wp-block-pullquote :where(cite) {
 	color: inherit;
 	display: block;
 }

package/src/pullquote/theme.scss

@@ -4,8 +4,8 @@
 	margin-bottom: 1.75em;
 	color: currentColor;
 
-	cite,
-	footer,
+	:where(cite),
+	:where(footer),
 	&__citation {
 		color: currentColor;
 		text-transform: uppercase;

package/src/query/edit/enhanced-pagination-modal.js

@@ -27,11 +27,7 @@ export default function EnhancedPaginationModal( {
 		useUnsupportedBlocks( clientId );
 
 	useEffect( () => {
-		if (
-			enhancedPagination &&
-			hasUnsupportedBlocks &&
-			! window.__experimentalFullPageClientSideNavigation
-		) {
+		if ( enhancedPagination && hasUnsupportedBlocks ) {
 			setAttributes( { enhancedPagination: false } );
 			setOpen( true );
 		}

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -15,17 +15,11 @@ export default function EnhancedPaginationControl( {
 	clientId,
 } ) {
 	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
-	const fullPageClientSideNavigation =
-		window.__experimentalFullPageClientSideNavigation;
 
 	let help = __(
 		'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
 	);
-	if ( fullPageClientSideNavigation ) {
-		help = __(
-			'Experimental full-page client-side navigation setting enabled.'
-		);
-	} else if ( hasUnsupportedBlocks ) {
+	if ( hasUnsupportedBlocks ) {
 		help = __(
 			'Enhancement disabled because there are non-compatible blocks inside the Query block.'
 		);
@@ -37,12 +31,8 @@ export default function EnhancedPaginationControl( {
 				__nextHasNoMarginBottom
 				label={ __( 'Reload full page' ) }
 				help={ help }
-				checked={
-					! enhancedPagination && ! fullPageClientSideNavigation
-				}
-				disabled={
-					hasUnsupportedBlocks || fullPageClientSideNavigation
-				}
+				checked={ ! enhancedPagination }
+				disabled={ hasUnsupportedBlocks }
 				onChange={ ( value ) => {
 					setAttributes( {
 						enhancedPagination: ! value,

package/src/read-more/block.json

@@ -8,7 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",

package/src/rss/block.json

@@ -18,7 +18,8 @@
 		},
 		"feedURL": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"itemsToShow": {
 			"type": "number",

package/src/rss/edit.js

@@ -9,13 +9,14 @@ import {
 import {
 	Button,
 	Disabled,
-	PanelBody,
 	Placeholder,
 	RangeControl,
 	ToggleControl,
 	ToolbarGroup,
 	TextControl,
 	__experimentalInputControl as InputControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
@@ -23,6 +24,11 @@ import { __, _x } from '@wordpress/i18n';
 import { prependHTTP } from '@wordpress/url';
 import ServerSideRender from '@wordpress/server-side-render';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 20;
 
@@ -42,6 +48,8 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		rel,
 	} = attributes;
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	function toggleAttribute( propName ) {
 		return () => {
 			const value = attributes[ propName ];
@@ -141,75 +149,153 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<ToolbarGroup controls={ toolbarControls } />
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							itemsToShow: 5,
+							displayAuthor: false,
+							displayDate: false,
+							displayExcerpt: false,
+							excerptLength: 55,
+							columns: 2,
+							openInNewTab: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Number of items' ) }
-						value={ itemsToShow }
-						onChange={ ( value ) =>
-							setAttributes( { itemsToShow: value } )
-						}
-						min={ DEFAULT_MIN_ITEMS }
-						max={ DEFAULT_MAX_ITEMS }
-						required
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Display author' ) }
-						checked={ displayAuthor }
-						onChange={ toggleAttribute( 'displayAuthor' ) }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Display date' ) }
-						checked={ displayDate }
-						onChange={ toggleAttribute( 'displayDate' ) }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Display excerpt' ) }
-						checked={ displayExcerpt }
-						onChange={ toggleAttribute( 'displayExcerpt' ) }
-					/>
-					{ displayExcerpt && (
+						hasValue={ () => itemsToShow !== 5 }
+						onDeselect={ () => setAttributes( { itemsToShow: 5 } ) }
+						isShownByDefault
+					>
 						<RangeControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize
-							label={ __( 'Max number of words in excerpt' ) }
-							value={ excerptLength }
+							label={ __( 'Number of items' ) }
+							value={ itemsToShow }
 							onChange={ ( value ) =>
-								setAttributes( { excerptLength: value } )
+								setAttributes( { itemsToShow: value } )
 							}
-							min={ 10 }
-							max={ 100 }
+							min={ DEFAULT_MIN_ITEMS }
+							max={ DEFAULT_MAX_ITEMS }
 							required
 						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						label={ __( 'Display author' ) }
+						hasValue={ () => !! displayAuthor }
+						onDeselect={ () =>
+							setAttributes( { displayAuthor: false } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display author' ) }
+							checked={ displayAuthor }
+							onChange={ toggleAttribute( 'displayAuthor' ) }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						label={ __( 'Display date' ) }
+						hasValue={ () => !! displayDate }
+						onDeselect={ () =>
+							setAttributes( { displayDate: false } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display date' ) }
+							checked={ displayDate }
+							onChange={ toggleAttribute( 'displayDate' ) }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						label={ __( 'Display excerpt' ) }
+						hasValue={ () => !! displayExcerpt }
+						onDeselect={ () =>
+							setAttributes( { displayExcerpt: false } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display excerpt' ) }
+							checked={ displayExcerpt }
+							onChange={ toggleAttribute( 'displayExcerpt' ) }
+						/>
+					</ToolsPanelItem>
+
+					{ displayExcerpt && (
+						<ToolsPanelItem
+							label={ __( 'Max number of words in excerpt' ) }
+							hasValue={ () => excerptLength !== 55 }
+							onDeselect={ () =>
+								setAttributes( { excerptLength: 55 } )
+							}
+							isShownByDefault
+						>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Max number of words in excerpt' ) }
+								value={ excerptLength }
+								onChange={ ( value ) =>
+									setAttributes( { excerptLength: value } )
+								}
+								min={ 10 }
+								max={ 100 }
+								required
+							/>
+						</ToolsPanelItem>
 					) }
+
 					{ blockLayout === 'grid' && (
-						<RangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
+						<ToolsPanelItem
 							label={ __( 'Columns' ) }
-							value={ columns }
-							onChange={ ( value ) =>
-								setAttributes( { columns: value } )
-							}
-							min={ 2 }
-							max={ 6 }
-							required
-						/>
+							hasValue={ () => columns !== 2 }
+							onDeselect={ () => setAttributes( { columns: 2 } ) }
+							isShownByDefault
+						>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Columns' ) }
+								value={ columns }
+								onChange={ ( value ) =>
+									setAttributes( { columns: value } )
+								}
+								min={ 2 }
+								max={ 6 }
+								required
+							/>
+						</ToolsPanelItem>
 					) }
 
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
 						label={ __( 'Open links in new tab' ) }
-						checked={ openInNewTab }
-						onChange={ ( value ) =>
-							setAttributes( { openInNewTab: value } )
+						hasValue={ () => !! openInNewTab }
+						onDeselect={ () =>
+							setAttributes( { openInNewTab: false } )
 						}
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open links in new tab' ) }
+							checked={ openInNewTab }
+							onChange={ ( value ) =>
+								setAttributes( { openInNewTab: value } )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl