@wordpress/block-library 9.35.0 → 9.35.1-next.dc3f6d3c1.0

package/src/file/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 
 /**
@@ -32,4 +32,38 @@ export const settings = {
 	save,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'File' ),
+			type: 'Media',
+			shownByDefault: true,
+			mapping: {
+				id: 'id',
+				src: 'href',
+			},
+			args: {
+				allowedTypes: [],
+				multiple: false,
+			},
+		},
+		{
+			label: __( 'Filename' ),
+			type: 'RichText',
+			shownByDefault: false,
+			mapping: {
+				value: 'fileName',
+			},
+		},
+		{
+			label: __( 'Button Text' ),
+			type: 'RichText',
+			shownByDefault: false,
+			mapping: {
+				value: 'downloadButtonText',
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/heading/index.js

@@ -69,4 +69,17 @@ export const settings = {
 	variations,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Content' ),
+			type: 'RichText',
+			shownByDefault: true,
+			mapping: {
+				value: 'content',
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/heading/test/__snapshots__/transforms.native.js.snap

@@ -32,12 +32,6 @@ exports[`Heading block transforms to Paragraph block 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Heading block transforms to Pullquote block 1`] = `
-"<!-- wp:pullquote -->
-<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
-<!-- /wp:pullquote -->"
-`;
-
 exports[`Heading block transforms to Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:heading -->

package/src/heading/test/transforms.native.js

@@ -16,11 +16,7 @@ const initialHtml = `
 <!-- /wp:heading -->`;
 
 const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
-const blockTransforms = [
-	'Paragraph',
-	'Pullquote',
-	...transformsWithInnerBlocks,
-];
+const blockTransforms = [ 'Paragraph', ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 

package/src/html/modal.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	Modal,
@@ -40,32 +40,17 @@ export default function HTMLEditModal( {
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
 
 	// Check if user has permission to save scripts and get editor styles
-	const { canUserUseUnfilteredHTML, editorStyles } = useSelect(
-		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-			return {
-				canUserUseUnfilteredHTML:
-					settings.__experimentalCanUserUseUnfilteredHTML,
-				editorStyles: settings.styles,
-			};
-		},
-		[]
-	);
+	const { canUserUseUnfilteredHTML } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			canUserUseUnfilteredHTML:
+				settings.__experimentalCanUserUseUnfilteredHTML,
+		};
+	}, [] );
 
 	// Show JS tab if user has permission OR if block contains JavaScript
 	const shouldShowJsTab = canUserUseUnfilteredHTML || js.trim() !== '';
 
-	// Combine all editor styles to inject into modal
-	const styleContent = useMemo( () => {
-		if ( ! editorStyles ) {
-			return '';
-		}
-		return editorStyles
-			.filter( ( style ) => style.css )
-			.map( ( style ) => style.css )
-			.join( '\n' );
-	}, [ editorStyles ] );
-
 	if ( ! isOpen ) {
 		return null;
 	}
@@ -131,11 +116,6 @@ export default function HTMLEditModal( {
 				isFullScreen={ isFullscreen }
 				__experimentalHideHeader
 			>
-				{ styleContent && (
-					<style
-						dangerouslySetInnerHTML={ { __html: styleContent } }
-					/>
-				) }
 				<Tabs orientation="horizontal" defaultTabId="html">
 					<VStack spacing={ 4 } style={ { height: '100%' } }>
 						<HStack justify="space-between">

package/src/image/index.js

@@ -62,4 +62,51 @@ export const settings = {
 	deprecated,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Image' ),
+			type: 'Media',
+			shownByDefault: true,
+			mapping: {
+				id: 'id',
+				src: 'url',
+				caption: 'caption',
+				alt: 'alt',
+			},
+			args: {
+				allowedTypes: [ 'image' ],
+				multiple: false,
+			},
+		},
+		{
+			label: __( 'Link' ),
+			type: 'Link',
+			shownByDefault: false,
+			mapping: {
+				href: 'href',
+				rel: 'rel',
+				target: 'linkTarget',
+				destination: 'linkDestination',
+			},
+		},
+		{
+			label: __( 'Caption' ),
+			type: 'RichText',
+			shownByDefault: false,
+			mapping: {
+				value: 'caption',
+			},
+		},
+		{
+			label: __( 'Alt text' ),
+			type: 'PlainText',
+			shownByDefault: false,
+			mapping: {
+				value: 'alt',
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/list-item/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { listItem as icon } from '@wordpress/icons';
 import { privateApis } from '@wordpress/block-editor';
 
@@ -32,4 +33,17 @@ export const settings = {
 	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Content' ),
+			type: 'RichText',
+			shownByDefault: true,
+			mapping: {
+				value: 'content',
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/media-text/index.js

@@ -50,4 +50,33 @@ export const settings = {
 	deprecated,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Media' ),
+			type: 'Media',
+			shownByDefault: true,
+			mapping: {
+				id: 'mediaId',
+				type: 'mediaType',
+				src: 'mediaUrl',
+			},
+			args: {
+				allowedTypes: [ 'image', 'video' ],
+				multiple: false,
+			},
+		},
+		{
+			label: __( 'Link' ),
+			type: 'Link',
+			shownByDefault: false,
+			mapping: {
+				href: 'href',
+				rel: 'rel',
+				target: 'linkTarget',
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/more/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { more as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -35,4 +36,17 @@ export const settings = {
 	save,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Content' ),
+			type: 'RichText',
+			shownByDefault: true,
+			mapping: {
+				value: 'customText',
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/navigation/block.json

@@ -105,6 +105,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"ariaLabel": true,
+		"contentRole": true,
 		"html": false,
 		"inserter": true,
 		"typography": {
@@ -138,8 +139,7 @@
 			}
 		},
 		"interactivity": true,
-		"renaming": false,
-		"contentRole": true
+		"renaming": false
 	},
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"

package/src/navigation-link/block.json

@@ -34,7 +34,8 @@
 			"default": false
 		},
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"title": {
 			"type": "string"

package/src/navigation-link/edit.js

@@ -8,9 +8,13 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InspectorControls,
@@ -26,13 +30,19 @@ import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs, usePrevious } from '@wordpress/compose';
+import { useMergeRefs, usePrevious, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { getColors } from '../navigation/edit/utils';
-import { Controls, LinkUI, updateAttributes, useEntityBinding } from './shared';
+import {
+	Controls,
+	LinkUI,
+	updateAttributes,
+	useEntityBinding,
+	MissingEntityHelpText,
+} from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -394,6 +404,12 @@ export default function NavigationLinkEdit( {
 		}
 	}
 
+	const instanceId = useInstanceId( NavigationLinkEdit );
+	const hasMissingEntity = hasUrlBinding && ! isBoundEntityAvailable;
+	const missingEntityDescriptionId = hasMissingEntity
+		? sprintf( 'navigation-link-edit-%d-desc', instanceId )
+		: undefined;
+
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
 		className: clsx( 'wp-block-navigation-item', {
@@ -407,6 +423,8 @@ export default function NavigationLinkEdit( {
 			[ getColorClassName( 'background-color', backgroundColor ) ]:
 				!! backgroundColor,
 		} ),
+		'aria-describedby': missingEntityDescriptionId,
+		'aria-invalid': hasMissingEntity,
 		style: {
 			color: ! textColor && customTextColor,
 			backgroundColor: ! backgroundColor && customBackgroundColor,
@@ -482,6 +500,11 @@ export default function NavigationLinkEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
+				{ hasMissingEntity && (
+					<VisuallyHidden id={ missingEntityDescriptionId }>
+						<MissingEntityHelpText type={ type } kind={ kind } />
+					</VisuallyHidden>
+				) }
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }

package/src/navigation-link/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 import { customLink as linkIcon } from '@wordpress/icons';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { addFilter } from '@wordpress/hooks';
@@ -89,6 +89,29 @@ export const settings = {
 	transforms,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Label' ),
+			type: 'RichText',
+			shownByDefault: true,
+			mapping: {
+				value: 'label',
+			},
+		},
+		{
+			label: __( 'Link' ),
+			type: 'Link',
+			shownByDefault: false,
+			mapping: {
+				href: 'url',
+				rel: 'rel',
+				// TODO - opens in new tab? id?
+			},
+		},
+	];
+}
+
 export const init = () => {
 	addFilter(
 		'blocks.registerBlockType',

package/src/navigation-link/shared/controls.js

@@ -221,7 +221,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 					} }
 					help={
 						hasUrlBinding && ! isBoundEntityAvailable ? (
-							<MissingEntityHelpText
+							<MissingEntityHelp
 								id={ helpTextId }
 								type={ attributes.type }
 								kind={ attributes.kind }
@@ -327,7 +327,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
  * @param {string} props.kind - The entity kind
  * @return {string} Help text for the bound URL
  */
-function BindingHelpText( { type, kind } ) {
+export function BindingHelpText( { type, kind } ) {
 	const entityType = getEntityTypeName( type, kind );
 	return sprintf(
 		/* translators: %s is the entity type (e.g., "page", "post", "category") */
@@ -340,27 +340,23 @@ function BindingHelpText( { type, kind } ) {
  * Component to display error help text for missing entity bindings.
  *
  * @param {Object} props      - Component props
- * @param {string} props.id   - ID for the help text element (for aria-describedby)
  * @param {string} props.type - The entity type
  * @param {string} props.kind - The entity kind
  * @return {JSX.Element} Error help text component
  */
-function MissingEntityHelpText( { id, type, kind } ) {
+export function MissingEntityHelpText( { type, kind } ) {
 	const entityType = getEntityTypeName( type, kind );
+	return sprintf(
+		/* translators: %s is the entity type (e.g., "page", "post", "category") */
+		__( 'Synced %s is missing. Please update or remove this link.' ),
+		entityType
+	);
+}
+
+function MissingEntityHelp( { id, type, kind } ) {
 	return (
-		<span
-			id={ id }
-			className="navigation-link-control__error-text"
-			role="alert"
-			aria-live="polite"
-		>
-			{ sprintf(
-				/* translators: %s is the entity type (e.g., "page", "post", "category") */
-				__(
-					'Synced %s is missing. Please update or remove this link.'
-				),
-				entityType
-			) }
+		<span id={ id } className="navigation-link-control__error-text">
+			<MissingEntityHelpText type={ type } kind={ kind } />
 		</span>
 	);
 }

package/src/navigation-link/shared/index.js

@@ -5,7 +5,7 @@
  * to reduce code duplication and ensure consistent behavior.
  */
 
-export { Controls } from './controls';
+export { Controls, BindingHelpText, MissingEntityHelpText } from './controls';
 export { updateAttributes } from './update-attributes';
 export {
 	useEntityBinding,

package/src/navigation-link/shared/use-entity-binding.js

@@ -98,10 +98,13 @@ export function useEntityBinding( { clientId, attributes } ) {
 
 			// Use the correct entity type based on kind.
 			const entityType = isTaxonomy ? 'taxonomy' : 'postType';
-			const entityRecord = getEntityRecord( entityType, type, id );
+			// Convert 'tag' back to 'post_tag' for the API call
+			// (it was converted from 'post_tag' to 'tag' for storage in updateAttributes)
+			const typeForAPI = type === 'tag' ? 'post_tag' : type;
+			const entityRecord = getEntityRecord( entityType, typeForAPI, id );
 			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
 				entityType,
-				type,
+				typeForAPI,
 				id,
 			] );
 

package/src/navigation-submenu/block.json

@@ -29,7 +29,8 @@
 			"default": false
 		},
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"title": {
 			"type": "string"

package/src/navigation-submenu/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { page, addSubmenu } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -48,4 +48,27 @@ export const settings = {
 	transforms,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Label' ),
+			type: 'RichText',
+			shownByDefault: true,
+			mapping: {
+				value: 'label',
+			},
+		},
+		{
+			label: __( 'Link' ),
+			type: 'Link',
+			shownByDefault: false,
+			mapping: {
+				href: 'url',
+				rel: 'rel',
+				// TODO - opens in new tab? id?
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/paragraph/index.js

@@ -58,4 +58,17 @@ export const settings = {
 	variations,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings.fields = [
+		{
+			label: __( 'Content' ),
+			type: 'RichText',
+			shownByDefault: true,
+			mapping: {
+				value: 'content',
+			},
+		},
+	];
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/paragraph/test/__snapshots__/transforms.native.js.snap

@@ -44,12 +44,6 @@ exports[`Paragraph block transforms to Preformatted block 1`] = `
 <!-- /wp:preformatted -->"
 `;
 
-exports[`Paragraph block transforms to Pullquote block 1`] = `
-"<!-- wp:pullquote -->
-<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
-<!-- /wp:pullquote -->"
-`;
-
 exports[`Paragraph block transforms to Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:paragraph -->

package/src/paragraph/test/transforms.native.js

@@ -21,7 +21,6 @@ const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
 const blockTransforms = [
 	'Heading',
 	'Preformatted',
-	'Pullquote',
 	'Verse',
 	'Code',
 	...transformsWithInnerBlocks,

package/src/post-comments-count/edit.js

@@ -9,13 +9,11 @@ import clsx from 'clsx';
 import {
 	AlignmentControl,
 	BlockControls,
-	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-import { __ } from '@wordpress/i18n';
 
 export default function PostCommentsCountEdit( {
 	attributes,
@@ -68,13 +66,7 @@ export default function PostCommentsCountEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps } style={ blockStyles }>
-				{ hasPostAndComments ? (
-					commentsCount
-				) : (
-					<Warning>
-						{ __( 'Post Comments Count block: post not found.' ) }
-					</Warning>
-				) }
+				{ hasPostAndComments ? commentsCount : '0' }
 			</div>
 		</>
 	);