@wordpress/block-library 9.4.0 → 9.5.0

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-title/block.json

@@ -17,6 +17,9 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"showPrefix": {
 			"type": "boolean",
 			"default": true

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/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/site-logo/edit.js

@@ -348,14 +348,29 @@ const SiteLogo = ( {
 
 // This is a light wrapper around MediaReplaceFlow because the block has two
 // different MediaReplaceFlows, one for the inspector and one for the toolbar.
-function SiteLogoReplaceFlow( { onRemoveLogo, ...mediaReplaceProps } ) {
+function SiteLogoReplaceFlow( {
+	mediaURL,
+	onRemoveLogo,
+	...mediaReplaceProps
+} ) {
 	return (
 		<MediaReplaceFlow
 			{ ...mediaReplaceProps }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			accept={ ACCEPT_MEDIA_STRING }
 		>
-			<MenuItem onClick={ onRemoveLogo }>{ __( 'Reset' ) }</MenuItem>
+			{ ( { onClose } ) =>
+				mediaURL && (
+					<MenuItem
+						onClick={ () => {
+							onRemoveLogo();
+							onClose();
+						} }
+					>
+						{ __( 'Reset' ) }
+					</MenuItem>
+				)
+			}
 		</MediaReplaceFlow>
 	);
 }
@@ -392,7 +407,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-
 	const {
 		siteLogoId,
 		canUserEdit,
@@ -515,16 +529,18 @@ export default function LogoEdit( {
 				onInitialSelectLogo( image );
 			},
 			onError: onUploadError,
+			onRemoveLogo,
 		} );
 	};
 
 	const mediaReplaceFlowProps = {
 		mediaURL: logoUrl,
+		name: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ),
 		onSelect: onSelectLogo,
 		onError: onUploadError,
 		onRemoveLogo,
 	};
-	const controls = canUserEdit && logoUrl && ! temporaryURL && (
+	const controls = canUserEdit && (
 		<BlockControls group="other">
 			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
@@ -590,8 +606,6 @@ export default function LogoEdit( {
 
 	const blockProps = useBlockProps( { className: classes } );
 
-	const label = __( 'Add a site logo' );
-
 	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
 		<InspectorControls>
 			<PanelBody title={ __( 'Media' ) }>
@@ -631,7 +645,7 @@ export default function LogoEdit( {
 											{ isLoading ? (
 												<Spinner />
 											) : (
-												__( 'Add media' )
+												__( 'Choose logo' )
 											) }
 										</Button>
 										<DropZone onFilesDrop={ onFilesDrop } />
@@ -671,9 +685,9 @@ export default function LogoEdit( {
 							<Button
 								icon={ upload }
 								variant="primary"
-								label={ label }
+								label={ __( 'Choose logo' ) }
 								showTooltip
-								tooltipPosition="top center"
+								tooltipPosition="middle right"
 								onClick={ () => {
 									open();
 								} }

package/src/site-tagline/block.json

@@ -14,6 +14,10 @@
 		"level": {
 			"type": "number",
 			"default": 0
+		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
 		}
 	},
 	"example": {
@@ -56,7 +60,14 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
-	"editorStyle": "wp-block-site-tagline-editor"
+	"editorStyle": "wp-block-site-tagline-editor",
+	"style": "wp-block-site-tagline"
 }

package/src/site-tagline/edit.js

@@ -18,14 +18,12 @@ import {
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
-const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
-
 export default function SiteTaglineEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { textAlign, level } = attributes;
+	const { textAlign, level, levelOptions } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -82,8 +80,8 @@ export default function SiteTaglineEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					options={ HEADING_LEVELS }
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/site-tagline/style.scss

@@ -0,0 +1,4 @@
+.wp-block-site-tagline {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/site-title/block.json

@@ -11,6 +11,10 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -62,6 +66,12 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",

package/src/site-title/edit.js

@@ -21,14 +21,12 @@ import { ToggleControl, PanelBody } from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
-const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
-
 export default function SiteTitleEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { level, textAlign, isLink, linkTarget } = attributes;
+	const { level, levelOptions, textAlign, isLink, linkTarget } = attributes;
 	const { canUserEdit, title } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -97,8 +95,8 @@ export default function SiteTitleEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					options={ HEADING_LEVELS }
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/site-title/style.scss

@@ -1,3 +1,8 @@
-:root :where(.wp-block-site-title a) {
-	color: inherit;
+.wp-block-site-title {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	:where(a) {
+		color: inherit;
+	}
 }

package/src/social-link/edit.js

@@ -58,7 +58,6 @@ const SocialLinkURLPopover = ( {
 			>
 				<div className="block-editor-url-input">
 					<URLInput
-						__nextHasNoMarginBottom
 						value={ url }
 						onChange={ ( nextURL ) =>
 							setAttributes( { url: nextURL } )

package/src/spacer/controls.js

@@ -10,7 +10,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
-	BaseControl,
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -57,19 +56,17 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	return (
 		<>
 			{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
-				<BaseControl label={ label } id={ inputId }>
-					<UnitControl
-						id={ inputId }
-						isResetValueOnUnitChange
-						min={ MIN_SPACER_SIZE }
-						onChange={ handleOnChange }
-						style={ { maxWidth: 80 } }
-						value={ computedValue }
-						units={ units }
-					/>
-				</BaseControl>
+				<UnitControl
+					id={ inputId }
+					isResetValueOnUnitChange
+					min={ MIN_SPACER_SIZE }
+					onChange={ handleOnChange }
+					value={ computedValue }
+					units={ units }
+					label={ label }
+					__next40pxDefaultSize
+				/>
 			) }
-
 			{ spacingSizes?.length > 0 && (
 				<View className="tools-panel-item-spacing">
 					<SpacingSizesControl

package/src/style.scss

@@ -22,6 +22,7 @@
 @import "./latest-comments/style.scss";
 @import "./latest-posts/style.scss";
 @import "./list/style.scss";
+@import "./loginout/style.scss";
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./navigation-link/style.scss";
@@ -29,6 +30,7 @@
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./post-comments-form/style.scss";
+@import "./post-content/style.scss";
 @import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
@@ -47,11 +49,13 @@
 @import "./search/style.scss";
 @import "./separator/style.scss";
 @import "./site-logo/style.scss";
+@import "./site-tagline/style.scss";
 @import "./site-title/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
+@import "./table-of-contents/style.scss";
 @import "./term-description/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";

package/src/table-of-contents/block.json

@@ -48,7 +48,20 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
-	"example": {}
+	"example": {},
+	"style": "wp-block-table-of-contents"
 }

package/src/table-of-contents/style.scss

@@ -0,0 +1,4 @@
+:root :where(.wp-block-table-of-contents) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/tag-cloud/block.json

@@ -4,7 +4,7 @@
 	"name": "core/tag-cloud",
 	"title": "Tag Cloud",
 	"category": "widgets",
-	"description": "A cloud of your most used tags.",
+	"description": "A cloud of popular keywords, each sized by how often it appears.",
 	"textdomain": "default",
 	"attributes": {
 		"numberOfTags": {

package/src/tag-cloud/edit.js

@@ -12,6 +12,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	Disabled,
+	BaseControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -111,6 +112,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 			<PanelBody title={ __( 'Settings' ) }>
 				<SelectControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Taxonomy' ) }
 					options={ getTaxonomyOptions() }
 					value={ taxonomy }
@@ -118,14 +120,42 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 						setAttributes( { taxonomy: selectedTaxonomy } )
 					}
 				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Show post counts' ) }
-					checked={ showTagCounts }
-					onChange={ () =>
-						setAttributes( { showTagCounts: ! showTagCounts } )
-					}
-				/>
+				<BaseControl>
+					<Flex gap={ 4 }>
+						<FlexItem isBlock>
+							<UnitControl
+								label={ __( 'Smallest size' ) }
+								value={ smallestFontSize }
+								onChange={ ( value ) => {
+									onFontSizeChange(
+										'smallestFontSize',
+										value
+									);
+								} }
+								units={ units }
+								min={ MIN_FONT_SIZE }
+								max={ MAX_FONT_SIZE }
+								size="__unstable-large"
+							/>
+						</FlexItem>
+						<FlexItem isBlock>
+							<UnitControl
+								label={ __( 'Largest size' ) }
+								value={ largestFontSize }
+								onChange={ ( value ) => {
+									onFontSizeChange(
+										'largestFontSize',
+										value
+									);
+								} }
+								units={ units }
+								min={ MIN_FONT_SIZE }
+								max={ MAX_FONT_SIZE }
+								size="__unstable-large"
+							/>
+						</FlexItem>
+					</Flex>
+				</BaseControl>
 				<RangeControl
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
@@ -138,32 +168,14 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					max={ MAX_TAGS }
 					required
 				/>
-				<Flex>
-					<FlexItem isBlock>
-						<UnitControl
-							label={ __( 'Smallest size' ) }
-							value={ smallestFontSize }
-							onChange={ ( value ) => {
-								onFontSizeChange( 'smallestFontSize', value );
-							} }
-							units={ units }
-							min={ MIN_FONT_SIZE }
-							max={ MAX_FONT_SIZE }
-						/>
-					</FlexItem>
-					<FlexItem isBlock>
-						<UnitControl
-							label={ __( 'Largest size' ) }
-							value={ largestFontSize }
-							onChange={ ( value ) => {
-								onFontSizeChange( 'largestFontSize', value );
-							} }
-							units={ units }
-							min={ MIN_FONT_SIZE }
-							max={ MAX_FONT_SIZE }
-						/>
-					</FlexItem>
-				</Flex>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Show tag counts' ) }
+					checked={ showTagCounts }
+					onChange={ () =>
+						setAttributes( { showTagCounts: ! showTagCounts } )
+					}
+				/>
 			</PanelBody>
 		</InspectorControls>
 	);

package/src/tag-cloud/editor.scss

@@ -0,0 +1,9 @@
+// The following styles are to prevent duplicate spacing for the tag cloud
+// block in the editor given it uses server side rendering. The specificity
+// must be higher than `0-1-0` to override global styles. Targeting the
+// inner use of the .wp-block-tag-cloud class should minimize impact on
+// other 3rd party styles targeting the block.
+.wp-block-tag-cloud .wp-block-tag-cloud {
+	margin: 0;
+	padding: 0;
+}

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

@@ -128,7 +128,7 @@ export default function TemplatePartEdit( {
 		area,
 		onNavigateToEntityRecord,
 		title,
-		canEditTemplate,
+		canUserEdit,
 	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
@@ -151,10 +151,13 @@ export default function TemplatePartEdit( {
 				  )
 				: false;
 
-			const _canEditTemplate = select( coreStore ).canUser( 'create', {
-				kind: 'postType',
-				name: 'wp_template_part',
-			} );
+			const _canUserEdit = hasResolvedEntity
+				? select( coreStore ).canUser( 'update', {
+						kind: 'postType',
+						name: 'wp_template_part',
+						id: templatePartId,
+				  } )
+				: false;
 
 			return {
 				hasInnerBlocks: getBlockCount( clientId ) > 0,
@@ -167,7 +170,7 @@ export default function TemplatePartEdit( {
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
 				title: entityRecord?.title,
-				canEditTemplate: !! _canEditTemplate,
+				canUserEdit: !! _canUserEdit,
 			};
 		},
 		[ templatePartId, attributes.area, clientId ]
@@ -237,7 +240,7 @@ export default function TemplatePartEdit( {
 			<RecursionProvider uniqueId={ templatePartId }>
 				{ isEntityAvailable &&
 					onNavigateToEntityRecord &&
-					canEditTemplate && (
+					canUserEdit && (
 						<BlockControls group="other">
 							<ToolbarButton
 								onClick={ () =>

package/src/template-part/edit/inner-blocks.js

@@ -129,15 +129,17 @@ export default function TemplatePartInnerBlocks( {
 			return {
 				canViewTemplatePart: !! select( coreStore ).canUser( 'read', {
 					kind: 'postType',
-					name: 'wp_template',
+					name: 'wp_template_part',
+					id,
 				} ),
-				canEditTemplatePart: !! select( coreStore ).canUser( 'create', {
+				canEditTemplatePart: !! select( coreStore ).canUser( 'update', {
 					kind: 'postType',
-					name: 'wp_template',
+					name: 'wp_template_part',
+					id,
 				} ),
 			};
 		},
-		[]
+		[ id ]
 	);
 
 	if ( ! canViewTemplatePart ) {

package/src/video/editor.scss

@@ -57,10 +57,6 @@
 }
 
 .editor-video-poster-control {
-	.components-base-control__label {
-		display: block;
-	}
-
 	.components-button {
 		margin-right: $grid-unit-10;
 	}