@wordpress/block-library 9.44.0 → 9.45.0

package/build-style/tab/style.css

@@ -1,20 +1,33 @@
 .wp-block-tab {
-  max-width: 100%;
-  flex-basis: 100%;
-  flex-grow: 1;
   box-sizing: border-box;
+  color: inherit;
+  display: block;
+  width: max-content;
+  text-decoration: none;
+  cursor: pointer;
+  flex-basis: inherit !important;
+  flex-grow: inherit !important;
+  position: relative;
+  border: none;
+  background: none;
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  padding: var(--wp--preset--spacing--20, 0.5em) 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-tab > *:first-child {
-  margin-top: 0;
-}
-.wp-block-tab > *:last-child {
-  margin-bottom: 0;
-}
-.wp-block-tab[hidden], .wp-block-tab:empty {
-  display: none !important;
-}
-
-.wp-block-tab.wp-block.has-background,
-.wp-block-tab:not(.wp-block).has-background {
-  padding: var(--wp--preset--spacing--30);
+.wp-block-tab[aria-selected=true]::before, .wp-block-tab.is-active::before {
+  content: "";
+  position: absolute;
+  border-bottom: 2px solid currentColor;
+  pointer-events: none;
+  left: 0;
+  width: 100%;
+  bottom: 0;
 }

package/build-style/tab-list/editor-rtl.css

@@ -0,0 +1,6 @@
+.wp-block-tab-list > .block-editor-block-list__layout {
+  display: contents;
+}
+.wp-block-tab-list .block-editor-block-list__block:has(> .wp-block-tab) {
+  display: contents;
+}

package/build-style/tab-list/editor.css

@@ -0,0 +1,6 @@
+.wp-block-tab-list > .block-editor-block-list__layout {
+  display: contents;
+}
+.wp-block-tab-list .block-editor-block-list__block:has(> .wp-block-tab) {
+  display: contents;
+}

package/build-style/tab-panel/style-rtl.css

@@ -1,4 +1,20 @@
 .wp-block-tab-panel {
+  max-width: 100%;
+  flex-basis: 100%;
   flex-grow: 1;
-  min-width: 0;
+  box-sizing: border-box;
+}
+.wp-block-tab-panel > *:first-child {
+  margin-top: 0;
+}
+.wp-block-tab-panel > *:last-child {
+  margin-bottom: 0;
+}
+.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
+  display: none !important;
+}
+
+.wp-block-tab-panel.wp-block.has-background,
+.wp-block-tab-panel:not(.wp-block).has-background {
+  padding: var(--wp--preset--spacing--30);
 }

package/build-style/tab-panel/style.css

@@ -1,4 +1,20 @@
 .wp-block-tab-panel {
+  max-width: 100%;
+  flex-basis: 100%;
   flex-grow: 1;
-  min-width: 0;
+  box-sizing: border-box;
+}
+.wp-block-tab-panel > *:first-child {
+  margin-top: 0;
+}
+.wp-block-tab-panel > *:last-child {
+  margin-bottom: 0;
+}
+.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
+  display: none !important;
+}
+
+.wp-block-tab-panel.wp-block.has-background,
+.wp-block-tab-panel:not(.wp-block).has-background {
+  padding: var(--wp--preset--spacing--30);
 }

package/build-style/tab-panels/style-rtl.css

@@ -0,0 +1,4 @@
+.wp-block-tab-panels {
+  flex-grow: 1;
+  min-width: 0;
+}

package/build-style/tab-panels/style.css

@@ -0,0 +1,4 @@
+.wp-block-tab-panels {
+  flex-grow: 1;
+  min-width: 0;
+}

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

@@ -1,6 +1,3 @@
 .wp-block-tabs {
   box-sizing: border-box;
-}
-.wp-block-tabs .wp-block-tabs__title {
-  display: none;
 }

package/build-style/tabs/style.css

@@ -1,6 +1,3 @@
 .wp-block-tabs {
   box-sizing: border-box;
-}
-.wp-block-tabs .wp-block-tabs__title {
-  display: none;
 }

package/build-style/video/editor-rtl.css

@@ -65,6 +65,10 @@
   z-index: 159990;
 }
 
+.modal-open .block-library-video-tracks-editor {
+  z-index: 99999;
+}
+
 .block-library-video-tracks-editor__track-list-track {
   padding-right: 12px;
 }

package/build-style/video/editor.css

@@ -65,6 +65,10 @@
   z-index: 159990;
 }
 
+.modal-open .block-library-video-tracks-editor {
+  z-index: 99999;
+}
+
 .block-library-video-tracks-editor__track-list-track {
   padding-left: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.44.0",
+	"version": "9.45.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -95,42 +95,43 @@
 	],
 	"dependencies": {
 		"@arraypress/waveform-player": "1.2.1",
-		"@wordpress/a11y": "^4.44.0",
-		"@wordpress/api-fetch": "^7.44.0",
-		"@wordpress/autop": "^4.44.0",
-		"@wordpress/base-styles": "^6.20.0",
-		"@wordpress/blob": "^4.44.0",
-		"@wordpress/block-editor": "^15.17.0",
-		"@wordpress/blocks": "^15.17.0",
-		"@wordpress/components": "^32.6.0",
-		"@wordpress/compose": "^7.44.0",
-		"@wordpress/core-data": "^7.44.0",
-		"@wordpress/data": "^10.44.0",
-		"@wordpress/date": "^5.44.0",
-		"@wordpress/deprecated": "^4.44.0",
-		"@wordpress/dom": "^4.44.0",
-		"@wordpress/element": "^6.44.0",
-		"@wordpress/escape-html": "^3.44.0",
-		"@wordpress/hooks": "^4.44.0",
-		"@wordpress/html-entities": "^4.44.0",
-		"@wordpress/i18n": "^6.17.0",
-		"@wordpress/icons": "^12.2.0",
-		"@wordpress/interactivity": "^6.44.0",
-		"@wordpress/interactivity-router": "^2.44.0",
-		"@wordpress/keyboard-shortcuts": "^5.44.0",
-		"@wordpress/keycodes": "^4.44.0",
-		"@wordpress/latex-to-mathml": "^1.12.0",
-		"@wordpress/notices": "^5.44.0",
-		"@wordpress/patterns": "^2.44.0",
-		"@wordpress/primitives": "^4.44.0",
-		"@wordpress/private-apis": "^1.44.0",
-		"@wordpress/reusable-blocks": "^5.44.0",
-		"@wordpress/rich-text": "^7.44.0",
-		"@wordpress/server-side-render": "^6.20.0",
-		"@wordpress/upload-media": "^0.29.0",
-		"@wordpress/url": "^4.44.0",
-		"@wordpress/viewport": "^6.44.0",
-		"@wordpress/wordcount": "^4.44.0",
+		"@wordpress/a11y": "^4.45.0",
+		"@wordpress/api-fetch": "^7.45.0",
+		"@wordpress/autop": "^4.45.0",
+		"@wordpress/base-styles": "^7.0.0",
+		"@wordpress/blob": "^4.45.0",
+		"@wordpress/block-editor": "^15.18.0",
+		"@wordpress/blocks": "^15.18.0",
+		"@wordpress/components": "^33.0.0",
+		"@wordpress/compose": "^7.45.0",
+		"@wordpress/core-data": "^7.45.0",
+		"@wordpress/data": "^10.45.0",
+		"@wordpress/date": "^5.45.0",
+		"@wordpress/deprecated": "^4.45.0",
+		"@wordpress/dom": "^4.45.0",
+		"@wordpress/element": "^6.45.0",
+		"@wordpress/escape-html": "^3.45.0",
+		"@wordpress/hooks": "^4.45.0",
+		"@wordpress/html-entities": "^4.45.0",
+		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/icons": "^13.0.0",
+		"@wordpress/interactivity": "^6.45.0",
+		"@wordpress/interactivity-router": "^2.45.0",
+		"@wordpress/keyboard-shortcuts": "^5.45.0",
+		"@wordpress/keycodes": "^4.45.0",
+		"@wordpress/latex-to-mathml": "^1.13.0",
+		"@wordpress/notices": "^5.45.0",
+		"@wordpress/patterns": "^2.45.0",
+		"@wordpress/primitives": "^4.45.0",
+		"@wordpress/private-apis": "^1.45.0",
+		"@wordpress/reusable-blocks": "^5.45.0",
+		"@wordpress/rich-text": "^7.45.0",
+		"@wordpress/server-side-render": "^6.21.0",
+		"@wordpress/ui": "^0.12.0",
+		"@wordpress/upload-media": "^0.30.0",
+		"@wordpress/url": "^4.45.0",
+		"@wordpress/viewport": "^6.45.0",
+		"@wordpress/wordcount": "^4.45.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -151,5 +152,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b862d8c84121a47bbeff882f6c87e61681ce2e0d"
+	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
 }

package/src/accordion/edit.js

@@ -140,7 +140,6 @@ export default function Edit( {
 						}
 					>
 						<ToggleControl
-							isBlock
 							label={ __( 'Auto-close' ) }
 							onChange={ ( value ) => {
 								setAttributes( {
@@ -160,7 +159,6 @@ export default function Edit( {
 						onDeselect={ () => setAttributes( { showIcon: true } ) }
 					>
 						<ToggleControl
-							isBlock
 							label={ __( 'Show icon' ) }
 							onChange={ ( value ) => {
 								setAttributes( {

package/src/accordion-item/block.json

@@ -16,6 +16,7 @@
 		"interactivity": true,
 		"spacing": {
 			"margin": [ "top", "bottom" ],
+			"padding": true,
 			"blockGap": true
 		},
 		"__experimentalBorder": {

package/src/block/test/edit.native.js

@@ -29,7 +29,7 @@ const getMockedReusableBlock = ( id ) => ( {
     <!-- /wp:heading -->
 
     <!-- wp:paragraph -->
-    <p><strong>Bold</strong> <em>Italic</em> <s>Striked</s> Superscript<sup>(1)</sup> Subscript<sub>(2)</sub> <a href="http://www.wordpress.org" target="_blank" rel="noreferrer noopener">Link</a></p>
+    <p><strong>Bold</strong> <em>Italic</em> <s>Striked</s> Superscript<sup>(1)</sup> Subscript<sub>(2)</sub> <a href="http://www.wordpress.org" target="_blank" rel="noopener">Link</a></p>
     <!-- /wp:paragraph -->
 
     !-- wp:heading {"level":4} -->

package/src/button/constants.js

@@ -1,3 +1,3 @@
-export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_REL = 'noopener';
 export const NEW_TAB_TARGET = '_blank';
 export const NOFOLLOW_REL = 'nofollow';

package/src/button/test/get-updated-link-attributes.js

@@ -15,7 +15,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		expect( result.url ).toEqual( 'https://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
-		expect( result.rel ).toEqual( 'noreferrer noopener' );
+		expect( result.rel ).toEqual( 'noopener' );
 	} );
 
 	it( 'should return empty rel value as undefined', () => {
@@ -44,9 +44,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		expect( result.url ).toEqual( 'https://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
-		expect( result.rel ).toEqual(
-			'rel_value noreferrer noopener nofollow'
-		);
+		expect( result.rel ).toEqual( 'rel_value noopener nofollow' );
 	} );
 
 	it( 'should correctly update link attributes with opensInNewTab', () => {
@@ -61,7 +59,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		expect( result.url ).toEqual( 'https://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
-		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+		expect( result.rel ).toEqual( 'rel_value noopener' );
 	} );
 
 	it( 'should correctly update link attributes with nofollow', () => {
@@ -106,9 +104,7 @@ describe( 'getUpdatedLinkAttributes method', () => {
 
 		expect( result.url ).toEqual( 'https://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
-		expect( result.rel ).toEqual(
-			'rel_value nofollow noreferrer noopener'
-		);
+		expect( result.rel ).toEqual( 'rel_value nofollow noopener' );
 	} );
 
 	it( 'should correctly handle rel with existing new tab values and remove duplicates', () => {
@@ -116,13 +112,13 @@ describe( 'getUpdatedLinkAttributes method', () => {
 			url: 'example.com',
 			opensInNewTab: true,
 			nofollow: false,
-			rel: 'rel_value noreferrer noopener',
+			rel: 'rel_value noopener',
 		};
 
 		const result = getUpdatedLinkAttributes( options );
 
 		expect( result.url ).toEqual( 'https://example.com' );
 		expect( result.linkTarget ).toEqual( '_blank' );
-		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+		expect( result.rel ).toEqual( 'rel_value noopener' );
 	} );
 } );

package/src/categories/edit.js

@@ -11,7 +11,6 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
-	VisuallyHidden,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -26,6 +25,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
+import { VisuallyHidden } from '@wordpress/ui';
 import { store as noticeStore } from '@wordpress/notices';
 
 /**
@@ -146,7 +146,8 @@ export default function CategoriesEdit( {
 						}
 					/>
 				) : (
-					<VisuallyHidden as="label" htmlFor={ selectId }>
+					// eslint-disable-next-line jsx-a11y/label-has-associated-control
+					<VisuallyHidden render={ <label htmlFor={ selectId } /> }>
 						{ label ? label : taxonomy?.name }
 					</VisuallyHidden>
 				) }

package/src/classic.scss

@@ -58,3 +58,28 @@
 		outline: auto;
 	}
 }
+
+.wp-block-tab {
+	// Button elements can have colors applied with high CSS specificity,
+	// and since this specificity is impossible to predict, we use
+	// `!important` to reset the color.
+	&:not(.has-text-color) {
+		color: inherit !important;
+	}
+	&:not(.has-background) {
+		background-color: inherit !important;
+	}
+
+	&:hover,
+	&:focus {
+		// Sometimes styles are applied when the button element is
+		// hovered over or focused. This isn't expected for tab
+		// buttons, so reset those styles here.
+		text-decoration: none;
+	}
+
+	&:focus-visible {
+		outline-offset: 0;
+		outline: auto;
+	}
+}

package/src/editor.scss

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

package/src/embed/edit.js

@@ -1,9 +1,30 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	useBlockProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { View } from '@wordpress/primitives';
+import { Caption } from '../utils/caption';
+
 /**
  * Internal dependencies
  */
 import {
 	createUpgradedEmbedBlock,
+	findMoreSuitableBlock,
 	getClassNames,
+	rewriteXToTwitter,
 	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
@@ -15,23 +36,6 @@ import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
 
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useBlockProps } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { View } from '@wordpress/primitives';
-import { getAuthority } from '@wordpress/url';
-import { Caption } from '../utils/caption';
-
 const EmbedEdit = ( props ) => {
 	const {
 		attributes: {
@@ -58,6 +62,8 @@ const EmbedEdit = ( props ) => {
 	const [ url, setURL ] = useState( attributesUrl );
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const { invalidateResolution } = useDispatch( coreStore );
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const {
 		preview,
@@ -131,63 +137,61 @@ const EmbedEdit = ( props ) => {
 		} );
 	}
 
+	// When the preview can't be embedded, retry without any trailing slash.
 	useEffect( () => {
-		if ( preview?.html || ! cannotEmbed || ! hasResolved ) {
+		if ( ! cannotEmbed || ! hasResolved || ! attributesUrl ) {
 			return;
 		}
 
-		// At this stage, we're not fetching the preview and know it can't be embedded,
-		// so try removing any trailing slash, and resubmit.
 		const newURL = attributesUrl.replace( /\/$/, '' );
+		if ( newURL === attributesUrl ) {
+			return;
+		}
+
 		setURL( newURL );
 		setIsEditingURL( false );
+		__unstableMarkNextChangeAsNotPersistent();
 		setAttributes( { url: newURL } );
 	}, [
-		preview?.html,
 		attributesUrl,
 		cannotEmbed,
 		hasResolved,
 		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
-	// Try a different provider in case the embed url is not supported.
+	// Apply preview-derived attributes once the preview resolves.
 	useEffect( () => {
-		if ( ! cannotEmbed || fetching || ! url ) {
+		if ( ! preview || isEditingURL ) {
 			return;
 		}
 
-		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
-		if ( getAuthority( url ) === 'x.com' ) {
-			const newURL = new URL( url );
-			newURL.host = 'twitter.com';
-			setAttributes( { url: newURL.toString() } );
-		}
-	}, [ url, cannotEmbed, fetching, setAttributes ] );
+		const mergedAttributes = getMergedAttributes();
 
-	// Handle incoming preview.
-	useEffect( () => {
-		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview,
-			// we set the attributes derived from the preview data.
-			const mergedAttributes = getMergedAttributes();
-			const hasChanges = Object.keys( mergedAttributes ).some(
-				( key ) => mergedAttributes[ key ] !== attributes[ key ]
+		if ( onReplace ) {
+			const upgradedBlock = createUpgradedEmbedBlock(
+				props,
+				mergedAttributes
 			);
 
-			if ( hasChanges ) {
-				setAttributes( mergedAttributes );
+			if ( upgradedBlock ) {
+				// Mutate via setAttributes; onReplace would remount the
+				// block and clear the URL textbox on undo.
+				__unstableMarkNextChangeAsNotPersistent();
+				setAttributes( upgradedBlock.attributes );
+				return;
 			}
+		}
 
-			if ( onReplace ) {
-				const upgradedBlock = createUpgradedEmbedBlock(
-					props,
-					mergedAttributes
-				);
+		const hasChanges = Object.keys( mergedAttributes ).some(
+			( key ) => mergedAttributes[ key ] !== attributes[ key ]
+		);
 
-				if ( upgradedBlock ) {
-					onReplace( upgradedBlock );
-				}
-			}
+		if ( hasChanges ) {
+			// Merge into the URL-submit undo level so a single undo
+			// reverts both the submit and the preview-driven attributes.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( mergedAttributes );
 		}
 	}, [ preview, isEditingURL ] );
 
@@ -219,14 +223,19 @@ const EmbedEdit = ( props ) => {
 							event.preventDefault();
 						}
 
-						// If the embed URL was changed, we need to reset the aspect ratio class.
-						// To do this we have to remove the existing ratio class so it can be recalculated.
+						const rewrittenURL = rewriteXToTwitter( url );
 						const blockClass = removeAspectRatioClasses(
 							attributes.className
 						);
 
+						setURL( rewrittenURL );
+						setAttributes( {
+							url: rewrittenURL,
+							...findMoreSuitableBlock( rewrittenURL )
+								?.attributes,
+							className: blockClass,
+						} );
 						setIsEditingURL( false );
-						setAttributes( { url, className: blockClass } );
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }