@wordpress/block-library 10.1.0 → 10.1.1-next.v.202607070741.0

package/src/accordion/view.js

@@ -18,6 +18,13 @@ const { actions } = store(
 				);
 				return accordionItem ? accordionItem.isOpen : false;
 			},
+			get isHidden() {
+				const { id, accordionItems } = getContext();
+				const accordionItem = accordionItems.find(
+					( item ) => item.id === id
+				);
+				return accordionItem?.isOpen ? null : 'until-found';
+			},
 		},
 		actions: {
 			toggle: () => {
@@ -84,6 +91,23 @@ const { actions } = store(
 					targetElement.scrollIntoView();
 				}, 0 );
 			},
+			handleBeforeMatch: () => {
+				const context = getContext();
+				const { id, autoclose, accordionItems } = context;
+				const accordionItem = accordionItems.find(
+					( item ) => item.id === id
+				);
+
+				if ( accordionItem ) {
+					if ( autoclose ) {
+						accordionItems.forEach( ( item ) => {
+							item.isOpen = item.id === id;
+						} );
+					} else {
+						accordionItem.isOpen = true;
+					}
+				}
+			},
 		},
 		callbacks: {
 			initAccordionItems: () => {

package/src/accordion-heading/README.md

@@ -67,7 +67,7 @@ This is a [**static block**](https://developer.wordpress.org/block-editor/gettin
 
 ```html
 <!-- wp:accordion-heading -->
-<h3 class="wp-block-accordion-heading">
+<h3 class="wp-block-accordion-heading has-icon has-icon-right">
 	<button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Accordion Title</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button>
 </h3>
 <!-- /wp:accordion-heading -->

package/src/accordion-heading/deprecated.js

@@ -237,4 +237,125 @@ const v2 = {
 	},
 };
 
-export default [ v1, v2 ];
+const v3 = {
+	attributes: {
+		openByDefault: {
+			type: 'boolean',
+			default: false,
+		},
+		title: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: '.wp-block-accordion-heading__toggle-title',
+			role: 'content',
+		},
+		level: {
+			type: 'number',
+		},
+		iconPosition: {
+			type: 'string',
+			enum: [ 'left', 'right' ],
+			default: 'right',
+		},
+		showIcon: {
+			type: 'boolean',
+			default: true,
+		},
+	},
+	supports: {
+		anchor: true,
+		color: {
+			background: true,
+			gradients: true,
+		},
+		align: false,
+		interactivity: true,
+		spacing: {
+			padding: true,
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+			__experimentalSkipSerialization: true,
+			__experimentalSelector: '.wp-block-accordion-heading__toggle',
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		typography: {
+			__experimentalSkipSerialization: [
+				'textDecoration',
+				'letterSpacing',
+			],
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontFamily: true,
+			},
+		},
+		shadow: true,
+		visibility: false,
+		lock: false,
+	},
+	save( { attributes } ) {
+		const { level, title, iconPosition, showIcon } = attributes;
+		const TagName = 'h' + ( level || 3 );
+		const typographyProps = getTypographyClassesAndStyles( attributes );
+
+		const blockProps = useBlockProps.save();
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+
+		return (
+			<TagName { ...blockProps }>
+				<button
+					type="button"
+					className="wp-block-accordion-heading__toggle"
+					style={ spacingProps.style }
+				>
+					{ showIcon && iconPosition === 'left' && (
+						<span
+							className="wp-block-accordion-heading__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
+					<RichText.Content
+						className="wp-block-accordion-heading__toggle-title"
+						tagName="span"
+						value={ title }
+						style={ {
+							letterSpacing: typographyProps.style.letterSpacing,
+							textDecoration:
+								typographyProps.style.textDecoration,
+						} }
+					/>
+					{ showIcon && iconPosition === 'right' && (
+						<span
+							className="wp-block-accordion-heading__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
+				</button>
+			</TagName>
+		);
+	},
+};
+
+export default [ v3, v2, v1 ];

package/src/accordion-heading/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -53,7 +58,13 @@ export default function Edit( { attributes, setAttributes, context } ) {
 		},
 	} );
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			'has-icon': showIcon,
+			'has-icon-left': showIcon && iconPosition === 'left',
+			'has-icon-right': showIcon && iconPosition === 'right',
+		} ),
+	} );
 	const spacingProps = useSpacingProps( attributes );
 
 	return (

package/src/accordion-heading/save.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -13,7 +18,13 @@ export default function save( { attributes } ) {
 	const TagName = 'h' + ( level || 3 );
 	const typographyProps = getTypographyClassesAndStyles( attributes );
 
-	const blockProps = useBlockProps.save();
+	const blockProps = useBlockProps.save( {
+		className: clsx( {
+			'has-icon': showIcon,
+			'has-icon-left': showIcon && iconPosition === 'left',
+			'has-icon-right': showIcon && iconPosition === 'right',
+		} ),
+	} );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 
 	return (

package/src/accordion-item/README.md

@@ -62,7 +62,7 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 <!-- wp:accordion-item -->
 <div class="wp-block-accordion-item">
 	<!-- wp:accordion-heading -->
-	<h3 class="wp-block-accordion-heading">
+	<h3 class="wp-block-accordion-heading has-icon has-icon-right">
 		<button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Accordion Title</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button>
 	</h3>
 	<!-- /wp:accordion-heading -->

package/src/accordion-item/index.php

@@ -46,7 +46,8 @@ function block_core_accordion_item_render( array $attributes, string $content ):
 			if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-panel' ) ) ) {
 				$p->set_attribute( 'id', $unique_id . '-panel' );
 				$p->set_attribute( 'aria-labelledby', $unique_id );
-				$p->set_attribute( 'data-wp-bind--inert', '!state.isOpen' );
+				$p->set_attribute( 'data-wp-bind--hidden', 'state.isHidden' );
+				$p->set_attribute( 'data-wp-on--beforematch', 'actions.handleBeforeMatch' );
 
 				// Only modify content if all directives have been set.
 				$content = $p->get_updated_html();

package/src/accordion-panel/edit.js

@@ -32,7 +32,7 @@ export default function Edit( { attributes, context, clientId, isSelected } ) {
 		[ clientId, isSelected, openByDefault ]
 	);
 	const blockProps = useBlockProps( {
-		'aria-hidden': ! hasSelection,
+		hidden: ! hasSelection,
 		role: 'region',
 	} );
 

package/src/accordion-panel/style.scss

@@ -1,9 +1,6 @@
 .wp-block-accordion-panel {
-
 	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
-	&[inert],
-	&[aria-hidden="true"] {
-		display: none;
+	&[hidden] {
 		margin-block-start: 0;
 	}
 }

package/src/archives/edit.js

@@ -116,7 +116,6 @@ export default function ArchivesEdit( { attributes, setAttributes, name } ) {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Group by' ) }
 							options={ [
 								{ label: __( 'Year' ), value: 'yearly' },

package/src/audio/edit.js

@@ -223,7 +223,6 @@ function AudioEdit( {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ _x(
 								'Preload',
 								'noun; Audio block parameter'

package/src/avatar/edit.js

@@ -56,7 +56,6 @@ const AvatarInspectorControls = ( {
 					onDeselect={ () => setAttributes( { size: 96 } ) }
 				>
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Image size' ) }
 						onChange={ ( newSize ) =>
 							setAttributes( {

package/src/avatar/user-control.js

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

package/src/categories/edit.js

@@ -236,7 +236,6 @@ export default function CategoriesEdit( {
 							isShownByDefault
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Taxonomy' ) }
 								options={ taxonomies.map( ( t ) => ( {
 									label: t.name,

package/src/code/transforms.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockContent } from '@wordpress/blocks';
 import { create, toHTMLString } from '@wordpress/rich-text';
 
 /**
@@ -31,14 +31,16 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/html' ],
-			transform: ( attributes ) => {
-				const { content: text } = attributes;
+			__experimentalConvert( block ) {
+				const { attributes } = block;
 				return createBlock( 'core/code', {
 					...attributes,
 					...getTransformedAttributes( attributes, 'core/code' ),
 					// The HTML is plain text (with plain line breaks), so
 					// convert it to rich text.
-					content: toHTMLString( { value: create( { text } ) } ),
+					content: toHTMLString( {
+						value: create( { text: getBlockContent( block ) } ),
+					} ),
 				} );
 			},
 		},

package/src/column/edit.js

@@ -53,7 +53,6 @@ function ColumnInspectorControls( { width, setAttributes } ) {
 				<UnitControl
 					label={ __( 'Width' ) }
 					__unstableInputWidth="calc(50% - 8px)"
-					__next40pxDefaultSize
 					value={ width || '' }
 					onChange={ ( nextWidth ) => {
 						nextWidth =

package/src/columns/edit.js

@@ -162,7 +162,6 @@ function ColumnInspectorControls( {
 			{ canInsertColumnBlock && (
 				<VStack spacing={ 4 } style={ { gridColumn: '1 / -1' } }>
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ count }
 						onChange={ ( value ) =>

package/src/columns/transforms.js

@@ -68,10 +68,17 @@ const transforms = {
 			__experimentalConvert: ( blocks ) => {
 				const columnWidth = +( 100 / blocks.length ).toFixed( 2 );
 				const innerBlocksTemplate = blocks.map(
-					( { name, attributes, innerBlocks } ) => [
+					( { name, attributes, innerBlocks, innerContent } ) => [
 						'core/column',
 						{ width: `${ columnWidth }%` },
-						[ [ name, { ...attributes }, innerBlocks ] ],
+						[
+							[
+								name,
+								{ ...attributes },
+								innerBlocks,
+								innerContent,
+							],
+						],
 					]
 				);
 				return createBlock(

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

@@ -51,7 +51,6 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<RangeControl
-					__next40pxDefaultSize
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>
 						setAttributes( {

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

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

package/src/common.scss

@@ -232,9 +232,7 @@ html :where(img[class*="wp-image-"]) {
 // Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
 // This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
 html :where(.is-position-sticky) {
-	/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
 	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
-	/* stylelint-enable length-zero-no-unit */
 }
 
 // To support sticky positioning, reset the admin bar offset to 0px on mobile devices,
@@ -242,8 +240,6 @@ html :where(.is-position-sticky) {
 // is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
 @media screen and (max-width: 600px) {
 	html :where(.is-position-sticky) {
-		/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
 		--wp-admin--admin-bar--position-offset: 0px;
-		/* stylelint-enable length-zero-no-unit */
 	}
 }

package/src/cover/edit/inspector-controls.js

@@ -87,7 +87,6 @@ function CoverHeightInput( {
 
 	return (
 		<UnitControl
-			__next40pxDefaultSize
 			label={ __( 'Minimum height' ) }
 			id={ inputId }
 			isResetValueOnUnitChange
@@ -476,7 +475,6 @@ export default function CoverInspectorControls( {
 							max={ 100 }
 							step={ 10 }
 							required
-							__next40pxDefaultSize
 						/>
 					</ToolsPanelItem>
 				</InspectorControls>

package/src/cover/test/edit.js

@@ -10,7 +10,7 @@ import userEvent from '@testing-library/user-event';
 import {
 	initializeEditor,
 	selectBlock,
-} from 'test/integration/helpers/integration-test-editor';
+} from '@wordpress/integration-tests/helpers/integration-test-editor';
 
 const defaultSettings = {
 	__experimentalFeatures: {
@@ -217,7 +217,7 @@ describe( 'Cover block', () => {
 			await selectBlock( 'Block: Cover' );
 			expect(
 				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
-					'img'
+					'presentation'
 				)
 			).toBeInTheDocument();
 
@@ -232,7 +232,7 @@ describe( 'Cover block', () => {
 
 			expect(
 				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
-					'img'
+					'presentation'
 				)
 			).not.toBeInTheDocument();
 		} );
@@ -318,7 +318,7 @@ describe( 'Cover block', () => {
 
 			expect(
 				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
-					'img'
+					'presentation'
 				)
 			).toHaveStyle( 'object-position: 100% 50%;' );
 		} );

package/src/details/transforms.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, cloneBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	__experimentalCloneSanitizedBlock,
+} from '@wordpress/blocks';
 
 export default {
 	from: [
@@ -18,7 +21,9 @@ export default {
 				return createBlock(
 					'core/details',
 					{},
-					blocks.map( ( block ) => cloneBlock( block ) )
+					blocks.map( ( block ) =>
+						__experimentalCloneSanitizedBlock( block )
+					)
 				);
 			},
 		},

package/src/embed/edit.js

@@ -14,7 +14,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { View } from '@wordpress/primitives';
 import { Caption } from '../utils/caption';
 
 /**
@@ -199,9 +198,9 @@ const EmbedEdit = ( props ) => {
 
 	if ( fetching ) {
 		return (
-			<View { ...blockProps }>
+			<div { ...blockProps }>
 				<EmbedLoading />
-			</View>
+			</div>
 		);
 	}
 
@@ -213,7 +212,7 @@ const EmbedEdit = ( props ) => {
 
 	if ( showEmbedPlaceholder ) {
 		return (
-			<View { ...blockProps }>
+			<div { ...blockProps }>
 				<EmbedPlaceholder
 					icon={ icon }
 					label={ label }
@@ -245,7 +244,7 @@ const EmbedEdit = ( props ) => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
 					} }
 				/>
-			</View>
+			</div>
 		);
 	}
 

package/src/embed/embed-placeholder.js

@@ -5,14 +5,12 @@ import { __, _x } from '@wordpress/i18n';
 import {
 	Button,
 	Placeholder,
-	ExternalLink,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
+import { Link, Stack } from '@wordpress/ui';
 
-const EmbedPlaceholder = ( {
+export default function EmbedPlaceholder( {
 	icon,
 	label,
 	value,
@@ -21,7 +19,7 @@ const EmbedPlaceholder = ( {
 	cannotEmbed,
 	fallback,
 	tryAgain,
-} ) => {
+} ) {
 	return (
 		<Placeholder
 			icon={ <BlockIcon icon={ icon } showColors /> }
@@ -47,31 +45,32 @@ const EmbedPlaceholder = ( {
 				</Button>
 			</form>
 			<div className="wp-block-embed__learn-more">
-				<ExternalLink
+				<Link
+					openInNewTab
 					href={ __(
 						'https://wordpress.org/documentation/article/embeds/'
 					) }
 				>
 					{ __( 'Learn more about embeds' ) }
-				</ExternalLink>
+				</Link>
 			</div>
 			{ cannotEmbed && (
-				<VStack spacing={ 3 } className="components-placeholder__error">
+				<Stack
+					direction="column"
+					gap="md"
+					className="components-placeholder__error"
+				>
 					<div className="components-placeholder__instructions">
 						{ __( 'Sorry, this content could not be embedded.' ) }
 					</div>
-					<HStack
-						expanded={ false }
-						spacing={ 3 }
-						justify="flex-start"
-					>
+					<Stack direction="row" gap="md" justify="flex-start">
 						<Button
 							__next40pxDefaultSize
 							variant="secondary"
 							onClick={ tryAgain }
 						>
 							{ _x( 'Try again', 'button label' ) }
-						</Button>{ ' ' }
+						</Button>
 						<Button
 							__next40pxDefaultSize
 							variant="secondary"
@@ -79,11 +78,9 @@ const EmbedPlaceholder = ( {
 						>
 							{ _x( 'Convert to link', 'button label' ) }
 						</Button>
-					</HStack>
-				</VStack>
+					</Stack>
+				</Stack>
 			) }
 		</Placeholder>
 	);
-};
-
-export default EmbedPlaceholder;
+}

package/src/file/inspector.js

@@ -79,7 +79,6 @@ export default function FileBlockInspector( {
 								onDeselect={ () => changePreviewHeight( 600 ) }
 							>
 								<RangeControl
-									__next40pxDefaultSize
 									label={ __( 'Height in pixels' ) }
 									min={ MIN_PREVIEW_HEIGHT }
 									max={ Math.max(
@@ -110,7 +109,6 @@ export default function FileBlockInspector( {
 						onDeselect={ () => changeLinkDestinationOption( href ) }
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Link to' ) }
 							value={ textLinkHref }
 							options={ linkDestinationOptions }

package/src/form/edit.js

@@ -108,7 +108,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						isShownByDefault
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Submissions method' ) }
 							options={ [
 								// TODO: Allow plugins to add their own submission methods.
@@ -173,7 +172,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Method' ) }
 						options={ [
 							{ label: 'Get', value: 'get' },