@wordpress/block-library 9.38.1-next.v.0 → 9.39.0

package/build-style/tabs-menu-item/editor.css

@@ -0,0 +1,16 @@
+.wp-block-tabs-menu-item.is-selected {
+  outline: 2px solid var(--wp-admin-theme-color, #007cba);
+  outline-offset: 2px;
+}
+
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) {
+  flex-basis: inherit !important;
+  flex-grow: inherit !important;
+}
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) .wp-block-tabs-menu-item {
+  flex-basis: 100% !important;
+}
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item):hover > .wp-block-tabs-menu-item {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}

package/build-style/tabs-menu-item/style-rtl.css

@@ -0,0 +1,34 @@
+.wp-block-tabs-menu-item {
+  box-sizing: border-box;
+  display: block;
+  width: max-content;
+  text-decoration: none;
+  cursor: pointer;
+  flex-basis: inherit !important;
+  flex-grow: inherit !important;
+  margin: 0;
+  padding-block: var(--tab-padding-block, var(--wp--preset--spacing--20, 0.5em));
+  padding-inline: var(--tab-padding-inline, var(--wp--preset--spacing--30, 1em));
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+}
+.wp-block-tabs-menu-item:focus {
+  outline: none;
+}
+.wp-block-tabs-menu-item:focus-visible {
+  outline: 2px solid var(--tab-border-color-active, #000);
+  outline-offset: 2px;
+}
+.wp-block-tabs-menu-item:hover {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
+.wp-block-tabs-menu-item[aria-selected=true], .wp-block-tabs-menu-item.is-active {
+  background-color: var(--custom-tab-active-color, #000) !important;
+  color: var(--custom-tab-active-text-color, #fff) !important;
+}

package/build-style/tabs-menu-item/style.css

@@ -0,0 +1,34 @@
+.wp-block-tabs-menu-item {
+  box-sizing: border-box;
+  display: block;
+  width: max-content;
+  text-decoration: none;
+  cursor: pointer;
+  flex-basis: inherit !important;
+  flex-grow: inherit !important;
+  margin: 0;
+  padding-block: var(--tab-padding-block, var(--wp--preset--spacing--20, 0.5em));
+  padding-inline: var(--tab-padding-inline, var(--wp--preset--spacing--30, 1em));
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+}
+.wp-block-tabs-menu-item:focus {
+  outline: none;
+}
+.wp-block-tabs-menu-item:focus-visible {
+  outline: 2px solid var(--tab-border-color-active, #000);
+  outline-offset: 2px;
+}
+.wp-block-tabs-menu-item:hover {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
+.wp-block-tabs-menu-item[aria-selected=true], .wp-block-tabs-menu-item.is-active {
+  background-color: var(--custom-tab-active-color, #000) !important;
+  color: var(--custom-tab-active-text-color, #fff) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.38.1-next.v.0+b8934fcf9",
+	"version": "9.39.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -93,41 +93,41 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/api-fetch": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/autop": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/base-styles": "^6.14.1-next.v.0+b8934fcf9",
-		"@wordpress/blob": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/block-editor": "^15.11.1-next.v.0+b8934fcf9",
-		"@wordpress/blocks": "^15.11.1-next.v.0+b8934fcf9",
-		"@wordpress/components": "^32.0.2-next.v.0+b8934fcf9",
-		"@wordpress/compose": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/core-data": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/data": "^10.38.1-next.v.0+b8934fcf9",
-		"@wordpress/date": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/deprecated": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/dom": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/element": "^6.38.1-next.v.0+b8934fcf9",
-		"@wordpress/escape-html": "^3.38.1-next.v.0+b8934fcf9",
-		"@wordpress/hooks": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/html-entities": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/i18n": "^6.11.1-next.v.0+b8934fcf9",
-		"@wordpress/icons": "^11.5.1-next.v.0+b8934fcf9",
-		"@wordpress/interactivity": "^6.38.1-next.v.0+b8934fcf9",
-		"@wordpress/interactivity-router": "^2.38.2-next.v.0+b8934fcf9",
-		"@wordpress/keyboard-shortcuts": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/keycodes": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/latex-to-mathml": "^1.6.1-next.v.0+b8934fcf9",
-		"@wordpress/notices": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/patterns": "^2.38.1-next.v.0+b8934fcf9",
-		"@wordpress/primitives": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/private-apis": "^1.38.1-next.v.0+b8934fcf9",
-		"@wordpress/reusable-blocks": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/rich-text": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/server-side-render": "^6.14.1-next.v.0+b8934fcf9",
-		"@wordpress/url": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/viewport": "^6.38.1-next.v.0+b8934fcf9",
-		"@wordpress/wordcount": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/a11y": "^4.39.0",
+		"@wordpress/api-fetch": "^7.39.0",
+		"@wordpress/autop": "^4.39.0",
+		"@wordpress/base-styles": "^6.15.0",
+		"@wordpress/blob": "^4.39.0",
+		"@wordpress/block-editor": "^15.12.0",
+		"@wordpress/blocks": "^15.12.0",
+		"@wordpress/components": "^32.1.0",
+		"@wordpress/compose": "^7.39.0",
+		"@wordpress/core-data": "^7.39.0",
+		"@wordpress/data": "^10.39.0",
+		"@wordpress/date": "^5.39.0",
+		"@wordpress/deprecated": "^4.39.0",
+		"@wordpress/dom": "^4.39.0",
+		"@wordpress/element": "^6.39.0",
+		"@wordpress/escape-html": "^3.39.0",
+		"@wordpress/hooks": "^4.39.0",
+		"@wordpress/html-entities": "^4.39.0",
+		"@wordpress/i18n": "^6.12.0",
+		"@wordpress/icons": "^11.6.0",
+		"@wordpress/interactivity": "^6.39.0",
+		"@wordpress/interactivity-router": "^2.39.0",
+		"@wordpress/keyboard-shortcuts": "^5.39.0",
+		"@wordpress/keycodes": "^4.39.0",
+		"@wordpress/latex-to-mathml": "^1.7.0",
+		"@wordpress/notices": "^5.39.0",
+		"@wordpress/patterns": "^2.39.0",
+		"@wordpress/primitives": "^4.39.0",
+		"@wordpress/private-apis": "^1.39.0",
+		"@wordpress/reusable-blocks": "^5.39.0",
+		"@wordpress/rich-text": "^7.39.0",
+		"@wordpress/server-side-render": "^6.15.0",
+		"@wordpress/url": "^4.39.0",
+		"@wordpress/viewport": "^6.39.0",
+		"@wordpress/wordcount": "^4.39.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -148,5 +148,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "17529010285784fd2e735348a28391c79de87c88"
+	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
 }

package/src/button/index.js

@@ -47,6 +47,10 @@ export const settings = {
 		if ( context === 'list-view' && ( customName || hasContent ) ) {
 			return customName || text;
 		}
+
+		if ( context === 'breadcrumb' && customName ) {
+			return customName;
+		}
 	},
 };
 

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/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/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/image/index.js

@@ -35,7 +35,10 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const customName = attributes?.metadata?.name;
 
-		if ( context === 'list-view' && customName ) {
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
 			return customName;
 		}
 

package/src/index.js

@@ -133,9 +133,12 @@ import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as tab from './tab';
+import * as tabPanels from './tab-panels';
 import * as table from './table';
 import * as tableOfContents from './table-of-contents';
 import * as tabs from './tabs';
+import * as tabsMenu from './tabs-menu';
+import * as tabsMenuItem from './tabs-menu-item';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termCount from './term-count';
@@ -274,6 +277,9 @@ const getAllBlocks = () => {
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( tab );
 		blocks.push( tabs );
+		blocks.push( tabsMenu );
+		blocks.push( tabsMenuItem );
+		blocks.push( tabPanels );
 	}
 
 	if ( window?.__experimentalEnableFormBlocks ) {

package/src/list-item/index.js

@@ -45,6 +45,10 @@ export const settings = {
 		if ( context === 'list-view' && ( customName || hasContent ) ) {
 			return customName || content;
 		}
+
+		if ( context === 'breadcrumb' && customName ) {
+			return customName;
+		}
 	},
 };
 

package/src/more/index.js

@@ -27,7 +27,10 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const customName = attributes?.metadata?.name;
 
-		if ( context === 'list-view' && customName ) {
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
 			return customName;
 		}
 

package/src/navigation/edit/index.js

@@ -516,13 +516,37 @@ function Navigation( {
 		[ clientId ]
 	);
 
-	// Force overlayMenu to 'never' if within an overlay template part
-	// to prevent overlays within overlays.
+	// Configure navigation blocks in overlay templates.
+	const hasSetOverlayDefault = useRef( false );
 	useEffect( () => {
-		if ( isWithinOverlay && overlayMenu !== 'never' ) {
+		if ( ! isWithinOverlay ) {
+			return;
+		}
+
+		// Prevent nested overlays.
+		if ( overlayMenu !== 'never' ) {
 			setAttributes( { overlayMenu: 'never' } );
 		}
-	}, [ isWithinOverlay, overlayMenu, setAttributes ] );
+
+		// Set vertical orientation and always-open submenus for new blocks.
+		if ( ! hasSetOverlayDefault.current && ! ref ) {
+			hasSetOverlayDefault.current = true;
+			setAttributes( {
+				submenuVisibility: 'always',
+				layout: {
+					...attributes.layout,
+					orientation: 'vertical',
+				},
+				showSubmenuIcon: false,
+			} );
+		}
+	}, [
+		attributes.layout,
+		isWithinOverlay,
+		overlayMenu,
+		ref,
+		setAttributes,
+	] );
 
 	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {