@wordpress/block-library 9.36.1-next.738bb1424.0 → 9.36.2-next.8fd3f8831.0

package/src/breadcrumbs/block.json

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

package/src/breadcrumbs/edit.js

@@ -26,6 +26,7 @@ const separatorDefaultValue = '/';
 export default function BreadcrumbEdit( {
 	attributes,
 	setAttributes,
+	name,
 	context: { postId, postType, templateSlug },
 } ) {
 	const {
@@ -104,7 +105,7 @@ export default function BreadcrumbEdit( {
 	const { content } = useServerSideRender( {
 		attributes,
 		skipBlockSupportAttributes: true,
-		block: 'core/breadcrumbs',
+		block: name,
 		urlQueryArgs: { post_id: postId, invalidationKey },
 	} );
 

package/src/breadcrumbs/index.php

@@ -159,6 +159,26 @@ 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 '';
 	}
@@ -435,7 +455,9 @@ function block_core_breadcrumbs_get_archive_breadcrumbs() {
 			$post_type = reset( $post_type );
 		}
 		$post_type_object = get_post_type_object( $post_type );
-		$title            = apply_filters( 'post_type_archive_title', $post_type_object->labels->archives, $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).

package/src/button/index.js

@@ -36,6 +36,18 @@ 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/button/test/get-experimental-label.js

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import { settings } from '..';
+
+describe( 'Button block __experimentalLabel', () => {
+	const { __experimentalLabel: getLabel } = settings;
+
+	it( 'returns custom name when metadata.name exists', () => {
+		const attributes = {
+			metadata: { name: 'My Custom Button' },
+			text: 'Click me',
+		};
+		expect( getLabel( attributes, { context: 'list-view' } ) ).toBe(
+			'My Custom Button'
+		);
+	} );
+
+	it( 'returns text when no custom name is set', () => {
+		const attributes = {
+			text: 'My Custom Button',
+		};
+		expect( getLabel( attributes, { context: 'list-view' } ) ).toBe(
+			'My Custom Button'
+		);
+	} );
+
+	it( 'returns undefined when text is empty', () => {
+		const attributes = {
+			text: '',
+		};
+		expect(
+			getLabel( attributes, { context: 'list-view' } )
+		).toBeUndefined();
+	} );
+
+	it( 'returns undefined when empty attributes', () => {
+		const attributes = {};
+		expect(
+			getLabel( attributes, { context: 'list-view' } )
+		).toBeUndefined();
+	} );
+
+	it( 'returns undefined when context is not list-view', () => {
+		const attributes = {
+			text: 'Click me',
+		};
+		expect( getLabel( attributes, { context: 'other' } ) ).toBeUndefined();
+	} );
+} );

package/src/buttons/block.json

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

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

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

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

@@ -2,6 +2,66 @@
  * 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: {
@@ -47,4 +107,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

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

@@ -1,19 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import {
-	AlignmentControl,
-	BlockControls,
-	InspectorControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	ToggleControl,
@@ -25,6 +15,7 @@ import {
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 /**
  * Renders the `core/comment-author-name` block on the editor.
@@ -34,23 +25,20 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  * @param {Object} props.attributes            Block attributes.
  * @param {string} props.attributes.isLink     Whether the author name should be linked.
  * @param {string} props.attributes.linkTarget Target of the link.
- * @param {string} props.attributes.textAlign  Text alignment.
  * @param {Object} props.context               Inherited context.
  * @param {string} props.context.commentId     The comment ID.
  *
  * @return {JSX.Element} React element.
  */
-export default function Edit( {
-	attributes: { isLink, linkTarget, textAlign },
-	context: { commentId },
-	setAttributes,
-} ) {
+export default function Edit( props ) {
+	const {
+		attributes: { isLink, linkTarget },
+		context: { commentId },
+		setAttributes,
+	} = props;
+	useDeprecatedTextAlign( props );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+	const blockProps = useBlockProps();
 	let displayName = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
@@ -67,17 +55,6 @@ export default function Edit( {
 		[ commentId ]
 	);
 
-	const blockControls = (
-		<BlockControls group="block">
-			<AlignmentControl
-				value={ textAlign }
-				onChange={ ( newAlign ) =>
-					setAttributes( { textAlign: newAlign } )
-				}
-			/>
-		</BlockControls>
-	);
-
 	const inspectorControls = (
 		<InspectorControls>
 			<ToolsPanel
@@ -149,7 +126,6 @@ export default function Edit( {
 	return (
 		<>
 			{ inspectorControls }
-			{ blockControls }
 			<div { ...blockProps }>{ displayAuthor }</div>
 		</>
 	);

package/src/freeform/edit.js

@@ -3,15 +3,20 @@
  */
 import {
 	BlockControls,
+	BlockIcon,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { debounce, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { ToolbarGroup } from '@wordpress/components';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import {
+	Button,
+	Placeholder,
+	ToolbarGroup,
+	ToolbarButton,
+} from '@wordpress/components';
+import { useState, useRef, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
+import { classic } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,34 +24,19 @@ import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
 import ConvertToBlocksButton from './convert-to-blocks-button';
 import ModalEdit from './modal';
 
-const { wp } = window;
-
-function isTmceEmpty( editor ) {
-	// When tinyMce is empty the content seems to be:
-	// <p><br data-mce-bogus="1"></p>
-	// avoid expensive checks for large documents
-	const body = editor.getBody();
-	if ( body.childNodes.length > 1 ) {
-		return false;
-	} else if ( body.childNodes.length === 0 ) {
-		return true;
-	}
-	if ( body.childNodes[ 0 ].childNodes.length > 1 ) {
-		return false;
-	}
-	return /^\n?$/.test( body.innerText || body.textContent );
-}
+export default function FreeformEdit( {
+	attributes,
+	setAttributes,
+	clientId,
+} ) {
+	const { content } = attributes;
+	const [ isOpen, setOpen ] = useState( false );
+	const editButtonRef = useRef( null );
 
-export default function FreeformEdit( props ) {
-	const { clientId } = props;
 	const canRemove = useSelect(
 		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
 		[ clientId ]
 	);
-	const [ isIframed, setIsIframed ] = useState( false );
-	const ref = useRefEffect( ( element ) => {
-		setIsIframed( element.ownerDocument !== document );
-	}, [] );
 
 	return (
 		<>
@@ -57,227 +47,52 @@ export default function FreeformEdit( props ) {
 					</ToolbarGroup>
 				</BlockControls>
 			) }
-			<div { ...useBlockProps( { ref } ) }>
-				{ isIframed ? (
-					<ModalEdit { ...props } />
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						ref={ editButtonRef }
+						onClick={ () => setOpen( true ) }
+					>
+						{ __( 'Edit' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			</BlockControls>
+			<div { ...useBlockProps() }>
+				{ content ? (
+					<RawHTML>{ content }</RawHTML>
 				) : (
-					<ClassicEdit { ...props } />
+					<Placeholder
+						icon={ <BlockIcon icon={ classic } /> }
+						label={ __( 'Classic' ) }
+						instructions={ __(
+							'Use the classic editor to add content.'
+						) }
+					>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ () => setOpen( true ) }
+						>
+							{ __( 'Edit contents' ) }
+						</Button>
+					</Placeholder>
 				) }
-			</div>
-		</>
-	);
-}
-
-function ClassicEdit( {
-	clientId,
-	attributes: { content },
-	setAttributes,
-	onReplace,
-} ) {
-	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
-	const didMountRef = useRef( false );
-
-	useEffect( () => {
-		if ( ! didMountRef.current ) {
-			return;
-		}
-
-		const editor = window.tinymce.get( `editor-${ clientId }` );
-		if ( ! editor ) {
-			return;
-		}
-
-		const currentContent = editor.getContent();
-		if ( currentContent !== content ) {
-			editor.setContent( content || '' );
-		}
-	}, [ clientId, content ] );
-
-	useEffect( () => {
-		const { baseURL, suffix } = window.wpEditorL10n.tinymce;
-
-		didMountRef.current = true;
-
-		window.tinymce.EditorManager.overrideDefaults( {
-			base_url: baseURL,
-			suffix,
-		} );
-
-		function onSetup( editor ) {
-			let bookmark;
-
-			if ( content ) {
-				editor.on( 'loadContent', () => editor.setContent( content ) );
-			}
-
-			editor.on( 'blur', () => {
-				bookmark = editor.selection.getBookmark( 2, true );
-				// There is an issue with Chrome and the editor.focus call in core at https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/link.js#L451.
-				// This causes a scroll to the top of editor content on return from some content updating dialogs so tracking
-				// scroll position until this is fixed in core.
-				const scrollContainer = document.querySelector(
-					'.interface-interface-skeleton__content'
-				);
-				const scrollPosition = scrollContainer.scrollTop;
-
-				// Only update attributes if we aren't multi-selecting blocks.
-				// Updating during multi-selection can overwrite attributes of other blocks.
-				if ( ! getMultiSelectedBlockClientIds()?.length ) {
-					setAttributes( {
-						content: editor.getContent(),
-					} );
-				}
-
-				editor.once( 'focus', () => {
-					if ( bookmark ) {
-						editor.selection.moveToBookmark( bookmark );
-						if ( scrollContainer.scrollTop !== scrollPosition ) {
-							scrollContainer.scrollTop = scrollPosition;
+				{ isOpen && (
+					<ModalEdit
+						clientId={ clientId }
+						content={ content }
+						onClose={ () => {
+							setOpen( false );
+							if ( editButtonRef.current ) {
+								editButtonRef.current.focus();
+							}
+						} }
+						onChange={ ( newContent ) =>
+							setAttributes( { content: newContent } )
 						}
-					}
-				} );
-
-				return false;
-			} );
-
-			editor.on( 'mousedown touchstart', () => {
-				bookmark = null;
-			} );
-
-			const debouncedOnChange = debounce( () => {
-				const value = editor.getContent();
-
-				if ( value !== editor._lastChange ) {
-					editor._lastChange = value;
-					setAttributes( {
-						content: value,
-					} );
-				}
-			}, 250 );
-			editor.on( 'Paste Change input Undo Redo', debouncedOnChange );
-
-			// We need to cancel the debounce call because when we remove
-			// the editor (onUnmount) this callback is executed in
-			// another tick. This results in setting the content to empty.
-			editor.on( 'remove', debouncedOnChange.cancel );
-
-			editor.on( 'keydown', ( event ) => {
-				if ( isKeyboardEvent.primary( event, 'z' ) ) {
-					// Prevent the gutenberg undo kicking in so TinyMCE undo stack works as expected.
-					event.stopPropagation();
-				}
-
-				if (
-					( event.keyCode === BACKSPACE ||
-						event.keyCode === DELETE ) &&
-					isTmceEmpty( editor )
-				) {
-					// Delete the block.
-					onReplace( [] );
-					event.preventDefault();
-					event.stopImmediatePropagation();
-				}
-
-				const { altKey } = event;
-				/*
-				 * Prevent Mousetrap from kicking in: TinyMCE already uses its own
-				 * `alt+f10` shortcut to focus its toolbar.
-				 */
-				if ( altKey && event.keyCode === F10 ) {
-					event.stopPropagation();
-				}
-			} );
-
-			editor.on( 'paste', ( event ) => {
-				// TinyMCE selection isn’t synced with the block editor selection store.
-				// This event handler prevents paste from bubbling so the useClipboardHandler
-				// won’t replace the block.
-				event.stopPropagation();
-			} );
-
-			editor.on( 'init', () => {
-				const rootNode = editor.getBody();
-
-				// Create the toolbar by refocussing the editor.
-				if ( rootNode.ownerDocument.activeElement === rootNode ) {
-					rootNode.blur();
-					editor.focus();
-				}
-			} );
-		}
-
-		function initialize() {
-			const { settings } = window.wpEditorL10n.tinymce;
-			wp.oldEditor.initialize( `editor-${ clientId }`, {
-				tinymce: {
-					...settings,
-					inline: true,
-					content_css: false,
-					fixed_toolbar_container: `#toolbar-${ clientId }`,
-					setup: onSetup,
-				},
-			} );
-		}
-
-		function onReadyStateChange() {
-			if ( document.readyState === 'complete' ) {
-				initialize();
-			}
-		}
-
-		if ( document.readyState === 'complete' ) {
-			initialize();
-		} else {
-			document.addEventListener( 'readystatechange', onReadyStateChange );
-		}
-
-		return () => {
-			document.removeEventListener(
-				'readystatechange',
-				onReadyStateChange
-			);
-			wp.oldEditor.remove( `editor-${ clientId }` );
-			didMountRef.current = false;
-		};
-	}, [] );
-
-	function focus() {
-		const editor = window.tinymce.get( `editor-${ clientId }` );
-		if ( editor ) {
-			editor.focus();
-		}
-	}
-
-	function onToolbarKeyDown( event ) {
-		// Prevent WritingFlow from kicking in and allow arrows navigation on the toolbar.
-		event.stopPropagation();
-		// Prevent Mousetrap from moving focus to the top toolbar when pressing `alt+f10` on this block toolbar.
-		event.nativeEvent.stopImmediatePropagation();
-	}
-
-	// Disable reasons:
-	//
-	// jsx-a11y/no-static-element-interactions
-	//  - the toolbar itself is non-interactive, but must capture events
-	//    from the KeyboardShortcuts component to stop their propagation.
-
-	/* eslint-disable jsx-a11y/no-static-element-interactions */
-	return (
-		<>
-			<div
-				key="toolbar"
-				id={ `toolbar-${ clientId }` }
-				className="block-library-classic__toolbar"
-				onClick={ focus }
-				data-placeholder={ __( 'Classic' ) }
-				onKeyDown={ onToolbarKeyDown }
-			/>
-			<div
-				key="editor"
-				id={ `editor-${ clientId }` }
-				className="wp-block-freeform block-library-rich-text__tinymce"
-			/>
+					/>
+				) }
+			</div>
 		</>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions */
 }