@wordpress/block-library 9.30.1-next.a730c9c8c.0 → 9.31.1-next.233ccab9b.0

package/src/accordion/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -13,7 +18,36 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/accordion-content',
+				innerBlocks: [
+					{
+						name: 'core/accordion-header',
+						attributes: {
+							title: __(
+								'Lorem ipsum dolor sit amet, consectetur.'
+							),
+						},
+					},
+				],
+			},
+			{
+				name: 'core/accordion-content',
+				innerBlocks: [
+					{
+						name: 'core/accordion-header',
+						attributes: {
+							title: __(
+								'Suspendisse commodo lacus, interdum et.'
+							),
+						},
+					},
+				],
+			},
+		],
+	},
 	edit,
 	save,
 };

package/src/accordion/index.php

@@ -15,28 +15,12 @@ function render_block_core_accordion( $attributes, $content ) {
 		return $content;
 	}
 
-	$suffix = wp_scripts_get_suffix();
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		$module_url = gutenberg_url( '/build-module/block-library/accordion/view.min.js' );
-	}
-
-	wp_register_script_module(
-		'@wordpress/block-library/accordion',
-		isset( $module_url ) ? $module_url : includes_url( "blocks/accordion/view{$suffix}.js" ),
-		array( '@wordpress/interactivity' ),
-		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-	);
-
-	wp_enqueue_script_module( '@wordpress/block-library/accordion' );
-
-	$p             = new WP_HTML_Tag_Processor( $content );
-	$autoclose     = $attributes['autoclose'] ? 'true' : 'false';
-	$icon          = $attributes['icon'] ?? 'plus';
-	$icon_position = $attributes['iconPosition'] ?? 'right';
+	$p         = new WP_HTML_Tag_Processor( $content );
+	$autoclose = $attributes['autoclose'] ? 'true' : 'false';
 
 	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion' ) ) ) {
 		$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
-		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [], "icon": "' . $icon . '", "iconPosition": "' . $icon_position . '" }' );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "accordionContents": [] }' );
 
 		// Only modify content if directives have been set.
 		$content = $p->get_updated_html();

package/src/accordion/save.js

@@ -1,23 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { iconPosition } = attributes;
+export default function save() {
 	const blockProps = useBlockProps.save();
-	const className = clsx(
-		{
-			'icon-position-left': iconPosition === 'left',
-		},
-		blockProps.className
-	);
-
-	return (
-		<div { ...useInnerBlocksProps.save( { ...blockProps, className } ) } />
-	);
+	return <div { ...useInnerBlocksProps.save( blockProps ) } />;
 }

package/src/accordion/view.js

@@ -1,38 +1,87 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
 
-const { state } = store( 'core/accordion', {
+store( 'core/accordion', {
 	state: {
 		get isOpen() {
-			const { isOpen, id } = getContext();
-			return isOpen.includes( id );
+			const { id, accordionContents } = getContext();
+			const accordionContent = accordionContents.find(
+				( item ) => item.id === id
+			);
+			return accordionContent ? accordionContent.isOpen : false;
 		},
 	},
 	actions: {
 		toggle: () => {
 			const context = getContext();
-			const { id, autoclose } = context;
+			const { id, autoclose, accordionContents } = context;
+			const accordionContent = accordionContents.find(
+				( item ) => item.id === id
+			);
 
 			if ( autoclose ) {
-				context.isOpen = state.isOpen ? [] : [ id ];
-			} else if ( state.isOpen ) {
-				context.isOpen = context.isOpen.filter(
-					( item ) => item !== id
-				);
+				accordionContents.forEach( ( item ) => {
+					item.isOpen =
+						item.id === id ? ! accordionContent.isOpen : false;
+				} );
 			} else {
-				context.isOpen.push( id );
+				accordionContent.isOpen = ! accordionContent.isOpen;
 			}
 		},
+		handleKeyDown: withSyncEvent( ( event ) => {
+			if (
+				event.key !== 'ArrowUp' &&
+				event.key !== 'ArrowDown' &&
+				event.key !== 'Home' &&
+				event.key !== 'End'
+			) {
+				return;
+			}
+
+			event.preventDefault();
+			const context = getContext();
+			const { id, accordionContents } = context;
+			const currentIndex = accordionContents.findIndex(
+				( item ) => item.id === id
+			);
+
+			let nextIndex;
+
+			switch ( event.key ) {
+				case 'ArrowUp':
+					nextIndex = Math.max( 0, currentIndex - 1 );
+					break;
+				case 'ArrowDown':
+					nextIndex = Math.min(
+						currentIndex + 1,
+						accordionContents.length - 1
+					);
+					break;
+				case 'Home':
+					nextIndex = 0;
+					break;
+				case 'End':
+					nextIndex = accordionContents.length - 1;
+					break;
+			}
+
+			const nextId = accordionContents[ nextIndex ].id;
+			const nextButton = document.getElementById( nextId );
+			if ( nextButton ) {
+				nextButton.focus();
+			}
+		} ),
 	},
 	callbacks: {
-		initIsOpen: () => {
+		initAccordionContents: () => {
 			const context = getContext();
 			const { id, openByDefault } = context;
-			if ( openByDefault ) {
-				context.isOpen.push( id );
-			}
+			context.accordionContents.push( {
+				id,
+				isOpen: openByDefault,
+			} );
 		},
 	},
 } );

package/src/accordion-content/block.json

@@ -11,7 +11,7 @@
 	"supports": {
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"interactivity": true,
 		"spacing": {
@@ -31,7 +31,20 @@
 			}
 		},
 		"shadow": true,
-		"layout": true
+		"layout": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"attributes": {
 		"openByDefault": {
@@ -39,5 +52,6 @@
 			"default": false
 		}
 	},
-	"textdomain": "default"
+	"textdomain": "default",
+	"style": "wp-block-accordion-content"
 }

package/src/accordion-content/index.php

@@ -35,10 +35,11 @@ function block_core_accordion_content_render( $attributes, $content ) {
 		$open_by_default = $attributes['openByDefault'] ? 'true' : 'false';
 		$p->set_attribute( 'data-wp-context', '{ "id": "' . $unique_id . '", "openByDefault": ' . $open_by_default . ' }' );
 		$p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
-		$p->set_attribute( 'data-wp-init', 'callbacks.initIsOpen' );
+		$p->set_attribute( 'data-wp-init', 'callbacks.initAccordionContents' );
 
-		if ( $p->next_tag( array( 'class_name' => 'accordion-content__toggle' ) ) ) {
+		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-header__toggle' ) ) ) {
 			$p->set_attribute( 'data-wp-on--click', 'actions.toggle' );
+			$p->set_attribute( 'data-wp-on--keydown', 'actions.handleKeyDown' );
 			$p->set_attribute( 'id', $unique_id );
 			$p->set_attribute( 'aria-controls', $unique_id . '-panel' );
 			$p->set_attribute( 'data-wp-bind--aria-expanded', 'state.isOpen' );

package/src/accordion-content/save.js

@@ -9,17 +9,11 @@ import clsx from 'clsx';
 
 export default function save( { attributes } ) {
 	const { openByDefault } = attributes;
-	const blockProps = useBlockProps.save();
-	const className = clsx(
-		{
+	const blockProps = useBlockProps.save( {
+		className: clsx( {
 			'is-open': openByDefault,
-		},
-		blockProps.className
-	);
-	const innerBlocksProps = useInnerBlocksProps.save( {
-		...blockProps,
-		className,
+		} ),
 	} );
-
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <div { ...innerBlocksProps } />;
 }

package/src/accordion-content/style.scss

@@ -0,0 +1,21 @@
+.wp-block-accordion-content {
+	display: grid;
+	grid-template-rows: max-content 0fr;
+
+	&.is-open {
+		grid-template-rows: max-content 1fr;
+
+		> .wp-block-accordion-header .wp-block-accordion-header__toggle-icon {
+			transform: rotate(45deg);
+		}
+	}
+
+	/* Add transitions only for users who do not prefer reduced motion */
+	@media (prefers-reduced-motion: no-preference) {
+		transition: grid-template-rows 0.3s ease-out;
+
+		> .wp-block-accordion-header .wp-block-accordion-header__toggle-icon {
+			transition: transform 0.2s ease-in-out;
+		}
+	}
+}

package/src/accordion-header/block.json

@@ -15,17 +15,16 @@
 		"anchor": true,
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"align": false,
 		"interactivity": true,
 		"spacing": {
 			"padding": true,
-			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
-				"padding": true,
-				"margin": true
-			}
+				"padding": true
+			},
+			"__experimentalSkipSerialization": true
 		},
 		"__experimentalBorder": {
 			"color": true,
@@ -40,7 +39,6 @@
 			}
 		},
 		"typography": {
-			"textAlign": true,
 			"fontSize": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
@@ -63,7 +61,8 @@
 		"title": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "span"
+			"selector": ".wp-block-accordion-header__toggle-title",
+			"role": "content"
 		},
 		"level": {
 			"type": "number",
@@ -72,10 +71,6 @@
 		"levelOptions": {
 			"type": "array"
 		},
-		"textAlignment": {
-			"type": "string",
-			"default": "left"
-		},
 		"iconPosition": {
 			"type": "string",
 			"enum": [ "left", "right" ],

package/src/accordion-header/edit.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -9,26 +5,15 @@ import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import {
 	useBlockProps,
-	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
-	__experimentalGetShadowClassesAndStyles as useShadowProps,
 	BlockControls,
 	HeadingLevelDropdown,
 	RichText,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { plus } from '../accordion-content/icons';
-
-const ICONS = {
-	plus,
-};
 
 export default function Edit( { attributes, setAttributes, context } ) {
-	const { level, title, textAlign, levelOptions } = attributes;
+	const { level, title, levelOptions } = attributes;
 	const {
 		'core/accordion-icon-position': iconPosition,
 		'core/accordion-show-icon': showIcon,
@@ -46,13 +31,7 @@ export default function Edit( { attributes, setAttributes, context } ) {
 	}, [ iconPosition, showIcon, setAttributes ] );
 
 	const blockProps = useBlockProps();
-	const borderProps = useBorderProps( attributes );
-	const colorProps = useColorProps( attributes );
 	const spacingProps = useSpacingProps( attributes );
-	const shadowProps = useShadowProps( attributes );
-
-	const Icon = ICONS.plus;
-	const shouldShowIcon = showIcon && Icon;
 
 	return (
 		<>
@@ -67,38 +46,23 @@ export default function Edit( { attributes, setAttributes, context } ) {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
-			<TagName
-				{ ...blockProps }
-				className={ clsx(
-					blockProps.className,
-					colorProps.className,
-					borderProps.className,
-					'accordion-content__heading',
-					{
-						[ `has-custom-font-size` ]: blockProps.style.fontSize,
-						[ `icon-position-left` ]: iconPosition === 'left',
-						[ `has-text-align-${ textAlign }` ]: textAlign,
-					}
-				) }
-				style={ {
-					...borderProps.style,
-					...colorProps.style,
-					...shadowProps.style,
-				} }
-			>
+			<TagName { ...blockProps }>
 				<button
-					className={ clsx( 'accordion-content__toggle' ) }
+					className="wp-block-accordion-header__toggle"
 					style={ {
 						...spacingProps.style,
 					} }
 				>
+					{ showIcon && iconPosition === 'left' && (
+						<span
+							className="wp-block-accordion-header__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
 					<RichText
-						allowedFormats={ [
-							'core/bold',
-							'core/italic',
-							'core/image',
-							'core/strikethrough',
-						] }
+						withoutInteractiveFormatting
 						disableLineBreaks
 						tagName="span"
 						value={ title }
@@ -106,22 +70,14 @@ export default function Edit( { attributes, setAttributes, context } ) {
 							setAttributes( { title: newTitle } )
 						}
 						placeholder={ __( 'Accordion title' ) }
+						className="wp-block-accordion-header__toggle-title"
 					/>
-					{ shouldShowIcon && (
+					{ showIcon && iconPosition === 'right' && (
 						<span
-							className={ clsx(
-								`accordion-content__toggle-icon`,
-								{
-									'has-icon-plus': true,
-								}
-							) }
-							style={ {
-								// TO-DO: make this configurable
-								width: `1.2em`,
-								height: `1.2em`,
-							} }
+							className="wp-block-accordion-header__toggle-icon"
+							aria-hidden="true"
 						>
-							{ Icon && <Icon width="1.2em" height="1.2em" /> }
+							+
 						</span>
 					) }
 				</button>

package/src/accordion-header/save.js

@@ -1,78 +1,48 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
 import {
 	useBlockProps,
-	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
-	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
-	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	RichText,
 } from '@wordpress/block-editor';
-/**
- * Internal dependencies
- */
-import { plus } from '../accordion-content/icons';
-
-const ICONS = {
-	plus,
-};
 
 export default function save( { attributes } ) {
-	const { level, title, iconPosition, textAlign, showIcon } = attributes;
+	const { level, title, iconPosition, showIcon } = attributes;
 	const TagName = 'h' + level;
 
 	const blockProps = useBlockProps.save();
-	const borderProps = getBorderClassesAndStyles( attributes );
-	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
-	const shadowProps = getShadowClassesAndStyles( attributes );
-
-	const Icon = ICONS.plus;
 
 	return (
-		<TagName
-			{ ...blockProps }
-			className={ clsx(
-				blockProps.className,
-				colorProps.className,
-				borderProps.className,
-				'accordion-content__heading',
-				{
-					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
-					[ `icon-position-left` ]: iconPosition === 'left',
-					[ `has-text-align-${ textAlign }` ]: textAlign,
-				}
-			) }
-			style={ {
-				...borderProps.style,
-				...colorProps.style,
-				...shadowProps.style,
-			} }
-		>
+		<TagName { ...blockProps }>
 			<button
-				className={ clsx( 'accordion-content__toggle' ) }
+				className="wp-block-accordion-header__toggle"
 				style={ {
 					...spacingProps.style,
 				} }
 			>
-				<RichText.Content tagName="span" value={ title } />
-				<span
-					className={ clsx( `accordion-content__toggle-icon`, {
-						'has-icon-plus': showIcon,
-					} ) }
-					style={ {
-						// TO-DO: make this configurable
-						width: `1.2em`,
-						height: `1.2em`,
-					} }
-				>
-					{ showIcon && <Icon width="1.2em" height="1.2em" /> }
-				</span>
+				{ showIcon && iconPosition === 'left' && (
+					<span
+						className="wp-block-accordion-header__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
+				<RichText.Content
+					className="wp-block-accordion-header__toggle-title"
+					tagName="span"
+					value={ title }
+				/>
+				{ showIcon && iconPosition === 'right' && (
+					<span
+						className="wp-block-accordion-header__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
 			</button>
 		</TagName>
 	);

package/src/accordion-header/style.scss

@@ -0,0 +1,39 @@
+.wp-block-accordion-header__toggle {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	text-decoration: inherit;
+	word-spacing: inherit;
+	background: none;
+	border: none;
+	color: inherit;
+	padding: var(--wp--preset--spacing--20, 1em) 0;
+	cursor: pointer;
+	outline: none;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	text-align: inherit;
+	position: relative;
+	width: 100%;
+
+	&:focus-visible {
+		outline: 2px solid -webkit-focus-ring-color;
+		outline-offset: 2px;
+	}
+}
+
+.wp-block-accordion-header__toggle-title {
+	flex: 1;
+}
+
+.wp-block-accordion-header__toggle-icon {
+	width: 1.2em;
+	height: 1.2em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

package/src/accordion-panel/block.json

@@ -10,12 +10,11 @@
 	"supports": {
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"interactivity": true,
 		"spacing": {
 			"padding": true,
-			"margin": [ "top", "bottom" ],
 			"blockGap": true,
 			"__experimentalDefaultControls": {
 				"padding": true,
@@ -68,5 +67,6 @@
 			"default": false
 		}
 	},
-	"textdomain": "default"
+	"textdomain": "default",
+	"style": "wp-block-accordion-panel"
 }

package/src/accordion-panel/edit.js

@@ -9,6 +9,7 @@ export default function Edit( { attributes } ) {
 
 	const blockProps = useBlockProps( {
 		'aria-hidden': ! isSelected && ! openByDefault,
+		role: 'region',
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {

package/src/accordion-panel/save.js

@@ -4,7 +4,9 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save() {
-	const blockProps = useBlockProps.save();
+	const blockProps = useBlockProps.save( {
+		role: 'region',
+	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <div { ...innerBlocksProps } />;
 }

package/src/accordion-panel/style.scss

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