@wordpress/block-library 8.25.0 → 8.26.0

package/build-style/search/style.css

@@ -135,6 +135,31 @@
 .wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
   max-width: calc(100% - 100px);
 }
+.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
+  transition-property: width;
+  min-width: 0 !important;
+}
+.wp-block-search.wp-block-search__button-only .wp-block-search__input {
+  transition-duration: 300ms;
+  flex-basis: 100%;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden {
+  overflow: hidden;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
+  overflow: hidden;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
+  width: 0 !important;
+  min-width: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important;
+  flex-grow: 0;
+  margin: 0;
+  flex-basis: 0;
+}
 
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
@@ -157,32 +182,6 @@
   margin: auto;
 }
 
-.wp-block-search__button-behavior-expand .wp-block-search__inside-wrapper {
-  transition-property: width;
-  min-width: 0 !important;
-}
-.wp-block-search__button-behavior-expand .wp-block-search__input {
-  transition-duration: 300ms;
-  flex-basis: 100%;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden {
-  overflow: hidden;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
-  overflow: hidden;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden .wp-block-search__input {
-  width: 0 !important;
-  min-width: 0 !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  border-left-width: 0 !important;
-  border-right-width: 0 !important;
-  flex-grow: 0;
-  margin: 0;
-  flex-basis: 0;
-}
-
-.wp-block[data-align=right] .wp-block-search__button-behavior-expand .wp-block-search__inside-wrapper {
+.wp-block[data-align=right] .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
   float: right;
 }

package/build-style/style-rtl.css

@@ -186,19 +186,19 @@
   border-radius: 0 !important;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link,
-.wp-block-button .wp-block-button__link.is-style-outline {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
+.wp-block-button .wp-block-button__link:where(.is-style-outline) {
   border: 2px solid currentColor;
   padding: 0.667em 1.333em;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
   color: currentColor;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
   background-color: transparent;
   background-image: none;
 }
@@ -2572,20 +2572,18 @@ button.wp-block-navigation-item__content {
   left: auto;
   right: auto;
 }
-@media (min-width: 600px) {
-  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: block;
-    width: 100%;
-    position: relative;
-    z-index: auto;
-    background-color: inherit;
-  }
-  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
-    display: none;
-  }
-  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-    right: 0;
-  }
+:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) {
+  display: block;
+  width: 100%;
+  position: relative;
+  z-index: auto;
+  background-color: inherit;
+}
+:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
+  display: none;
+}
+:not(.is-collapsed) > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+  right: 0;
 }
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
@@ -2629,10 +2627,8 @@ button.wp-block-navigation-item__content {
   font-weight: inherit;
   font-size: inherit;
 }
-@media (min-width: 600px) {
-  .wp-block-navigation__responsive-container-open:not(.always-shown) {
-    display: none;
-  }
+:not(.is-collapsed) > .wp-block-navigation__responsive-container-open {
+  display: none;
 }
 
 .wp-block-navigation__responsive-container-close {
@@ -3264,6 +3260,31 @@ ul.wp-block-rss.is-grid li {
 .wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
   max-width: calc(100% - 100px);
 }
+.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
+  transition-property: width;
+  min-width: 0 !important;
+}
+.wp-block-search.wp-block-search__button-only .wp-block-search__input {
+  transition-duration: 300ms;
+  flex-basis: 100%;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden {
+  overflow: hidden;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
+  overflow: hidden;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
+  width: 0 !important;
+  min-width: 0 !important;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+  border-right-width: 0 !important;
+  border-left-width: 0 !important;
+  flex-grow: 0;
+  margin: 0;
+  flex-basis: 0;
+}
 
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
@@ -3286,33 +3307,7 @@ ul.wp-block-rss.is-grid li {
   margin: auto;
 }
 
-.wp-block-search__button-behavior-expand .wp-block-search__inside-wrapper {
-  transition-property: width;
-  min-width: 0 !important;
-}
-.wp-block-search__button-behavior-expand .wp-block-search__input {
-  transition-duration: 300ms;
-  flex-basis: 100%;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden {
-  overflow: hidden;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
-  overflow: hidden;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden .wp-block-search__input {
-  width: 0 !important;
-  min-width: 0 !important;
-  padding-right: 0 !important;
-  padding-left: 0 !important;
-  border-right-width: 0 !important;
-  border-left-width: 0 !important;
-  flex-grow: 0;
-  margin: 0;
-  flex-basis: 0;
-}
-
-.wp-block[data-align=right] .wp-block-search__button-behavior-expand .wp-block-search__inside-wrapper {
+.wp-block[data-align=right] .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
   float: left;
 }
 

package/build-style/style.css

@@ -187,19 +187,19 @@
   border-radius: 0 !important;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link,
-.wp-block-button .wp-block-button__link.is-style-outline {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
+.wp-block-button .wp-block-button__link:where(.is-style-outline) {
   border: 2px solid currentColor;
   padding: 0.667em 1.333em;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
   color: currentColor;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
   background-color: transparent;
   background-image: none;
 }
@@ -2602,20 +2602,18 @@ button.wp-block-navigation-item__content {
   right: auto;
   left: auto;
 }
-@media (min-width: 600px) {
-  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: block;
-    width: 100%;
-    position: relative;
-    z-index: auto;
-    background-color: inherit;
-  }
-  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
-    display: none;
-  }
-  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-    left: 0;
-  }
+:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) {
+  display: block;
+  width: 100%;
+  position: relative;
+  z-index: auto;
+  background-color: inherit;
+}
+:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
+  display: none;
+}
+:not(.is-collapsed) > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+  left: 0;
 }
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
@@ -2659,10 +2657,8 @@ button.wp-block-navigation-item__content {
   font-weight: inherit;
   font-size: inherit;
 }
-@media (min-width: 600px) {
-  .wp-block-navigation__responsive-container-open:not(.always-shown) {
-    display: none;
-  }
+:not(.is-collapsed) > .wp-block-navigation__responsive-container-open {
+  display: none;
 }
 
 .wp-block-navigation__responsive-container-close {
@@ -3298,6 +3294,31 @@ ul.wp-block-rss.is-grid li {
 .wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
   max-width: calc(100% - 100px);
 }
+.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
+  transition-property: width;
+  min-width: 0 !important;
+}
+.wp-block-search.wp-block-search__button-only .wp-block-search__input {
+  transition-duration: 300ms;
+  flex-basis: 100%;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden {
+  overflow: hidden;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
+  overflow: hidden;
+}
+.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
+  width: 0 !important;
+  min-width: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important;
+  flex-grow: 0;
+  margin: 0;
+  flex-basis: 0;
+}
 
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
@@ -3320,33 +3341,7 @@ ul.wp-block-rss.is-grid li {
   margin: auto;
 }
 
-.wp-block-search__button-behavior-expand .wp-block-search__inside-wrapper {
-  transition-property: width;
-  min-width: 0 !important;
-}
-.wp-block-search__button-behavior-expand .wp-block-search__input {
-  transition-duration: 300ms;
-  flex-basis: 100%;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden {
-  overflow: hidden;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
-  overflow: hidden;
-}
-.wp-block-search__button-behavior-expand.wp-block-search__searchfield-hidden .wp-block-search__input {
-  width: 0 !important;
-  min-width: 0 !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  border-left-width: 0 !important;
-  border-right-width: 0 !important;
-  flex-grow: 0;
-  margin: 0;
-  flex-basis: 0;
-}
-
-.wp-block[data-align=right] .wp-block-search__button-behavior-expand .wp-block-search__inside-wrapper {
+.wp-block[data-align=right] .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
   float: right;
 }
 

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

@@ -86,9 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-table {
-  margin: 0;
-}
 .wp-block[data-align=left] > .wp-block-table, .wp-block[data-align=right] > .wp-block-table, .wp-block[data-align=center] > .wp-block-table {
   height: auto;
 }

package/build-style/table/editor.css

@@ -86,9 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-table {
-  margin: 0;
-}
 .wp-block[data-align=left] > .wp-block-table, .wp-block[data-align=right] > .wp-block-table, .wp-block[data-align=center] > .wp-block-table {
   height: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.25.0",
+	"version": "8.26.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.48.0",
-		"@wordpress/api-fetch": "^6.45.0",
-		"@wordpress/autop": "^3.48.0",
-		"@wordpress/blob": "^3.48.0",
-		"@wordpress/block-editor": "^12.16.0",
-		"@wordpress/blocks": "^12.25.0",
-		"@wordpress/components": "^25.14.0",
-		"@wordpress/compose": "^6.25.0",
-		"@wordpress/core-data": "^6.25.0",
-		"@wordpress/data": "^9.18.0",
-		"@wordpress/date": "^4.48.0",
-		"@wordpress/deprecated": "^3.48.0",
-		"@wordpress/dom": "^3.48.0",
-		"@wordpress/element": "^5.25.0",
-		"@wordpress/escape-html": "^2.48.0",
-		"@wordpress/hooks": "^3.48.0",
-		"@wordpress/html-entities": "^3.48.0",
-		"@wordpress/i18n": "^4.48.0",
-		"@wordpress/icons": "^9.39.0",
-		"@wordpress/interactivity": "^3.1.0",
-		"@wordpress/keycodes": "^3.48.0",
-		"@wordpress/notices": "^4.16.0",
-		"@wordpress/primitives": "^3.46.0",
-		"@wordpress/private-apis": "^0.30.0",
-		"@wordpress/reusable-blocks": "^4.25.0",
-		"@wordpress/rich-text": "^6.25.0",
-		"@wordpress/server-side-render": "^4.25.0",
-		"@wordpress/url": "^3.49.0",
-		"@wordpress/viewport": "^5.25.0",
-		"@wordpress/wordcount": "^3.48.0",
+		"@wordpress/a11y": "^3.49.0",
+		"@wordpress/api-fetch": "^6.46.0",
+		"@wordpress/autop": "^3.49.0",
+		"@wordpress/blob": "^3.49.0",
+		"@wordpress/block-editor": "^12.17.0",
+		"@wordpress/blocks": "^12.26.0",
+		"@wordpress/components": "^25.15.0",
+		"@wordpress/compose": "^6.26.0",
+		"@wordpress/core-data": "^6.26.0",
+		"@wordpress/data": "^9.19.0",
+		"@wordpress/date": "^4.49.0",
+		"@wordpress/deprecated": "^3.49.0",
+		"@wordpress/dom": "^3.49.0",
+		"@wordpress/element": "^5.26.0",
+		"@wordpress/escape-html": "^2.49.0",
+		"@wordpress/hooks": "^3.49.0",
+		"@wordpress/html-entities": "^3.49.0",
+		"@wordpress/i18n": "^4.49.0",
+		"@wordpress/icons": "^9.40.0",
+		"@wordpress/interactivity": "^3.2.0",
+		"@wordpress/keycodes": "^3.49.0",
+		"@wordpress/notices": "^4.17.0",
+		"@wordpress/primitives": "^3.47.0",
+		"@wordpress/private-apis": "^0.31.0",
+		"@wordpress/reusable-blocks": "^4.26.0",
+		"@wordpress/rich-text": "^6.26.0",
+		"@wordpress/server-side-render": "^4.26.0",
+		"@wordpress/url": "^3.50.0",
+		"@wordpress/viewport": "^5.26.0",
+		"@wordpress/wordcount": "^3.49.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
+	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
 }

package/src/audio/edit.js

@@ -42,22 +42,19 @@ function AudioEdit( {
 	className,
 	setAttributes,
 	onReplace,
-	isSelected,
+	isSelected: isSingleSelected,
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, loop, preload, src } = attributes;
 	const isTemporaryAudio = ! id && isBlobURL( src );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
+	const { getSettings } = useSelect( blockEditorStore );
 
 	useEffect( () => {
 		if ( ! id && isBlobURL( src ) ) {
 			const file = getBlobByURL( src );
 
 			if ( file ) {
-				mediaUpload( {
+				getSettings().mediaUpload( {
 					filesList: [ file ],
 					onFileChange: ( [ media ] ) => onSelectAudio( media ),
 					onError: ( e ) => onUploadError( e ),
@@ -146,17 +143,19 @@ function AudioEdit( {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ src }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="audio/*"
-					onSelect={ onSelectAudio }
-					onSelectURL={ onSelectURL }
-					onError={ onUploadError }
-				/>
-			</BlockControls>
+			{ isSingleSelected && (
+				<BlockControls group="other">
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ src }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="audio/*"
+						onSelect={ onSelectAudio }
+						onSelectURL={ onSelectURL }
+						onError={ onUploadError }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
@@ -200,16 +199,17 @@ function AudioEdit( {
 					so the user clicking on it won't play the
 					file or change the position slider when the controls are enabled.
 				*/ }
-				<Disabled isDisabled={ ! isSelected }>
+				<Disabled isDisabled={ ! isSingleSelected }>
 					<audio controls="controls" src={ src } />
 				</Disabled>
 				{ isTemporaryAudio && <Spinner /> }
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					isSelected={ isSelected }
+					isSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					label={ __( 'Audio caption text' ) }
+					showToolbarButton={ isSingleSelected }
 				/>
 			</figure>
 		</>

package/src/audio/test/__snapshots__/edit.native.js.snap

@@ -532,3 +532,15 @@ exports[`Audio block renders placeholder without crashing 1`] = `
   </View>
 </View>
 `;
+
+exports[`Audio block should enable autoplay setting 1`] = `
+"<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3" autoplay></audio></figure>
+<!-- /wp:audio -->"
+`;
+
+exports[`Audio block should enable loop setting 1`] = `
+"<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3" loop></audio></figure>
+<!-- /wp:audio -->"
+`;

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

@@ -5,7 +5,10 @@ import {
 	addBlock,
 	dismissModal,
 	fireEvent,
+	getBlock,
+	getEditorHtml,
 	initializeEditor,
+	openBlockSettings,
 	render,
 	screen,
 	setupCoreBlocks,
@@ -31,6 +34,10 @@ jest.unmock( '@wordpress/react-native-aztec' );
 
 const MEDIA_UPLOAD_STATE_FAILED = 3;
 
+const AUDIO_BLOCK = `<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio -->`;
+
 let uploadCallBack;
 subscribeMediaUpload.mockImplementation( ( callback ) => {
 	uploadCallBack = callback;
@@ -100,4 +107,26 @@ describe( 'Audio block', () => {
 			screen.getByText( 'Invalid URL. Audio file not found.' )
 		).toBeVisible();
 	} );
+
+	it( 'should enable autoplay setting', async () => {
+		await initializeEditor( { initialHtml: AUDIO_BLOCK } );
+
+		const audioBlock = getBlock( screen, 'Audio' );
+		fireEvent.press( audioBlock );
+		await openBlockSettings( screen );
+
+		fireEvent.press( screen.getByText( 'Autoplay' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should enable loop setting', async () => {
+		await initializeEditor( { initialHtml: AUDIO_BLOCK } );
+
+		const audioBlock = getBlock( screen, 'Audio' );
+		fireEvent.press( audioBlock );
+		await openBlockSettings( screen );
+
+		fireEvent.press( screen.getByText( 'Loop' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );