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

package/src/accordion-heading/edit.js

@@ -9,9 +9,7 @@ import {
 	RichText,
 	getTypographyClassesAndStyles as useTypographyProps,
 	useSettings,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
 
 export default function Edit( { attributes, setAttributes, context } ) {
 	const { title } = attributes;
@@ -21,24 +19,16 @@ export default function Edit( { attributes, setAttributes, context } ) {
 		'core/accordion-heading-level': headingLevel,
 	} = context;
 	const TagName = 'h' + headingLevel;
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	// Set icon attributes.
 	useEffect( () => {
 		if ( iconPosition !== undefined && showIcon !== undefined ) {
-			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {
 				iconPosition,
 				showIcon,
 			} );
 		}
-	}, [
-		iconPosition,
-		showIcon,
-		setAttributes,
-		__unstableMarkNextChangeAsNotPersistent,
-	] );
+	}, [ iconPosition, showIcon, setAttributes ] );
 
 	const [ fluidTypographySettings, layout ] = useSettings(
 		'typography.fluid',

package/src/accordion-heading/save.js

@@ -19,7 +19,6 @@ export default function save( { attributes } ) {
 	return (
 		<TagName { ...blockProps }>
 			<button
-				type="button"
 				className="wp-block-accordion-heading__toggle"
 				style={ spacingProps.style }
 			>

package/src/accordion-item/block.json

@@ -55,9 +55,6 @@
 			"default": false
 		}
 	},
-	"providesContext": {
-		"core/accordion-open-by-default": "openByDefault"
-	},
 	"textdomain": "default",
 	"style": "wp-block-accordion-item"
 }

package/src/accordion-item/edit.js

@@ -25,9 +25,12 @@ import clsx from 'clsx';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-const TEMPLATE = [ [ 'core/accordion-heading' ], [ 'core/accordion-panel' ] ];
-
-export default function Edit( { attributes, clientId, setAttributes } ) {
+export default function Edit( {
+	attributes,
+	clientId,
+	setAttributes,
+	context,
+} ) {
 	const { openByDefault } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -72,8 +75,21 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		} ),
 	} );
 
+	// Get heading level from context.
+	const headingLevel = context && context[ 'core/accordion-heading-level' ];
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
+		template: [
+			[
+				'core/accordion-heading',
+				headingLevel ? { level: headingLevel } : {},
+			],
+			[
+				'core/accordion-panel',
+				{
+					openByDefault,
+				},
+			],
+		],
 		templateLock: 'all',
 		directInsert: true,
 		templateInsertUpdatesSelection: true,
@@ -86,6 +102,11 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 					label={ __( 'Settings' ) }
 					resetAll={ () => {
 						setAttributes( { openByDefault: false } );
+						if ( contentBlockClientId ) {
+							updateBlockAttributes( contentBlockClientId, {
+								openByDefault: false,
+							} );
+						}
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
@@ -95,14 +116,28 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 						hasValue={ () => !! openByDefault }
 						onDeselect={ () => {
 							setAttributes( { openByDefault: false } );
+							if ( contentBlockClientId ) {
+								updateBlockAttributes( contentBlockClientId, {
+									openByDefault: false,
+								} );
+							}
 						} }
 					>
 						<ToggleControl
 							label={ __( 'Open by default' ) }
+							__nextHasNoMarginBottom
 							onChange={ ( value ) => {
 								setAttributes( {
 									openByDefault: value,
 								} );
+								if ( contentBlockClientId ) {
+									updateBlockAttributes(
+										contentBlockClientId,
+										{
+											openByDefault: value,
+										}
+									);
+								}
 							} }
 							checked={ openByDefault }
 							help={ __(

package/src/accordion-panel/block.json

@@ -6,7 +6,6 @@
 	"category": "design",
 	"description": "Contains the hidden or revealed content beneath the heading.",
 	"parent": [ "core/accordion-item" ],
-	"usesContext": [ "core/accordion-open-by-default" ],
 	"supports": {
 		"html": false,
 		"color": {
@@ -62,6 +61,10 @@
 			"enum": [ "all", "insert", "contentOnly", false ],
 			"default": false
 		},
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
 		"isSelected": {
 			"type": "boolean",
 			"default": false

package/src/accordion-panel/edit.js

@@ -3,9 +3,10 @@
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function Edit( { attributes, context } ) {
-	const { allowedBlocks, templateLock, isSelected } = attributes;
-	const openByDefault = context[ 'core/accordion-open-by-default' ];
+export default function Edit( { attributes } ) {
+	const { allowedBlocks, templateLock, openByDefault, isSelected } =
+		attributes;
+
 	const blockProps = useBlockProps( {
 		'aria-hidden': ! isSelected && ! openByDefault,
 		role: 'region',

package/src/archives/edit.js

@@ -46,6 +46,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Display as dropdown' ) }
 							checked={ displayAsDropdown }
 							onChange={ () =>
@@ -66,6 +67,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 							}
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Show label' ) }
 								checked={ showLabel }
 								onChange={ () =>
@@ -86,6 +88,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show post counts' ) }
 							checked={ showPostCounts }
 							onChange={ () =>
@@ -106,6 +109,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					>
 						<SelectControl
 							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 							label={ __( 'Group by' ) }
 							options={ [
 								{ label: __( 'Year' ), value: 'yearly' },

package/src/audio/edit.js

@@ -190,6 +190,7 @@ function AudioEdit( {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Autoplay' ) }
 							onChange={ toggleAttribute( 'autoplay' ) }
 							checked={ !! autoplay }
@@ -207,6 +208,7 @@ function AudioEdit( {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Loop' ) }
 							onChange={ toggleAttribute( 'loop' ) }
 							checked={ !! loop }
@@ -224,6 +226,7 @@ function AudioEdit( {
 					>
 						<SelectControl
 							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 							label={ _x(
 								'Preload',
 								'noun; Audio block parameter'

package/src/avatar/edit.js

@@ -56,6 +56,7 @@ const AvatarInspectorControls = ( {
 					onDeselect={ () => setAttributes( { size: 96 } ) }
 				>
 					<RangeControl
+						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						label={ __( 'Image size' ) }
 						onChange={ ( newSize ) =>
@@ -76,6 +77,7 @@ const AvatarInspectorControls = ( {
 					onDeselect={ () => setAttributes( { isLink: false } ) }
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to user profile' ) }
 						onChange={ () =>
 							setAttributes( { isLink: ! attributes.isLink } )
@@ -93,6 +95,7 @@ const AvatarInspectorControls = ( {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

package/src/avatar/user-control.js

@@ -48,6 +48,7 @@ export default function UserControl( { value, onChange } ) {
 	return (
 		<ComboboxControl
 			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label={ __( 'User' ) }
 			help={ __(
 				'Select the avatar user to display, if it is blank it will use the post/page author.'

package/src/breadcrumbs/block.json

@@ -3,8 +3,9 @@
 	"apiVersion": 3,
 	"name": "core/breadcrumbs",
 	"title": "Breadcrumbs",
+	"__experimental": true,
 	"category": "theme",
-	"description": "Display a breadcrumb trail showing the path to the current page.",
+	"description": "Display a breadcrumb trail for hierarchical post types or based on taxonomy terms.",
 	"textdomain": "default",
 	"attributes": {
 		"prefersTaxonomy": {

package/src/breadcrumbs/edit.js

@@ -26,7 +26,6 @@ const separatorDefaultValue = '/';
 export default function BreadcrumbEdit( {
 	attributes,
 	setAttributes,
-	name,
 	context: { postId, postType, templateSlug },
 } ) {
 	const {
@@ -105,7 +104,7 @@ export default function BreadcrumbEdit( {
 	const { content } = useServerSideRender( {
 		attributes,
 		skipBlockSupportAttributes: true,
-		block: name,
+		block: 'core/breadcrumbs',
 		urlQueryArgs: { post_id: postId, invalidationKey },
 	} );
 
@@ -203,6 +202,7 @@ export default function BreadcrumbEdit( {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show home breadcrumb' ) }
 							onChange={ ( value ) =>
 								setAttributes( { showHomeItem: value } )
@@ -221,6 +221,7 @@ export default function BreadcrumbEdit( {
 						}
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show current breadcrumb' ) }
 							onChange={ ( value ) =>
 								setAttributes( { showCurrentItem: value } )
@@ -239,6 +240,7 @@ export default function BreadcrumbEdit( {
 						}
 					>
 						<TextControl
+							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Separator' ) }
@@ -259,6 +261,7 @@ export default function BreadcrumbEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show on homepage' ) }
 					checked={ showOnHomePage }
 					onChange={ ( value ) =>
@@ -269,6 +272,7 @@ export default function BreadcrumbEdit( {
 					) }
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Prefer taxonomy terms' ) }
 					checked={ prefersTaxonomy }
 					onChange={ ( value ) =>

package/src/breadcrumbs/index.php

@@ -159,26 +159,6 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 		array_pop( $breadcrumb_items );
 	}
 
-	/**
-	 * Filters the breadcrumb items array before rendering.
-	 *
-	 * Allows developers to modify, add, or remove breadcrumb items.
-	 *
-	 * @since 7.0.0
-	 *
-	 * @param array[] $breadcrumb_items {
-	 *     Array of breadcrumb item data.
-	 *
-	 *     @type string $label      The breadcrumb text.
-	 *     @type string $url        Optional. The breadcrumb link URL.
-	 *     @type bool   $allow_html Optional. Whether to allow HTML in the label.
-	 *                              When true, the label will be sanitized with wp_kses_post(),
-	 *                              allowing only safe HTML tags. When false or omitted, all HTML
-	 *                              will be escaped with esc_html(). Default false.
-	 * }
-	 */
-	$breadcrumb_items = apply_filters( 'block_core_breadcrumbs_items', $breadcrumb_items );
-
 	if ( empty( $breadcrumb_items ) ) {
 		return '';
 	}
@@ -455,14 +435,10 @@ function block_core_breadcrumbs_get_archive_breadcrumbs() {
 			$post_type = reset( $post_type );
 		}
 		$post_type_object = get_post_type_object( $post_type );
-
-		/** This filter is documented in wp-includes/general-template.php */
-		$title = apply_filters( 'post_type_archive_title', $post_type_object->labels->archives, $post_type ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
-
 		if ( $post_type_object ) {
 			// Add post type (current if not paginated, link if paginated).
 			$breadcrumb_items[] = block_core_breadcrumbs_create_item(
-				$title ? $title : $post_type_object->labels->archives,
+				$post_type_object->labels->archives,
 				$is_paged
 			);
 		}

package/src/button/edit.js

@@ -1,4 +1,21 @@
+/**
+ * External dependencies
+ */
 import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
+import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
+import removeAnchorTag from '../utils/remove-anchor-tag';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
+
+/**
+ * WordPress dependencies
+ */
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useEffect,
@@ -44,12 +61,6 @@ import {
 } from '@wordpress/blocks';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
-import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
-import removeAnchorTag from '../utils/remove-anchor-tag';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-import { unlock } from '../lock-unlock';
-import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
@@ -131,6 +142,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 				isShownByDefault
 				hasValue={ () => !! selectedWidth }
 				onDeselect={ () => setAttributes( { width: undefined } ) }
+				__nextHasNoMarginBottom
 			>
 				<ToggleGroupControl
 					label={ __( 'Width' ) }
@@ -140,6 +152,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 					}
 					isBlock
 					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 				>
 					{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
 						return (
@@ -452,6 +465,7 @@ function ButtonEdit( props ) {
 				{ isLinkTag && (
 					<TextControl
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Link relation' ) }
 						help={ createInterpolateElement(
 							__(

package/src/button/index.js

@@ -36,18 +36,6 @@ export const settings = {
 		...a,
 		text: ( a.text || '' ) + text,
 	} ),
-	__experimentalLabel( attributes, { context } ) {
-		const { text } = attributes;
-
-		const customName = attributes?.metadata?.name;
-		const hasContent = text?.trim().length > 0;
-
-		// In the list view, use the block's text as the label.
-		// If the text is empty, fall back to the default label.
-		if ( context === 'list-view' && ( customName || hasContent ) ) {
-			return customName || text;
-		}
-	},
 };
 
 if ( window.__experimentalContentOnlyInspectorFields ) {

package/src/buttons/block.json

@@ -63,7 +63,6 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
-		"listView": true,
 		"contentRole": true
 	},
 	"editorStyle": "wp-block-buttons-editor",

package/src/categories/edit.js

@@ -235,6 +235,7 @@ export default function CategoriesEdit( {
 							isShownByDefault
 						>
 							<SelectControl
+								__nextHasNoMarginBottom
 								__next40pxDefaultSize
 								label={ __( 'Taxonomy' ) }
 								options={ taxonomies.map( ( t ) => ( {
@@ -259,6 +260,7 @@ export default function CategoriesEdit( {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Display as dropdown' ) }
 							checked={ displayAsDropdown }
 							onChange={ toggleAttribute( 'displayAsDropdown' ) }
@@ -274,6 +276,7 @@ export default function CategoriesEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								className="wp-block-categories__indentation"
 								label={ __( 'Show label' ) }
 								checked={ showLabel }
@@ -290,6 +293,7 @@ export default function CategoriesEdit( {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show post counts' ) }
 							checked={ showPostCounts }
 							onChange={ toggleAttribute( 'showPostCounts' ) }
@@ -305,6 +309,7 @@ export default function CategoriesEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Show only top level terms' ) }
 								checked={ showOnlyTopLevel }
 								onChange={ toggleAttribute(
@@ -322,6 +327,7 @@ export default function CategoriesEdit( {
 						isShownByDefault
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show empty terms' ) }
 							checked={ showEmpty }
 							onChange={ toggleAttribute( 'showEmpty' ) }
@@ -337,6 +343,7 @@ export default function CategoriesEdit( {
 							isShownByDefault
 						>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Show hierarchy' ) }
 								checked={ showHierarchy }
 								onChange={ toggleAttribute( 'showHierarchy' ) }

package/src/columns/edit.js

@@ -162,6 +162,7 @@ function ColumnInspectorControls( {
 			{ canInsertColumnBlock && (
 				<VStack spacing={ 4 } style={ { gridColumn: '1 / -1' } }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ count }
@@ -191,6 +192,7 @@ function ColumnInspectorControls( {
 				}
 			>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Stack on mobile' ) }
 					checked={ isStackedOnMobile }
 					onChange={ () =>

package/src/comment-author-avatar/edit.js

@@ -40,17 +40,17 @@ export default function Edit( {
 	const blockProps = useBlockProps();
 	const spacingProps = useSpacingProps( attributes );
 	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
-	const avatarURL = useSelect( ( select ) => {
-		const { __experimentalDiscussionSettings } =
-			select( blockEditorStore ).getSettings();
-
-		return __experimentalDiscussionSettings?.avatarURL;
-	}, [] );
+	const { avatarURL } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
 
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<RangeControl
+					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>

package/src/comment-author-name/block.json

@@ -15,6 +15,9 @@
 		"linkTarget": {
 			"type": "string",
 			"default": "_self"
+		},
+		"textAlign": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "commentId" ],
@@ -36,7 +39,6 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/comment-author-name/deprecated.js

@@ -2,66 +2,6 @@
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
-import migrateTextAlign from '../utils/migrate-text-align';
-
-const v2 = {
-	attributes: {
-		isLink: {
-			type: 'boolean',
-			default: true,
-		},
-		linkTarget: {
-			type: 'string',
-			default: '_self',
-		},
-		textAlign: {
-			type: 'string',
-		},
-	},
-	usesContext: [ 'commentId' ],
-	supports: {
-		html: false,
-		spacing: {
-			margin: true,
-			padding: true,
-		},
-		color: {
-			gradients: true,
-			link: true,
-		},
-		typography: {
-			fontSize: true,
-			lineHeight: true,
-			__experimentalFontFamily: true,
-			__experimentalFontWeight: true,
-			__experimentalFontStyle: true,
-			__experimentalTextTransform: true,
-			__experimentalTextDecoration: true,
-			__experimentalLetterSpacing: true,
-		},
-		interactivity: {
-			clientNavigation: true,
-		},
-		__experimentalBorder: {
-			radius: true,
-			color: true,
-			width: true,
-			style: true,
-		},
-	},
-	save() {
-		return null;
-	},
-	migrate: migrateTextAlign,
-	isEligible( attributes ) {
-		return (
-			!! attributes.textAlign ||
-			!! attributes.className?.match(
-				/\bhas-text-align-(left|center|right)\b/
-			)
-		);
-	},
-};
 
 const v1 = {
 	attributes: {
@@ -107,4 +47,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v2, v1 ];
+export default [ v1 ];