@wordpress/block-library 8.19.2 → 8.19.4

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

@@ -201,6 +201,8 @@
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .wp-lightbox-container button {
   border: none;
@@ -216,6 +218,10 @@
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -231,11 +237,20 @@
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 12.5px);
-  left: calc(env(safe-area-inset-left) + 12.5px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  left: calc(env(safe-area-inset-left) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -323,10 +338,6 @@
   }
 }
 
-html.wp-has-lightbox-open {
-  overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;

package/build-style/image/style.css

@@ -207,6 +207,8 @@
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .wp-lightbox-container button {
   border: none;
@@ -222,6 +224,10 @@
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -237,11 +243,20 @@
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 12.5px);
-  right: calc(env(safe-area-inset-right) + 12.5px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  right: calc(env(safe-area-inset-right) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -329,10 +344,6 @@
   }
 }
 
-html.wp-has-lightbox-open {
-  overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;

package/build-style/navigation-link/style-rtl.css

@@ -87,7 +87,6 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-navigation .wp-block-navigation-item__label {
-  word-break: normal;
   overflow-wrap: break-word;
 }
 .wp-block-navigation .wp-block-navigation-item__description {

package/build-style/navigation-link/style.css

@@ -87,7 +87,6 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-navigation .wp-block-navigation-item__label {
-  word-break: normal;
   overflow-wrap: break-word;
 }
 .wp-block-navigation .wp-block-navigation-item__description {

package/build-style/post-featured-image/style-rtl.css

@@ -148,4 +148,7 @@
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-100 {
   opacity: 1;
+}
+.wp-block-post-featured-image:where(.alignleft, .alignright) {
+  width: 100%;
 }

package/build-style/post-featured-image/style.css

@@ -148,4 +148,7 @@
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-100 {
   opacity: 1;
+}
+.wp-block-post-featured-image:where(.alignleft, .alignright) {
+  width: 100%;
 }

package/build-style/post-template/style-rtl.css

@@ -128,4 +128,29 @@
   .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
     grid-template-columns: 1fr;
   }
+}
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+  float: left;
+  -webkit-margin-start: 2em;
+          margin-inline-start: 2em;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+  float: right;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-margin-end: 2em;
+          margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
 }

package/build-style/post-template/style.css

@@ -128,4 +128,29 @@
   .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
     grid-template-columns: 1fr;
   }
+}
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+  float: right;
+  -webkit-margin-start: 2em;
+          margin-inline-start: 2em;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+  float: left;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-margin-end: 2em;
+          margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
 }

package/build-style/style-rtl.css

@@ -1614,6 +1614,8 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .wp-lightbox-container button {
   border: none;
@@ -1629,6 +1631,10 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1644,11 +1650,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 12.5px);
-  left: calc(env(safe-area-inset-left) + 12.5px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  left: calc(env(safe-area-inset-left) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -1736,10 +1751,6 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
 }
 
-html.wp-has-lightbox-open {
-  overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;
@@ -2568,7 +2579,6 @@ html.has-modal-open {
 }
 
 .wp-block-navigation .wp-block-navigation-item__label {
-  word-break: normal;
   overflow-wrap: break-word;
 }
 .wp-block-navigation .wp-block-navigation-item__description {
@@ -2811,6 +2821,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-post-featured-image:where(.alignleft, .alignright) {
+  width: 100%;
+}
 
 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
   display: inline-block;
@@ -2957,6 +2970,32 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     grid-template-columns: 1fr;
   }
 }
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+  float: left;
+  -webkit-margin-start: 2em;
+          margin-inline-start: 2em;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+  float: right;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-margin-end: 2em;
+          margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
+}
+
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {

package/build-style/style.css

@@ -1628,6 +1628,8 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .wp-lightbox-container button {
   border: none;
@@ -1643,6 +1645,10 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1658,11 +1664,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 12.5px);
-  right: calc(env(safe-area-inset-right) + 12.5px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  right: calc(env(safe-area-inset-right) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -1750,10 +1765,6 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
 }
 
-html.wp-has-lightbox-open {
-  overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;
@@ -2598,7 +2609,6 @@ html.has-modal-open {
 }
 
 .wp-block-navigation .wp-block-navigation-item__label {
-  word-break: normal;
   overflow-wrap: break-word;
 }
 .wp-block-navigation .wp-block-navigation-item__description {
@@ -2841,6 +2851,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-post-featured-image:where(.alignleft, .alignright) {
+  width: 100%;
+}
 
 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
   display: inline-block;
@@ -2987,6 +3000,32 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     grid-template-columns: 1fr;
   }
 }
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+  float: right;
+  -webkit-margin-start: 2em;
+          margin-inline-start: 2em;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+  float: left;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-margin-end: 2em;
+          margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
+}
+
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.19.2",
+	"version": "8.19.4",
 	"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.42.2",
-		"@wordpress/api-fetch": "^6.39.2",
-		"@wordpress/autop": "^3.42.2",
-		"@wordpress/blob": "^3.42.2",
-		"@wordpress/block-editor": "^12.10.2",
-		"@wordpress/blocks": "^12.19.2",
-		"@wordpress/components": "^25.8.2",
-		"@wordpress/compose": "^6.19.2",
-		"@wordpress/core-data": "^6.19.2",
-		"@wordpress/data": "^9.12.2",
-		"@wordpress/date": "^4.42.2",
-		"@wordpress/deprecated": "^3.42.2",
-		"@wordpress/dom": "^3.42.2",
-		"@wordpress/element": "^5.19.2",
-		"@wordpress/escape-html": "^2.42.2",
-		"@wordpress/hooks": "^3.42.2",
-		"@wordpress/html-entities": "^3.42.2",
-		"@wordpress/i18n": "^4.42.2",
-		"@wordpress/icons": "^9.33.2",
-		"@wordpress/interactivity": "^2.3.2",
-		"@wordpress/keycodes": "^3.42.2",
-		"@wordpress/notices": "^4.10.2",
-		"@wordpress/primitives": "^3.40.2",
-		"@wordpress/private-apis": "^0.24.2",
-		"@wordpress/reusable-blocks": "^4.19.2",
-		"@wordpress/rich-text": "^6.19.2",
-		"@wordpress/server-side-render": "^4.19.2",
-		"@wordpress/url": "^3.43.2",
-		"@wordpress/viewport": "^5.19.2",
-		"@wordpress/wordcount": "^3.42.2",
+		"@wordpress/a11y": "^3.42.4",
+		"@wordpress/api-fetch": "^6.39.4",
+		"@wordpress/autop": "^3.42.4",
+		"@wordpress/blob": "^3.42.4",
+		"@wordpress/block-editor": "^12.10.4",
+		"@wordpress/blocks": "^12.19.4",
+		"@wordpress/components": "^25.8.4",
+		"@wordpress/compose": "^6.19.4",
+		"@wordpress/core-data": "^6.19.4",
+		"@wordpress/data": "^9.12.4",
+		"@wordpress/date": "^4.42.4",
+		"@wordpress/deprecated": "^3.42.4",
+		"@wordpress/dom": "^3.42.4",
+		"@wordpress/element": "^5.19.4",
+		"@wordpress/escape-html": "^2.42.4",
+		"@wordpress/hooks": "^3.42.4",
+		"@wordpress/html-entities": "^3.42.4",
+		"@wordpress/i18n": "^4.42.4",
+		"@wordpress/icons": "^9.33.4",
+		"@wordpress/interactivity": "^2.3.4",
+		"@wordpress/keycodes": "^3.42.4",
+		"@wordpress/notices": "^4.10.4",
+		"@wordpress/primitives": "^3.40.4",
+		"@wordpress/private-apis": "^0.24.4",
+		"@wordpress/reusable-blocks": "^4.19.4",
+		"@wordpress/rich-text": "^6.19.4",
+		"@wordpress/server-side-render": "^4.19.4",
+		"@wordpress/url": "^3.43.4",
+		"@wordpress/viewport": "^5.19.4",
+		"@wordpress/wordcount": "^3.42.4",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5d2e3d07cc97af8090fc32c1e5d5013a2967e752"
+	"gitHead": "d1072bbcaf037a18d414da7865ebaf366a0e7062"
 }

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

@@ -149,7 +149,7 @@ export default function CoverInspectorControls( {
 			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
 		),
 		main: __(
-			'The <main> element should be used for the primary content of your document only. '
+			'The <main> element should be used for the primary content of your document only.'
 		),
 		section: __(
 			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."

package/src/embed/edit.js

@@ -29,6 +29,7 @@ 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';
 
 const EmbedEdit = ( props ) => {
 	const {
@@ -137,6 +138,20 @@ const EmbedEdit = ( props ) => {
 		setAttributes( { url: newURL } );
 	}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
 
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			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 ] );
+
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {

package/src/embed/edit.native.js

@@ -33,6 +33,7 @@ import {
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
 
 // The inline preview feature will be released progressible, for this reason
 // the embed will only be considered previewable for the following providers list.
@@ -160,6 +161,20 @@ const EmbedEdit = ( props ) => {
 		setAttributes( { url: newURL } );
 	}, [ preview?.html, url, cannotEmbed, fetching ] );
 
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			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 ] );
+
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {