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

package/src/accordion/view.js

@@ -6,28 +6,28 @@ import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
 store( 'core/accordion', {
 	state: {
 		get isOpen() {
-			const { id, accordionContents } = getContext();
-			const accordionContent = accordionContents.find(
+			const { id, accordionItems } = getContext();
+			const accordionItem = accordionItems.find(
 				( item ) => item.id === id
 			);
-			return accordionContent ? accordionContent.isOpen : false;
+			return accordionItem ? accordionItem.isOpen : false;
 		},
 	},
 	actions: {
 		toggle: () => {
 			const context = getContext();
-			const { id, autoclose, accordionContents } = context;
-			const accordionContent = accordionContents.find(
+			const { id, autoclose, accordionItems } = context;
+			const accordionItem = accordionItems.find(
 				( item ) => item.id === id
 			);
 
 			if ( autoclose ) {
-				accordionContents.forEach( ( item ) => {
+				accordionItems.forEach( ( item ) => {
 					item.isOpen =
-						item.id === id ? ! accordionContent.isOpen : false;
+						item.id === id ? ! accordionItem.isOpen : false;
 				} );
 			} else {
-				accordionContent.isOpen = ! accordionContent.isOpen;
+				accordionItem.isOpen = ! accordionItem.isOpen;
 			}
 		},
 		handleKeyDown: withSyncEvent( ( event ) => {
@@ -42,8 +42,8 @@ store( 'core/accordion', {
 
 			event.preventDefault();
 			const context = getContext();
-			const { id, accordionContents } = context;
-			const currentIndex = accordionContents.findIndex(
+			const { id, accordionItems } = context;
+			const currentIndex = accordionItems.findIndex(
 				( item ) => item.id === id
 			);
 
@@ -56,18 +56,18 @@ store( 'core/accordion', {
 				case 'ArrowDown':
 					nextIndex = Math.min(
 						currentIndex + 1,
-						accordionContents.length - 1
+						accordionItems.length - 1
 					);
 					break;
 				case 'Home':
 					nextIndex = 0;
 					break;
 				case 'End':
-					nextIndex = accordionContents.length - 1;
+					nextIndex = accordionItems.length - 1;
 					break;
 			}
 
-			const nextId = accordionContents[ nextIndex ].id;
+			const nextId = accordionItems[ nextIndex ].id;
 			const nextButton = document.getElementById( nextId );
 			if ( nextButton ) {
 				nextButton.focus();
@@ -75,10 +75,10 @@ store( 'core/accordion', {
 		} ),
 	},
 	callbacks: {
-		initAccordionContents: () => {
+		initAccordionItems: () => {
 			const context = getContext();
 			const { id, openByDefault } = context;
-			context.accordionContents.push( {
+			context.accordionItems.push( {
 				id,
 				isOpen: openByDefault,
 			} );

package/src/{accordion-header → accordion-heading}/block.json

@@ -1,15 +1,16 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"name": "core/accordion-header",
-	"title": "Accordion Header",
+	"name": "core/accordion-heading",
+	"title": "Accordion Heading",
 	"category": "design",
-	"description": "Displays an accordion header.",
+	"description": "Displays an accordion heading.",
 	"__experimental": true,
-	"parent": [ "core/accordion-content" ],
+	"parent": [ "core/accordion-item" ],
 	"usesContext": [
 		"core/accordion-icon-position",
-		"core/accordion-show-icon"
+		"core/accordion-show-icon",
+		"core/accordion-heading-level"
 	],
 	"supports": {
 		"anchor": true,
@@ -51,7 +52,8 @@
 				"fontFamily": true
 			}
 		},
-		"shadow": true
+		"shadow": true,
+		"blockVisibility": false
 	},
 	"attributes": {
 		"openByDefault": {
@@ -61,15 +63,11 @@
 		"title": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": ".wp-block-accordion-header__toggle-title",
+			"selector": ".wp-block-accordion-heading__toggle-title",
 			"role": "content"
 		},
 		"level": {
-			"type": "number",
-			"default": 3
-		},
-		"levelOptions": {
-			"type": "array"
+			"type": "number"
 		},
 		"iconPosition": {
 			"type": "string",

package/src/accordion-heading/edit.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import {
+	useBlockProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	RichText,
+} from '@wordpress/block-editor';
+
+export default function Edit( { attributes, setAttributes, context } ) {
+	const { title } = attributes;
+	const {
+		'core/accordion-icon-position': iconPosition,
+		'core/accordion-show-icon': showIcon,
+		'core/accordion-heading-level': headingLevel,
+	} = context;
+	const TagName = 'h' + headingLevel;
+
+	// Set icon attributes.
+	useEffect( () => {
+		if ( iconPosition !== undefined && showIcon !== undefined ) {
+			setAttributes( {
+				iconPosition,
+				showIcon,
+			} );
+		}
+	}, [ iconPosition, showIcon, setAttributes ] );
+
+	const blockProps = useBlockProps();
+	const spacingProps = useSpacingProps( attributes );
+
+	return (
+		<TagName { ...blockProps }>
+			<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
+					withoutInteractiveFormatting
+					disableLineBreaks
+					tagName="span"
+					value={ title }
+					onChange={ ( newTitle ) =>
+						setAttributes( { title: newTitle } )
+					}
+					placeholder={ __( 'Accordion title' ) }
+					className="wp-block-accordion-heading__toggle-title"
+				/>
+				{ showIcon && iconPosition === 'right' && (
+					<span
+						className="wp-block-accordion-heading__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
+			</button>
+		</TagName>
+	);
+}

package/src/{accordion-header → accordion-heading}/save.js

@@ -9,7 +9,7 @@ import {
 
 export default function save( { attributes } ) {
 	const { level, title, iconPosition, showIcon } = attributes;
-	const TagName = 'h' + level;
+	const TagName = 'h' + ( level || 3 );
 
 	const blockProps = useBlockProps.save();
 	const spacingProps = getSpacingClassesAndStyles( attributes );
@@ -17,27 +17,25 @@ export default function save( { attributes } ) {
 	return (
 		<TagName { ...blockProps }>
 			<button
-				className="wp-block-accordion-header__toggle"
-				style={ {
-					...spacingProps.style,
-				} }
+				className="wp-block-accordion-heading__toggle"
+				style={ spacingProps.style }
 			>
 				{ showIcon && iconPosition === 'left' && (
 					<span
-						className="wp-block-accordion-header__toggle-icon"
+						className="wp-block-accordion-heading__toggle-icon"
 						aria-hidden="true"
 					>
 						+
 					</span>
 				) }
 				<RichText.Content
-					className="wp-block-accordion-header__toggle-title"
+					className="wp-block-accordion-heading__toggle-title"
 					tagName="span"
 					value={ title }
 				/>
 				{ showIcon && iconPosition === 'right' && (
 					<span
-						className="wp-block-accordion-header__toggle-icon"
+						className="wp-block-accordion-heading__toggle-icon"
 						aria-hidden="true"
 					>
 						+

package/src/{accordion-header → accordion-heading}/style.scss

@@ -1,4 +1,4 @@
-.wp-block-accordion-header__toggle {
+.wp-block-accordion-heading__toggle {
 	font-family: inherit;
 	font-size: inherit;
 	font-weight: inherit;
@@ -12,7 +12,6 @@
 	color: inherit;
 	padding: var(--wp--preset--spacing--20, 1em) 0;
 	cursor: pointer;
-	outline: none;
 	overflow: hidden;
 	display: flex;
 	align-items: center;
@@ -20,17 +19,22 @@
 	position: relative;
 	width: 100%;
 
-	&:focus-visible {
-		outline: 2px solid -webkit-focus-ring-color;
-		outline-offset: 2px;
+	&:not(:focus-visible) {
+		outline: none;
+	}
+
+	&:hover {
+		.wp-block-accordion-heading__toggle-title {
+			text-decoration: underline;
+		}
 	}
 }
 
-.wp-block-accordion-header__toggle-title {
+.wp-block-accordion-heading__toggle-title {
 	flex: 1;
 }
 
-.wp-block-accordion-header__toggle-icon {
+.wp-block-accordion-heading__toggle-icon {
 	width: 1.2em;
 	height: 1.2em;
 	display: flex;

package/src/{accordion-content → accordion-item}/block.json

@@ -1,13 +1,13 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"name": "core/accordion-content",
-	"title": "Accordion Content",
+	"name": "core/accordion-item",
+	"title": "Accordion Item",
 	"category": "design",
-	"description": "Displays a section of content in an accordion, including a header and expandable content.",
+	"description": "Displays a section of content in an accordion, including a heading and expandable content.",
 	"__experimental": true,
 	"parent": [ "core/accordion" ],
-	"allowedBlocks": [ "core/accordion-header", "core/accordion-panel" ],
+	"allowedBlocks": [ "core/accordion-heading", "core/accordion-panel" ],
 	"supports": {
 		"color": {
 			"background": true,
@@ -53,5 +53,5 @@
 		}
 	},
 	"textdomain": "default",
-	"style": "wp-block-accordion-content"
+	"style": "wp-block-accordion-item"
 }

package/src/{accordion-content → accordion-item}/edit.js

@@ -25,7 +25,12 @@ import clsx from 'clsx';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-export default function Edit( { attributes, clientId, setAttributes } ) {
+export default function Edit( {
+	attributes,
+	clientId,
+	setAttributes,
+	context,
+} ) {
 	const { openByDefault } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -70,9 +75,14 @@ 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: [
-			[ 'core/accordion-header', {} ],
+			[
+				'core/accordion-heading',
+				headingLevel ? { level: headingLevel } : {},
+			],
 			[
 				'core/accordion-panel',
 				{

package/src/{accordion-content → accordion-item}/index.php

@@ -1,7 +1,7 @@
 <?php
 
 /**
- * Server-side rendering of the `core/accordion-content` block.
+ * Server-side rendering of the `core/accordion-item` block.
  *
  * @package WordPress
  * @since 6.6.0
@@ -11,13 +11,13 @@
  *
  * @return string Returns the updated markup.
  */
-function block_core_accordion_content_render( $attributes, $content ) {
+function block_core_accordion_item_render( $attributes, $content ) {
 	if ( ! $content ) {
 		return $content;
 	}
 
 	$p         = new WP_HTML_Tag_Processor( $content );
-	$unique_id = wp_unique_id( 'accordion-content-' );
+	$unique_id = wp_unique_id( 'accordion-item-' );
 
 	// Initialize the state of the item on the server using a closure,
 	// since we need to get derived state based on the current context.
@@ -31,13 +31,13 @@ function block_core_accordion_content_render( $attributes, $content ) {
 		)
 	);
 
-	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-content' ) ) ) {
+	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-item' ) ) ) {
 		$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.initAccordionContents' );
+		$p->set_attribute( 'data-wp-init', 'callbacks.initAccordionItems' );
 
-		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-header__toggle' ) ) ) {
+		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-heading__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 );
@@ -59,16 +59,16 @@ function block_core_accordion_content_render( $attributes, $content ) {
 }
 
 /**
- * Registers the `core/accordion-content` block on server.
+ * Registers the `core/accordion-item` block on server.
  *
  * @since 6.6.0
  */
-function register_block_core_accordion_content() {
+function register_block_core_accordion_item() {
 	register_block_type_from_metadata(
-		__DIR__ . '/accordion-content',
+		__DIR__ . '/accordion-item',
 		array(
-			'render_callback' => 'block_core_accordion_content_render',
+			'render_callback' => 'block_core_accordion_item_render',
 		)
 	);
 }
-add_action( 'init', 'register_block_core_accordion_content' );
+add_action( 'init', 'register_block_core_accordion_item' );

package/src/{accordion-content → accordion-item}/style.scss

@@ -1,11 +1,11 @@
-.wp-block-accordion-content {
+.wp-block-accordion-item {
 	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 {
+		> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
 			transform: rotate(45deg);
 		}
 	}
@@ -14,7 +14,7 @@
 	@media (prefers-reduced-motion: no-preference) {
 		transition: grid-template-rows 0.3s ease-out;
 
-		> .wp-block-accordion-header .wp-block-accordion-header__toggle-icon {
+		> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
 			transition: transform 0.2s ease-in-out;
 		}
 	}

package/src/accordion-panel/block.json

@@ -6,7 +6,7 @@
 	"category": "design",
 	"description": "Displays an accordion panel.",
 	"__experimental": true,
-	"parent": [ "core/accordion-content" ],
+	"parent": [ "core/accordion-item" ],
 	"supports": {
 		"color": {
 			"background": true,
@@ -47,7 +47,8 @@
 			}
 		},
 		"shadow": true,
-		"layout": true
+		"layout": true,
+		"blockVisibility": false
 	},
 	"attributes": {
 		"allowedBlocks": {

package/src/block/block.json

@@ -24,6 +24,7 @@
 		"html": false,
 		"inserter": false,
 		"renaming": false,
+		"blockVisibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/index.js

@@ -6,7 +6,10 @@ import {
 	setFreeformContentHandlerName,
 	setUnregisteredTypeHandlerName,
 	setGroupingBlockName,
+	registerBlockType,
 } from '@wordpress/blocks';
+import { createElement } from '@wordpress/element';
+import ServerSideRender from '@wordpress/server-side-render';
 
 /**
  * Internal dependencies
@@ -21,8 +24,8 @@ import {
 //
 // See https://github.com/WordPress/gutenberg/pull/40655 for more context.
 import * as accordion from './accordion';
-import * as accordionContent from './accordion-content';
-import * as accordionHeader from './accordion-header';
+import * as accordionItem from './accordion-item';
+import * as accordionHeading from './accordion-heading';
 import * as accordionPanel from './accordion-panel';
 import * as archives from './archives';
 import * as avatar from './avatar';
@@ -243,8 +246,8 @@ const getAllBlocks = () => {
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( accordion );
-		blocks.push( accordionContent );
-		blocks.push( accordionHeader );
+		blocks.push( accordionItem );
+		blocks.push( accordionHeading );
 		blocks.push( accordionPanel );
 		blocks.push( termsQuery );
 		blocks.push( termTemplate );
@@ -309,6 +312,22 @@ export const registerCoreBlocks = (
 ) => {
 	blocks.forEach( ( { init } ) => init() );
 
+	// Auto-register PHP-only blocks with ServerSideRender
+	if ( window.__unstableAutoRegisterBlocks ) {
+		window.__unstableAutoRegisterBlocks.forEach( ( blockName ) => {
+			registerBlockType( blockName, {
+				title: blockName,
+				edit: ( { attributes } ) => {
+					return createElement( ServerSideRender, {
+						block: blockName,
+						attributes,
+					} );
+				},
+				save: () => null,
+			} );
+		} );
+	}
+
 	setDefaultBlockName( paragraph.name );
 	if (
 		window.wp &&

package/src/navigation-link/edit.js

@@ -8,15 +8,7 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	CheckboxControl,
-	TextControl,
-	TextareaControl,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import {
@@ -29,9 +21,8 @@ import {
 	useInnerBlocksProps,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
+import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
@@ -43,7 +34,7 @@ import { useMergeRefs, usePrevious } from '@wordpress/compose';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { Controls } from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -175,136 +166,6 @@ function getMissingText( type ) {
  * packages/block-library/src/navigation-submenu/edit.js
  * Consider reusing this components for both blocks.
  */
-function Controls( { attributes, setAttributes, setIsEditingControl } ) {
-	const { label, url, description, rel, opensInNewTab } = attributes;
-	const lastURLRef = useRef( url );
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	return (
-		<ToolsPanel
-			label={ __( 'Settings' ) }
-			resetAll={ () => {
-				setAttributes( {
-					label: '',
-					url: '',
-					description: '',
-					rel: '',
-					opensInNewTab: false,
-				} );
-			} }
-			dropdownMenuProps={ dropdownMenuProps }
-		>
-			<ToolsPanelItem
-				hasValue={ () => !! label }
-				label={ __( 'Text' ) }
-				onDeselect={ () => setAttributes( { label: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Text' ) }
-					value={ label ? stripHTML( label ) : '' }
-					onChange={ ( labelValue ) => {
-						setAttributes( { label: labelValue } );
-					} }
-					autoComplete="off"
-					onFocus={ () => setIsEditingControl( true ) }
-					onBlur={ () => setIsEditingControl( false ) }
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! url }
-				label={ __( 'Link' ) }
-				onDeselect={ () => setAttributes( { url: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Link' ) }
-					value={ url ? safeDecodeURI( url ) : '' }
-					onChange={ ( urlValue ) => {
-						setAttributes( {
-							url: encodeURI( safeDecodeURI( urlValue ) ),
-						} );
-					} }
-					autoComplete="off"
-					type="url"
-					onFocus={ () => {
-						lastURLRef.current = url;
-						setIsEditingControl( true );
-					} }
-					onBlur={ () => {
-						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
-						updateAttributes(
-							{ url: ! url ? lastURLRef.current : url },
-							setAttributes,
-							{ ...attributes, url: lastURLRef.current }
-						);
-						setIsEditingControl( false );
-					} }
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! opensInNewTab }
-				label={ __( 'Open in new tab' ) }
-				onDeselect={ () => setAttributes( { opensInNewTab: false } ) }
-				isShownByDefault
-			>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Open in new tab' ) }
-					checked={ opensInNewTab }
-					onChange={ ( value ) =>
-						setAttributes( { opensInNewTab: value } )
-					}
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! description }
-				label={ __( 'Description' ) }
-				onDeselect={ () => setAttributes( { description: '' } ) }
-				isShownByDefault
-			>
-				<TextareaControl
-					__nextHasNoMarginBottom
-					label={ __( 'Description' ) }
-					value={ description || '' }
-					onChange={ ( descriptionValue ) => {
-						setAttributes( { description: descriptionValue } );
-					} }
-					help={ __(
-						'The description will be displayed in the menu if the current theme supports it.'
-					) }
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! rel }
-				label={ __( 'Rel attribute' ) }
-				onDeselect={ () => setAttributes( { rel: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Rel attribute' ) }
-					value={ rel || '' }
-					onChange={ ( relValue ) => {
-						setAttributes( { rel: relValue } );
-					} }
-					autoComplete="off"
-					help={ __(
-						'The relationship of the linked URL as space-separated link types.'
-					) }
-				/>
-			</ToolsPanelItem>
-		</ToolsPanel>
-	);
-}
 
 export default function NavigationLinkEdit( {
 	attributes,