@wordpress/block-library 9.38.0 → 9.39.0

package/src/comment-reply-link/block.json

@@ -8,11 +8,6 @@
 	"description": "Displays a link to reply to a comment.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],
-	"attributes": {
-		"textAlign": {
-			"type": "string"
-		}
-	},
 	"supports": {
 		"anchor": true,
 		"color": {
@@ -35,6 +30,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/comment-reply-link/deprecated.js

@@ -0,0 +1,56 @@
+/**
+ * Internal dependencies
+ */
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+	},
+	usesContext: [ 'commentId' ],
+	supports: {
+		anchor: true,
+		color: {
+			gradients: true,
+			link: true,
+			text: false,
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+		},
+		html: false,
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+};
+
+export default [ v1 ];

package/src/comment-reply-link/edit.js

@@ -1,49 +1,20 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	AlignmentControl,
-	BlockControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
- * Renders the `core/comment-reply-link` block on the editor.
- *
- * @param {Object} props                      React props.
- * @param {Object} props.setAttributes        Callback for updating block attributes.
- * @param {Object} props.attributes           Block attributes.
- * @param {string} props.attributes.textAlign The `textAlign` attribute.
- *
- * @return {JSX.Element} React element.
+ * Internal dependencies
  */
-function Edit( { setAttributes, attributes: { textAlign } } ) {
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-	const blockControls = (
-		<BlockControls group="block">
-			<AlignmentControl
-				value={ textAlign }
-				onChange={ ( newAlign ) =>
-					setAttributes( { textAlign: newAlign } )
-				}
-			/>
-		</BlockControls>
-	);
+function Edit( props ) {
+	useDeprecatedTextAlign( props );
+	const blockProps = useBlockProps();
 
 	return (
 		<>
-			{ blockControls }
 			<div { ...blockProps }>
 				<a
 					href="#comment-reply-pseudo-link"

package/src/comment-reply-link/index.js

@@ -9,6 +9,7 @@ import { commentReplyLink as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -16,6 +17,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	icon,
+	deprecated,
 	example: {},
 };
 

package/src/comments-title/block.json

@@ -9,9 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"showPostTitle": {
 			"type": "boolean",
 			"default": true
@@ -52,6 +49,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/comments-title/deprecated.js

@@ -1,32 +1,162 @@
 /**
  * Internal dependencies
  */
-import metadata from './block.json';
+import migrateTextAlign from '../utils/migrate-text-align';
 
-const { attributes, supports } = metadata;
+const v2 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		showPostTitle: {
+			type: 'boolean',
+			default: true,
+		},
+		showCommentsCount: {
+			type: 'boolean',
+			default: true,
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		html: false,
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+		},
+		color: {
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				__experimentalFontFamily: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	migrate: ( oldAttributes ) => {
+		const { singleCommentLabel, multipleCommentsLabel, ...newAttributes } =
+			oldAttributes;
+		return migrateTextAlign( newAttributes );
+	},
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+	save: () => null,
+};
 
-export default [
-	{
-		attributes: {
-			...attributes,
-			singleCommentLabel: {
-				type: 'string',
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		showPostTitle: {
+			type: 'boolean',
+			default: true,
+		},
+		showCommentsCount: {
+			type: 'boolean',
+			default: true,
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+		singleCommentLabel: {
+			type: 'string',
+		},
+		multipleCommentsLabel: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		html: false,
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+		},
+		color: {
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
 			},
-			multipleCommentsLabel: {
-				type: 'string',
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				__experimentalFontFamily: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
 			},
 		},
-		supports,
-		migrate: ( oldAttributes ) => {
-			const {
-				singleCommentLabel,
-				multipleCommentsLabel,
-				...newAttributes
-			} = oldAttributes;
-			return newAttributes;
-		},
-		isEligible: ( { multipleCommentsLabel, singleCommentLabel } ) =>
-			multipleCommentsLabel || singleCommentLabel,
-		save: () => null,
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	migrate: ( oldAttributes ) => {
+		const { singleCommentLabel, multipleCommentsLabel, ...newAttributes } =
+			oldAttributes;
+		return migrateTextAlign( newAttributes );
 	},
-];
+	isEligible: ( { multipleCommentsLabel, singleCommentLabel } ) =>
+		multipleCommentsLabel || singleCommentLabel,
+	save: () => null,
+};
+
+export default [ v2, v1 ];

package/src/comments-title/edit.js

@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import {
-	AlignmentControl,
 	BlockControls,
 	useBlockProps,
 	InspectorControls,
@@ -30,27 +24,23 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-export default function Edit( {
-	attributes: {
-		textAlign,
+export default function Edit( props ) {
+	useDeprecatedTextAlign( props );
+	const { attributes, setAttributes, context } = props;
+	const {
 		showPostTitle,
 		showCommentsCount,
-		level,
+		level = 2,
 		levelOptions,
-	},
-	setAttributes,
-	context: { postType, postId },
-} ) {
+	} = attributes;
+	const { postId, postType } = context;
 	const TagName = 'h' + level;
 	const [ commentsCount, setCommentsCount ] = useState();
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	const isSiteEditor = typeof postId === 'undefined';
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+	const blockProps = useBlockProps();
 
 	const {
 		threadCommentsDepth,
@@ -104,12 +94,6 @@ export default function Edit( {
 
 	const blockControls = (
 		<BlockControls group="block">
-			<AlignmentControl
-				value={ textAlign }
-				onChange={ ( newAlign ) =>
-					setAttributes( { textAlign: newAlign } )
-				}
-			/>
 			<HeadingLevelDropdown
 				value={ level }
 				options={ levelOptions }

package/src/cover/edit/block-controls.js

@@ -17,7 +17,7 @@ import { link } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { ALLOWED_MEDIA_TYPES } from '../shared';
+import { ALLOWED_MEDIA_TYPES, EMBED_VIDEO_BACKGROUND_TYPE } from '../shared';
 import { unlock } from '../../lock-unlock';
 import EmbedVideoUrlInput from './embed-video-url-input';
 
@@ -33,8 +33,14 @@ export default function CoverBlockControls( {
 	onSelectEmbedUrl,
 	blockEditingMode,
 } ) {
-	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
-		attributes;
+	const {
+		contentPosition,
+		id,
+		useFeaturedImage,
+		minHeight,
+		minHeightUnit,
+		backgroundType,
+	} = attributes;
 	const { hasInnerBlocks, url } = currentSettings;
 
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
@@ -133,6 +139,11 @@ export default function CoverBlockControls( {
 						onSelectEmbedUrl( embedUrl );
 					} }
 					onClose={ () => setIsEmbedUrlInputOpen( false ) }
+					initialUrl={
+						backgroundType === EMBED_VIDEO_BACKGROUND_TYPE
+							? url
+							: ''
+					}
 				/>
 			) }
 		</>

package/src/cover/edit/embed-video-url-input.js

@@ -15,8 +15,12 @@ import { __ } from '@wordpress/i18n';
  */
 import { isValidVideoEmbedUrl } from '../embed-video-utils';
 
-export default function EmbedVideoUrlInput( { onSubmit, onClose } ) {
-	const [ url, setUrl ] = useState( '' );
+export default function EmbedVideoUrlInput( {
+	onSubmit,
+	onClose,
+	initialUrl = '',
+} ) {
+	const [ url, setUrl ] = useState( initialUrl );
 	const [ error, setError ] = useState( '' );
 
 	const handleConfirm = () => {

package/src/cover/edit/inspector-controls.js

@@ -178,9 +178,7 @@ export default function CoverInspectorControls( {
 		} );
 	};
 
-	const showFocalPointPicker =
-		isVideoBackground ||
-		( isImageBackground && ( ! hasParallax || isRepeated ) );
+	const showFocalPointPicker = isVideoBackground || isImageBackground;
 
 	const imperativeFocalPointPreview = ( value ) => {
 		const [ styleOfRef, property ] = mediaElement.current

package/src/details/index.js

@@ -50,6 +50,10 @@ export const settings = {
 			return customName || summary;
 		}
 
+		if ( context === 'breadcrumb' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
 			return ! hasSummary
 				? __( 'Details. Empty.' )

package/src/editor.scss

@@ -46,7 +46,8 @@
 @use "./social-links/editor.scss" as *;
 @use "./spacer/editor.scss" as *;
 @use "./table/editor.scss" as *;
-@use "./tabs/editor.scss" as *;
+@use "./tabs-menu/editor.scss" as *;
+@use "./tabs-menu-item/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;
 @use "./text-columns/editor.scss" as *;

package/src/embed/test/index.js

@@ -18,6 +18,7 @@ import {
 	getEmbedInfoByProvider,
 	removeAspectRatioClasses,
 	hasAspectRatioClass,
+	hasInlineResponsivePadding,
 } from '../util';
 import { embedInstagramIcon } from '../icons';
 import variations from '../variations';
@@ -30,6 +31,7 @@ jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) );
 describe( 'utils', () => {
 	beforeAll( () => {
 		registerBlockType( DEFAULT_EMBED_BLOCK, {
+			apiVersion: 3,
 			title: 'Embed',
 			category: 'embed',
 			attributes,
@@ -101,7 +103,53 @@ describe( 'utils', () => {
 				)
 			).toEqual( expected );
 		} );
+
+		it( 'should not add aspect ratio classes when HTML already contains responsive wrapper with padding-bottom', () => {
+			// Flickr embeds come with their own responsive wrapper
+			const html =
+				'<div style="padding-bottom: 56.25%;"><iframe width="1024" height="576"></iframe></div>';
+			const existingClassNames = 'wp-block-embed';
+			// Should not add wp-embed-aspect-16-9 and wp-has-aspect-ratio
+			// because the HTML already has responsive styling
+			expect( getClassNames( html, existingClassNames, true ) ).toEqual(
+				existingClassNames
+			);
+		} );
+
+		it( 'should not add aspect ratio classes when HTML already contains responsive wrapper with padding-top', () => {
+			const html =
+				'<div style="padding-top: 56.25%;"><iframe width="1024" height="576"></iframe></div>';
+			const existingClassNames = 'wp-block-embed';
+			expect( getClassNames( html, existingClassNames, true ) ).toEqual(
+				existingClassNames
+			);
+		} );
 	} );
+	describe( 'hasInlineResponsivePadding', () => {
+		it( 'should return true when HTML contains padding-bottom percentage', () => {
+			const html =
+				'<div style="padding-bottom: 56.25%;"><iframe></iframe></div>';
+			expect( hasInlineResponsivePadding( html ) ).toBe( true );
+		} );
+
+		it( 'should return true when HTML contains padding-top percentage', () => {
+			const html =
+				'<div style="padding-top: 75%;"><iframe></iframe></div>';
+			expect( hasInlineResponsivePadding( html ) ).toBe( true );
+		} );
+
+		it( 'should return false when HTML has no padding percentage', () => {
+			const html = '<iframe width="640" height="360"></iframe>';
+			expect( hasInlineResponsivePadding( html ) ).toBe( false );
+		} );
+
+		it( 'should return false when padding uses pixels instead of percentage', () => {
+			const html =
+				'<div style="padding-bottom: 20px;"><iframe></iframe></div>';
+			expect( hasInlineResponsivePadding( html ) ).toBe( false );
+		} );
+	} );
+
 	describe( 'hasAspectRatioClass', () => {
 		it( 'should return false if an aspect ratio class does not exist', () => {
 			const existingClassNames = 'wp-block-embed is-type-video';
@@ -148,6 +196,7 @@ describe( 'utils', () => {
 				).toBeUndefined();
 
 				registerBlockType( DEFAULT_EMBED_BLOCK, {
+					apiVersion: 3,
 					title: 'Embed',
 					category: 'embed',
 					attributes,

package/src/embed/util.js

@@ -195,6 +195,21 @@ export const removeAspectRatioClasses = ( existingClassNames ) => {
 	return outputClassNames.trim();
 };
 
+/**
+ * Checks if HTML already contains responsive aspect ratio styling.
+ * Some embed providers (like Flickr) include their own responsive wrapper
+ * with padding-bottom or padding-top percentages for aspect ratio.
+ *
+ * @param {string} html The embed HTML to check.
+ * @return {boolean} True if the HTML already has responsive styling.
+ */
+export function hasInlineResponsivePadding( html ) {
+	// Check for padding-bottom or padding-top with percentage values in style attributes
+	// This pattern matches: padding-bottom: 56.25%; or padding-top: 50%; etc.
+	const paddingPattern = /padding-(top|bottom)\s*:\s*[\d.]+%/i;
+	return paddingPattern.test( html );
+}
+
 /**
  * Returns class names with any relevant responsive aspect ratio names.
  *
@@ -212,6 +227,12 @@ export function getClassNames(
 		return removeAspectRatioClasses( existingClassNames );
 	}
 
+	// If the embed HTML already contains responsive wrapper styling (like Flickr),
+	// don't add our own aspect ratio classes to avoid double padding.
+	if ( hasInlineResponsivePadding( html ) ) {
+		return removeAspectRatioClasses( existingClassNames );
+	}
+
 	const previewDocument = document.implementation.createHTMLDocument( '' );
 	previewDocument.body.innerHTML = html;
 	const iframe = previewDocument.body.querySelector( 'iframe' );

package/src/freeform/block.json

@@ -18,7 +18,8 @@
 		"lock": false,
 		"reusable": false,
 		"renaming": false,
-		"visibility": false
+		"visibility": false,
+		"customCSS": false
 	},
 	"editorStyle": "wp-block-freeform-editor"
 }

package/src/gallery/style.scss

@@ -62,7 +62,7 @@ figure.wp-block-gallery.has-nested-images {
 		&:has(figcaption)::before {
 			content: "";
 			height: 100%;
-			max-height: 40%;
+			max-height: 3em;
 			pointer-events: none;
 
 			// Blur the background under the gradient scrim.

package/src/heading/index.js

@@ -48,6 +48,10 @@ export const settings = {
 			return customName || content;
 		}
 
+		if ( context === 'breadcrumb' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
 			return ! hasContent
 				? sprintf(

package/src/html/block.json

@@ -20,7 +20,8 @@
 		"html": false,
 		"interactivity": {
 			"clientNavigation": true
-		}
+		},
+		"customCSS": false
 	},
 	"editorStyle": "wp-block-html-editor"
 }