@wordpress/block-library 9.37.2-next.ba3aee3a2.0 → 9.38.0

package/src/heading/deprecated.js

@@ -12,6 +12,11 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import migrateTextAlignAttributeToBlockSupport from '../utils/migrate-text-align';
+
 const blockSupports = {
 	className: false,
 	anchor: true,
@@ -75,7 +80,9 @@ const v1 = {
 		},
 	},
 	migrate: ( attributes ) =>
-		migrateCustomColors( migrateTextAlign( attributes ) ),
+		migrateTextAlignAttributeToBlockSupport(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, level, content, textColor, customTextColor } =
 			attributes;
@@ -111,7 +118,9 @@ const v2 = {
 		},
 	},
 	migrate: ( attributes ) =>
-		migrateCustomColors( migrateTextAlign( attributes ) ),
+		migrateTextAlignAttributeToBlockSupport(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, content, customTextColor, level, textColor } =
 			attributes;
@@ -149,7 +158,9 @@ const v3 = {
 		},
 	},
 	migrate: ( attributes ) =>
-		migrateCustomColors( migrateTextAlign( attributes ) ),
+		migrateTextAlignAttributeToBlockSupport(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, content, customTextColor, level, textColor } =
 			attributes;
@@ -195,7 +206,10 @@ const v4 = {
 	},
 	attributes: blockAttributes,
 	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
-	migrate: migrateTextAlign,
+	migrate: ( attributes ) =>
+		migrateTextAlignAttributeToBlockSupport(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, content, level } = attributes;
 		const TagName = 'h' + level;
@@ -283,8 +297,107 @@ const v5 = {
 			</TagName>
 		);
 	},
+	migrate: ( attributes ) =>
+		migrateTextAlignAttributeToBlockSupport(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
+};
+
+const v6 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: true,
+		splitting: true,
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalWritingMode: true,
+			fitText: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSlashInserter: true,
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'h1,h2,h3,h4,h5,h6',
+			default: '',
+			role: 'content',
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	save( { attributes } ) {
+		const { textAlign, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+	migrate: ( attributes ) =>
+		migrateTextAlignAttributeToBlockSupport(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
 };
 
-const deprecated = [ v5, v4, v3, v2, v1 ];
+const deprecated = [ v6, v5, v4, v3, v2, v1 ];
 
 export default deprecated;

package/src/heading/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -10,36 +5,26 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, Platform } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	AlignmentControl,
-	BlockControls,
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
-	useBlockEditingMode,
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { generateAnchor, setAnchor } from './autogenerate-anchors';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-function HeadingEdit( {
-	attributes,
-	setAttributes,
-	mergeBlocks,
-	onReplace,
-	style,
-	clientId,
-} ) {
-	const { textAlign, content, level, placeholder, anchor } = attributes;
+function HeadingEdit( props ) {
+	const { attributes, setAttributes, mergeBlocks, onReplace, clientId } =
+		props;
+	useDeprecatedTextAlign( props );
+	const { style, content, level, placeholder, anchor } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
 		style,
 	} );
-	const blockEditingMode = useBlockEditingMode();
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
 		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
@@ -90,16 +75,6 @@ function HeadingEdit( {
 
 	return (
 		<>
-			{ blockEditingMode === 'default' && (
-				<BlockControls group="block">
-					<AlignmentControl
-						value={ textAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { textAlign: nextAlign } );
-						} }
-					/>
-				</BlockControls>
-			) }
 			<RichText
 				identifier="content"
 				tagName={ tagName }
@@ -109,7 +84,6 @@ function HeadingEdit( {
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
 				placeholder={ placeholder || __( 'Heading' ) }
-				textAlign={ textAlign }
 				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
 				{ ...blockProps }
 			/>

package/src/heading/edit.native.js

@@ -32,7 +32,14 @@ function HeadingEdit( {
 	style,
 	clientId,
 } ) {
-	const { textAlign, content, level, placeholder, anchor } = attributes;
+	const {
+		content,
+		level,
+		placeholder,
+		anchor,
+		style: attributesStyle,
+	} = attributes;
+	const textAlign = attributesStyle?.typography?.textAlign;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
 		className: clsx( {
@@ -100,7 +107,15 @@ function HeadingEdit( {
 				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
+						setAttributes( {
+							style: {
+								...attributesStyle,
+								typography: {
+									...attributesStyle?.typography,
+									textAlign: nextAlign,
+								},
+							},
+						} );
 					} }
 				/>
 			</BlockControls>

package/src/heading/index.js

@@ -82,7 +82,8 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		{
 			id: 'content',
 			label: __( 'Content' ),
-			type: 'richtext',
+			type: 'text',
+			Edit: 'rich-text', // TODO: replace with custom component
 		},
 	];
 	settings[ formKey ] = {

package/src/heading/save.js

@@ -1,23 +1,14 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { textAlign, content, level } = attributes;
+	const { content, level } = attributes;
 	const TagName = 'h' + level;
 
-	const className = clsx( {
-		[ `has-text-align-${ textAlign }` ]: textAlign,
-	} );
-
 	return (
-		<TagName { ...useBlockProps.save( { className } ) }>
+		<TagName { ...useBlockProps.save() }>
 			<RichText.Content value={ content } />
 		</TagName>
 	);

package/src/heading/transforms.js

@@ -29,7 +29,13 @@ const transforms = {
 						),
 						content,
 						anchor,
-						textAlign,
+						...( textAlign && {
+							style: {
+								typography: {
+									textAlign,
+								},
+							},
+						} ),
 					} );
 				} ),
 		},
@@ -64,7 +70,13 @@ const transforms = {
 					textAlign === 'center' ||
 					textAlign === 'right'
 				) {
-					attributes.align = textAlign;
+					attributes.style = {
+						...attributes.style,
+						typography: {
+							...attributes.style?.typography,
+							textAlign,
+						},
+					};
 				}
 
 				return createBlock( 'core/heading', attributes );
@@ -93,7 +105,8 @@ const transforms = {
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
 				attributes.map( ( _attributes ) => {
-					const { content, textAlign } = _attributes;
+					const { content, style } = _attributes;
+					const textAlign = style?.typography?.textAlign;
 					return createBlock( 'core/paragraph', {
 						...getTransformedAttributes(
 							_attributes,

package/src/image/image.js

@@ -788,14 +788,14 @@ export default function Image( {
 					/>
 				</BlockControls>
 			) }
-			{ ! hasDataFormBlockFields && (
+			{ ! hasDataFormBlockFields && isSingleSelected && (
 				<InspectorControls group="content">
 					<ToolsPanel
 						label={ __( 'Media' ) }
 						resetAll={ () => onSelectImage( undefined ) }
 						dropdownMenuProps={ dropdownMenuProps }
 					>
-						{ isSingleSelected && ! lockUrlControls && (
+						{ ! lockUrlControls && (
 							<ToolsPanelItem
 								label={ __( 'Image' ) }
 								hasValue={ () => !! url }
@@ -822,47 +822,45 @@ export default function Image( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ isSingleSelected && (
-							<ToolsPanelItem
+						<ToolsPanelItem
+							label={ __( 'Alternative text' ) }
+							isShownByDefault
+							hasValue={ () => !! alt }
+							onDeselect={ () =>
+								setAttributes( { alt: undefined } )
+							}
+						>
+							<TextareaControl
 								label={ __( 'Alternative text' ) }
-								isShownByDefault
-								hasValue={ () => !! alt }
-								onDeselect={ () =>
-									setAttributes( { alt: undefined } )
-								}
-							>
-								<TextareaControl
-									label={ __( 'Alternative text' ) }
-									value={ alt || '' }
-									onChange={ updateAlt }
-									readOnly={ lockAltControls }
-									help={
-										lockAltControls ? (
-											<>{ lockAltControlsMessage }</>
-										) : (
-											<>
-												<ExternalLink
-													href={
-														// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-														__(
-															'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-														)
-													}
-												>
-													{ __(
-														'Describe the purpose of the image.'
-													) }
-												</ExternalLink>
-												<br />
+								value={ alt || '' }
+								onChange={ updateAlt }
+								readOnly={ lockAltControls }
+								help={
+									lockAltControls ? (
+										<>{ lockAltControlsMessage }</>
+									) : (
+										<>
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
-													'Leave empty if decorative.'
+													'Describe the purpose of the image.'
 												) }
-											</>
-										)
-									}
-								/>
-							</ToolsPanelItem>
-						) }
+											</ExternalLink>
+											<br />
+											{ __(
+												'Leave empty if decorative.'
+											) }
+										</>
+									)
+								}
+							/>
+						</ToolsPanelItem>
 					</ToolsPanel>
 				</InspectorControls>
 			) }

package/src/image/index.js

@@ -72,32 +72,45 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 			id: 'image',
 			label: __( 'Image' ),
 			type: 'media',
-			mapping: {
-				id: 'id',
-				url: 'url',
-				caption: 'caption',
-				alt: 'alt',
-			},
-			args: {
+			Edit: {
+				control: 'media', // TODO: replace with custom component
 				allowedTypes: [ 'image' ],
 				multiple: false,
 			},
+			getValue: ( { item } ) => ( {
+				id: item.id,
+				url: item.url,
+				alt: item.alt,
+				caption: item.caption,
+			} ),
+			setValue: ( { value } ) => ( {
+				id: value.id,
+				url: value.url,
+				alt: value.alt,
+				caption: value.caption,
+			} ),
 		},
 		{
 			id: 'link',
 			label: __( 'Link' ),
-			type: 'link',
-			mapping: {
-				url: 'href',
-				rel: 'rel',
-				linkTarget: 'linkTarget',
-				destination: 'linkDestination',
-			},
+			type: 'url',
+			Edit: 'link', // TODO: replace with custom component
+			getValue: ( { item } ) => ( {
+				url: item.href,
+				rel: item.rel,
+				linkTarget: item.linkTarget,
+			} ),
+			setValue: ( { value } ) => ( {
+				href: value.url,
+				rel: value.rel,
+				linkTarget: value.linkTarget,
+			} ),
 		},
 		{
 			id: 'caption',
 			label: __( 'Caption' ),
-			type: 'richtext',
+			type: 'text',
+			Edit: 'rich-text', // TODO: replace with custom component
 		},
 		{
 			id: 'alt',
@@ -106,7 +119,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		},
 	];
 	settings[ formKey ] = {
-		fields: [ 'image' ],
+		fields: [ 'image', 'link', 'caption', 'alt' ],
 	};
 }
 

package/src/list-item/index.js

@@ -41,7 +41,8 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		{
 			id: 'content',
 			label: __( 'Content' ),
-			type: 'richtext',
+			type: 'text',
+			Edit: 'rich-text', // TODO: replace with custom component
 		},
 	];
 	settings[ formKey ] = {

package/src/media-text/index.js

@@ -60,30 +60,43 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 			id: 'media',
 			label: __( 'Media' ),
 			type: 'media',
-			mapping: {
-				id: 'mediaId',
-				type: 'mediaType',
-				url: 'mediaUrl',
-				link: 'mediaLink',
-			},
-			args: {
+			Edit: {
+				control: 'media', // TODO: replace with custom component
 				allowedTypes: [ 'image', 'video' ],
 				multiple: false,
 			},
+			getValue: ( { item } ) => ( {
+				id: item.mediaId,
+				url: item.mediaUrl,
+				mediaType: item.mediaType,
+				link: item.mediaLink,
+			} ),
+			setValue: ( { value } ) => ( {
+				mediaId: value.id,
+				mediaUrl: value.url,
+				mediaType: value.mediaType,
+				mediaLink: value.link,
+			} ),
 		},
 		{
 			id: 'link',
 			label: __( 'Link' ),
-			type: 'link',
-			mapping: {
-				url: 'href',
-				rel: 'rel',
-				linkTarget: 'linkTarget',
-			},
+			type: 'url',
+			Edit: 'link', // TODO: replace with custom component
+			getValue: ( { item } ) => ( {
+				url: item.href,
+				rel: item.rel,
+				linkTarget: item.linkTarget,
+			} ),
+			setValue: ( { value } ) => ( {
+				href: value.url,
+				rel: value.rel,
+				linkTarget: value.linkTarget,
+			} ),
 		},
 	];
 	settings[ formKey ] = {
-		fields: [ 'media' ],
+		fields: [ 'media', 'link' ],
 	};
 }
 

package/src/more/block.json

@@ -23,6 +23,7 @@
 		"className": false,
 		"html": false,
 		"multiple": false,
+		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/more/index.js

@@ -45,7 +45,8 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		{
 			id: 'customText',
 			label: __( 'Content' ),
-			type: 'richtext',
+			type: 'text',
+			Edit: 'rich-text', // TODO: replace with custom component
 		},
 	];
 	settings[ formKey ] = {

package/src/navigation/edit/index.js

@@ -130,6 +130,7 @@ function ColorTools( {
 	setOverlayBackgroundColor,
 	clientId,
 	navRef,
+	hasCustomOverlay,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
@@ -201,7 +202,9 @@ function ColorTools( {
 					},
 					{
 						colorValue: overlayTextColor.color,
-						label: __( 'Submenu & overlay text' ),
+						label: hasCustomOverlay
+							? __( 'Submenu text' )
+							: __( 'Submenu & overlay text' ),
 						onColorChange: setOverlayTextColor,
 						resetAllFilter: () => setOverlayTextColor(),
 						clearable: true,
@@ -209,7 +212,9 @@ function ColorTools( {
 					},
 					{
 						colorValue: overlayBackgroundColor.color,
-						label: __( 'Submenu & overlay background' ),
+						label: hasCustomOverlay
+							? __( 'Submenu background' )
+							: __( 'Submenu & overlay background' ),
 						onColorChange: setOverlayBackgroundColor,
 						resetAllFilter: () => setOverlayBackgroundColor(),
 						clearable: true,
@@ -254,7 +259,6 @@ function Navigation( {
 
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
-	hasSubmenuIndicatorSetting = true,
 	customPlaceholder: CustomPlaceholder = null,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
@@ -655,7 +659,7 @@ function Navigation( {
 	const stylingInspectorControls = (
 		<>
 			<InspectorControls>
-				{ hasSubmenuIndicatorSetting && (
+				{ ( ! isOverlayExperimentEnabled || hasSubmenus ) && (
 					<ToolsPanel
 						label={ __( 'Display' ) }
 						resetAll={ () => {
@@ -819,6 +823,7 @@ function Navigation( {
 					setOverlayBackgroundColor={ setOverlayBackgroundColor }
 					clientId={ clientId }
 					navRef={ navRef }
+					hasCustomOverlay={ !! overlay }
 				/>
 			</InspectorControls>
 		</>