@wordpress/block-library 8.19.10 → 8.19.12

package/build-module/query/view.js

@@ -33,7 +33,8 @@ store({
           ref,
           context
         }) => {
-          if (isValidLink(ref) && isValidEvent(event)) {
+          const isDisabled = ref.closest('[data-wp-navigation-id]')?.dataset.wpNavigationDisabled;
+          if (isValidLink(ref) && isValidEvent(event) && !isDisabled) {
             event.preventDefault();
             const id = ref.closest('[data-wp-navigation-id]').dataset.wpNavigationId;
 
@@ -62,7 +63,8 @@ store({
         prefetch: async ({
           ref
         }) => {
-          if (isValidLink(ref)) {
+          const isDisabled = ref.closest('[data-wp-navigation-id]')?.dataset.wpNavigationDisabled;
+          if (isValidLink(ref) && !isDisabled) {
             await prefetch(ref.href);
           }
         }

package/build-module/query/view.js.map

@@ -1 +1 @@
-{"version":3,"names":["store","navigate","prefetch","isValidLink","ref","window","HTMLAnchorElement","href","target","origin","location","isValidEvent","event","button","metaKey","ctrlKey","altKey","shiftKey","defaultPrevented","selectors","core","query","startAnimation","context","animation","finishAnimation","actions","preventDefault","id","closest","dataset","wpNavigationId","timeout","setTimeout","message","loadingText","clearTimeout","loadedText","url","firstAnchor","document","querySelector","focus","effects"],"sources":["@wordpress/block-library/src/query/view.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store, navigate, prefetch } from '@wordpress/interactivity';\n\nconst isValidLink = ( ref ) =>\n\tref &&\n\tref instanceof window.HTMLAnchorElement &&\n\tref.href &&\n\t( ! ref.target || ref.target === '_self' ) &&\n\tref.origin === window.location.origin;\n\nconst isValidEvent = ( event ) =>\n\tevent.button === 0 && // left clicks only\n\t! event.metaKey && // open in new tab (mac)\n\t! event.ctrlKey && // open in new tab (windows)\n\t! event.altKey && // download\n\t! event.shiftKey &&\n\t! event.defaultPrevented;\n\nstore( {\n\tselectors: {\n\t\tcore: {\n\t\t\tquery: {\n\t\t\t\tstartAnimation: ( { context } ) =>\n\t\t\t\t\tcontext.core.query.animation === 'start',\n\t\t\t\tfinishAnimation: ( { context } ) =>\n\t\t\t\t\tcontext.core.query.animation === 'finish',\n\t\t\t},\n\t\t},\n\t},\n\tactions: {\n\t\tcore: {\n\t\t\tquery: {\n\t\t\t\tnavigate: async ( { event, ref, context } ) => {\n\t\t\t\t\tif ( isValidLink( ref ) && isValidEvent( event ) ) {\n\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\tconst id = ref.closest( '[data-wp-navigation-id]' )\n\t\t\t\t\t\t\t.dataset.wpNavigationId;\n\n\t\t\t\t\t\t// Don't announce the navigation immediately, wait 300 ms.\n\t\t\t\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\t\t\t\tcontext.core.query.message =\n\t\t\t\t\t\t\t\tcontext.core.query.loadingText;\n\t\t\t\t\t\t\tcontext.core.query.animation = 'start';\n\t\t\t\t\t\t}, 400 );\n\n\t\t\t\t\t\tawait navigate( ref.href );\n\n\t\t\t\t\t\t// Dismiss loading message if it hasn't been added yet.\n\t\t\t\t\t\tclearTimeout( timeout );\n\n\t\t\t\t\t\t// Announce that the page has been loaded. If the message is the\n\t\t\t\t\t\t// same, we use a no-break space similar to the @wordpress/a11y\n\t\t\t\t\t\t// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26\n\t\t\t\t\t\tcontext.core.query.message =\n\t\t\t\t\t\t\tcontext.core.query.loadedText +\n\t\t\t\t\t\t\t( context.core.query.message ===\n\t\t\t\t\t\t\tcontext.core.query.loadedText\n\t\t\t\t\t\t\t\t? '\\u00A0'\n\t\t\t\t\t\t\t\t: '' );\n\n\t\t\t\t\t\tcontext.core.query.animation = 'finish';\n\t\t\t\t\t\tcontext.core.query.url = ref.href;\n\n\t\t\t\t\t\t// Focus the first anchor of the Query block.\n\t\t\t\t\t\tconst firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;\n\t\t\t\t\t\tdocument.querySelector( firstAnchor )?.focus();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tprefetch: async ( { ref } ) => {\n\t\t\t\t\tif ( isValidLink( ref ) ) {\n\t\t\t\t\t\tawait prefetch( ref.href );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n\teffects: {\n\t\tcore: {\n\t\t\tquery: {\n\t\t\t\tprefetch: async ( { ref, context } ) => {\n\t\t\t\t\tif ( context.core.query.url && isValidLink( ref ) ) {\n\t\t\t\t\t\tawait prefetch( ref.href );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n} );\n"],"mappings":"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"}
+{"version":3,"names":["store","navigate","prefetch","isValidLink","ref","window","HTMLAnchorElement","href","target","origin","location","isValidEvent","event","button","metaKey","ctrlKey","altKey","shiftKey","defaultPrevented","selectors","core","query","startAnimation","context","animation","finishAnimation","actions","isDisabled","closest","dataset","wpNavigationDisabled","preventDefault","id","wpNavigationId","timeout","setTimeout","message","loadingText","clearTimeout","loadedText","url","firstAnchor","document","querySelector","focus","effects"],"sources":["@wordpress/block-library/src/query/view.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store, navigate, prefetch } from '@wordpress/interactivity';\n\nconst isValidLink = ( ref ) =>\n\tref &&\n\tref instanceof window.HTMLAnchorElement &&\n\tref.href &&\n\t( ! ref.target || ref.target === '_self' ) &&\n\tref.origin === window.location.origin;\n\nconst isValidEvent = ( event ) =>\n\tevent.button === 0 && // left clicks only\n\t! event.metaKey && // open in new tab (mac)\n\t! event.ctrlKey && // open in new tab (windows)\n\t! event.altKey && // download\n\t! event.shiftKey &&\n\t! event.defaultPrevented;\n\nstore( {\n\tselectors: {\n\t\tcore: {\n\t\t\tquery: {\n\t\t\t\tstartAnimation: ( { context } ) =>\n\t\t\t\t\tcontext.core.query.animation === 'start',\n\t\t\t\tfinishAnimation: ( { context } ) =>\n\t\t\t\t\tcontext.core.query.animation === 'finish',\n\t\t\t},\n\t\t},\n\t},\n\tactions: {\n\t\tcore: {\n\t\t\tquery: {\n\t\t\t\tnavigate: async ( { event, ref, context } ) => {\n\t\t\t\t\tconst isDisabled = ref.closest( '[data-wp-navigation-id]' )\n\t\t\t\t\t\t?.dataset.wpNavigationDisabled;\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tisValidLink( ref ) &&\n\t\t\t\t\t\tisValidEvent( event ) &&\n\t\t\t\t\t\t! isDisabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\tconst id = ref.closest( '[data-wp-navigation-id]' )\n\t\t\t\t\t\t\t.dataset.wpNavigationId;\n\n\t\t\t\t\t\t// Don't announce the navigation immediately, wait 300 ms.\n\t\t\t\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\t\t\t\tcontext.core.query.message =\n\t\t\t\t\t\t\t\tcontext.core.query.loadingText;\n\t\t\t\t\t\t\tcontext.core.query.animation = 'start';\n\t\t\t\t\t\t}, 400 );\n\n\t\t\t\t\t\tawait navigate( ref.href );\n\n\t\t\t\t\t\t// Dismiss loading message if it hasn't been added yet.\n\t\t\t\t\t\tclearTimeout( timeout );\n\n\t\t\t\t\t\t// Announce that the page has been loaded. If the message is the\n\t\t\t\t\t\t// same, we use a no-break space similar to the @wordpress/a11y\n\t\t\t\t\t\t// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26\n\t\t\t\t\t\tcontext.core.query.message =\n\t\t\t\t\t\t\tcontext.core.query.loadedText +\n\t\t\t\t\t\t\t( context.core.query.message ===\n\t\t\t\t\t\t\tcontext.core.query.loadedText\n\t\t\t\t\t\t\t\t? '\\u00A0'\n\t\t\t\t\t\t\t\t: '' );\n\n\t\t\t\t\t\tcontext.core.query.animation = 'finish';\n\t\t\t\t\t\tcontext.core.query.url = ref.href;\n\n\t\t\t\t\t\t// Focus the first anchor of the Query block.\n\t\t\t\t\t\tconst firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;\n\t\t\t\t\t\tdocument.querySelector( firstAnchor )?.focus();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tprefetch: async ( { ref } ) => {\n\t\t\t\t\tconst isDisabled = ref.closest( '[data-wp-navigation-id]' )\n\t\t\t\t\t\t?.dataset.wpNavigationDisabled;\n\t\t\t\t\tif ( isValidLink( ref ) && ! isDisabled ) {\n\t\t\t\t\t\tawait prefetch( ref.href );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n\teffects: {\n\t\tcore: {\n\t\t\tquery: {\n\t\t\t\tprefetch: async ( { ref, context } ) => {\n\t\t\t\t\tif ( context.core.query.url && isValidLink( ref ) ) {\n\t\t\t\t\t\tawait prefetch( ref.href );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n} );\n"],"mappings":"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"}

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

@@ -213,22 +213,28 @@
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  left: 10px;
+  top: 16px;
+  left: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -238,7 +244,7 @@
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 

package/build-style/image/style.css

@@ -219,22 +219,28 @@
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  right: 10px;
+  top: 16px;
+  right: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -244,7 +250,7 @@
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 

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

@@ -127,14 +127,4 @@
   100% {
     opacity: 0;
   }
-}
-.wp-block-query__enhanced-pagination-navigation-announce {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  border: 0;
 }

package/build-style/query/style.css

@@ -127,14 +127,4 @@
   100% {
     opacity: 0;
   }
-}
-.wp-block-query__enhanced-pagination-navigation-announce {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  border: 0;
 }

package/build-style/style-rtl.css

@@ -1621,22 +1621,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  left: 10px;
+  top: 16px;
+  left: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -1646,7 +1652,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 

package/build-style/style.css

@@ -1635,22 +1635,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  right: 10px;
+  top: 16px;
+  right: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -1660,7 +1666,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.19.10",
+	"version": "8.19.12",
 	"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.10",
-		"@wordpress/api-fetch": "^6.39.10",
-		"@wordpress/autop": "^3.42.10",
-		"@wordpress/blob": "^3.42.10",
-		"@wordpress/block-editor": "^12.10.10",
-		"@wordpress/blocks": "^12.19.10",
-		"@wordpress/components": "^25.8.10",
-		"@wordpress/compose": "^6.19.10",
-		"@wordpress/core-data": "^6.19.10",
-		"@wordpress/data": "^9.12.10",
-		"@wordpress/date": "^4.42.10",
-		"@wordpress/deprecated": "^3.42.10",
-		"@wordpress/dom": "^3.42.10",
-		"@wordpress/element": "^5.19.10",
-		"@wordpress/escape-html": "^2.42.10",
-		"@wordpress/hooks": "^3.42.10",
-		"@wordpress/html-entities": "^3.42.10",
-		"@wordpress/i18n": "^4.42.10",
-		"@wordpress/icons": "^9.33.10",
-		"@wordpress/interactivity": "^2.3.10",
-		"@wordpress/keycodes": "^3.42.10",
-		"@wordpress/notices": "^4.10.10",
-		"@wordpress/primitives": "^3.40.10",
-		"@wordpress/private-apis": "^0.24.10",
-		"@wordpress/reusable-blocks": "^4.19.10",
-		"@wordpress/rich-text": "^6.19.10",
-		"@wordpress/server-side-render": "^4.19.10",
-		"@wordpress/url": "^3.43.10",
-		"@wordpress/viewport": "^5.19.10",
-		"@wordpress/wordcount": "^3.42.10",
+		"@wordpress/a11y": "^3.42.12",
+		"@wordpress/api-fetch": "^6.39.12",
+		"@wordpress/autop": "^3.42.12",
+		"@wordpress/blob": "^3.42.12",
+		"@wordpress/block-editor": "^12.10.12",
+		"@wordpress/blocks": "^12.19.12",
+		"@wordpress/components": "^25.8.12",
+		"@wordpress/compose": "^6.19.12",
+		"@wordpress/core-data": "^6.19.12",
+		"@wordpress/data": "^9.12.12",
+		"@wordpress/date": "^4.42.12",
+		"@wordpress/deprecated": "^3.42.12",
+		"@wordpress/dom": "^3.42.12",
+		"@wordpress/element": "^5.19.12",
+		"@wordpress/escape-html": "^2.42.12",
+		"@wordpress/hooks": "^3.42.12",
+		"@wordpress/html-entities": "^3.42.12",
+		"@wordpress/i18n": "^4.42.12",
+		"@wordpress/icons": "^9.33.12",
+		"@wordpress/interactivity": "^2.3.12",
+		"@wordpress/keycodes": "^3.42.12",
+		"@wordpress/notices": "^4.10.12",
+		"@wordpress/primitives": "^3.40.12",
+		"@wordpress/private-apis": "^0.24.12",
+		"@wordpress/reusable-blocks": "^4.19.12",
+		"@wordpress/rich-text": "^6.19.12",
+		"@wordpress/server-side-render": "^4.19.12",
+		"@wordpress/url": "^3.43.12",
+		"@wordpress/viewport": "^5.19.12",
+		"@wordpress/wordcount": "^3.42.12",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "11504931036f9db3612c82298a7eab60147e0706"
+	"gitHead": "8447c60232efe04eb248a1c893bf3a1fc4e47ecc"
 }

package/src/image/image.js

@@ -548,14 +548,14 @@ export default function Image( {
 					{ showLightboxToggle && (
 						<ToolsPanelItem
 							hasValue={ () => !! lightbox }
-							label={ __( 'Expand on Click' ) }
+							label={ __( 'Expand on click' ) }
 							onDeselect={ () => {
 								setAttributes( { lightbox: undefined } );
 							} }
 							isShownByDefault={ true }
 						>
 							<ToggleControl
-								label={ __( 'Expand on Click' ) }
+								label={ __( 'Expand on click' ) }
 								checked={ lightboxChecked }
 								onChange={ ( newValue ) => {
 									setAttributes( {

package/src/image/index.php

@@ -242,10 +242,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			data-wp-on--click="actions.core.image.showLightbox"
 			data-wp-style--right="context.core.image.imageButtonRight"
 			data-wp-style--top="context.core.image.imageButtonTop"
-			style="background: #000"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
-				<Path stroke="#FFFFFF" d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
+			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
 			</svg>
 		</button>';
 
@@ -303,7 +302,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		}
 	}
 
-	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 	$close_button_label = esc_attr__( 'Close' );
 
 	$lightbox_html = <<<HTML

package/src/image/style.scss

@@ -168,22 +168,27 @@
 	button {
 		opacity: 0;
 		border: none;
-		background: #000;
+		background-color: rgb(90 90 90 / 25%);
+		backdrop-filter: blur($grid-unit-20) saturate(180%);
 		cursor: zoom-in;
-		width: 24px;
-		height: 24px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 20px;
+		height: 20px;
 		position: absolute;
 		z-index: 100;
-		top: 10px;
-		right: 10px;
+		top: 16px;
+		right: 16px;
 		text-align: center;
 		padding: 0;
-		border-radius: 10%;
+		border-radius: 4px;
+		transition: opacity 0.2s ease;
 
 		&:focus-visible {
-			outline: 5px auto #212121;
-			outline: 5px auto -webkit-focus-ring-color;
-			outline-offset: 5px;
+			outline: 3px auto rgb(90 90 90 / 25%);
+			outline: 3px auto -webkit-focus-ring-color;
+			outline-offset: 3px;
 		}
 
 		&:hover {
@@ -198,7 +203,7 @@
 		&:hover,
 		&:focus,
 		&:not(:hover):not(:active):not(.has-background) {
-			background: #000;
+			background-color: rgb(90 90 90 / 25%);
 			border: none;
 		}
 	}

package/src/image/view.js

@@ -340,26 +340,26 @@ store(
 								context.core.image.imageButtonTop =
 									( offsetHeight - referenceHeight ) / 2 +
 									buttonOffsetTop +
-									10;
+									16;
 								context.core.image.imageButtonRight =
-									buttonOffsetRight + 10;
+									buttonOffsetRight + 16;
 							} else {
 								// If it reaches the height first, keep
 								// the height and compute the width.
 								const referenceWidth =
 									offsetHeight * naturalRatio;
 								context.core.image.imageButtonTop =
-									buttonOffsetTop + 10;
+									buttonOffsetTop + 16;
 								context.core.image.imageButtonRight =
 									( offsetWidth - referenceWidth ) / 2 +
 									buttonOffsetRight +
-									10;
+									16;
 							}
 						} else {
 							context.core.image.imageButtonTop =
-								buttonOffsetTop + 10;
+								buttonOffsetTop + 16;
 							context.core.image.imageButtonRight =
-								buttonOffsetRight + 10;
+								buttonOffsetRight + 16;
 						}
 					},
 					setStylesOnResize: ( { state, context, ref } ) => {

package/src/pattern/edit.js

@@ -20,7 +20,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	);
 
 	const currentThemeStylesheet = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme().stylesheet
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet
 	);
 
 	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =

package/src/query/edit/enhanced-pagination-modal.js

@@ -12,11 +12,7 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useUnsupportedBlockList } from '../utils';
-
-const disableEnhancedPaginationDescription = __(
-	'You have added unsupported blocks. For the enhanced pagination to work, remove them, then re-enable "Enhanced pagination" in the Query Block settings.'
-);
+import { useUnsupportedBlocks } from '../utils';
 
 const modalDescriptionId =
 	'wp-block-query-enhanced-pagination-modal__description';
@@ -27,35 +23,53 @@ export default function EnhancedPaginationModal( {
 	setAttributes,
 } ) {
 	const [ isOpen, setOpen ] = useState( false );
-
-	const unsupported = useUnsupportedBlockList( clientId );
+	const { hasBlocksFromPlugins, hasPostContentBlock, hasUnsupportedBlocks } =
+		useUnsupportedBlocks( clientId );
 
 	useEffect( () => {
-		setOpen( !! unsupported.length && enhancedPagination );
-	}, [ unsupported.length, enhancedPagination, setOpen ] );
+		if ( enhancedPagination && hasUnsupportedBlocks ) {
+			setAttributes( { enhancedPagination: false } );
+			setOpen( true );
+		}
+	}, [ enhancedPagination, hasUnsupportedBlocks, setAttributes ] );
+
+	const closeModal = () => {
+		setOpen( false );
+	};
+
+	let notice = __(
+		'If you still want to prevent full page reloads, remove that block, then disable "Force page reload" again in the Query Block settings.'
+	);
+	if ( hasBlocksFromPlugins ) {
+		notice =
+			__(
+				'Currently, avoiding full page reloads is not possible when blocks from plugins are present inside the Query block.'
+			) +
+			' ' +
+			notice;
+	} else if ( hasPostContentBlock ) {
+		notice =
+			__(
+				'Currently, avoiding full page reloads is not possible when a Content block is present inside the Query block.'
+			) +
+			' ' +
+			notice;
+	}
 
 	return (
 		isOpen && (
 			<Modal
-				title={ __( 'Enhanced pagination will be disabled' ) }
+				title={ __( 'Query block: Force page reload enabled' ) }
 				className="wp-block-query__enhanced-pagination-modal"
 				aria={ {
 					describedby: modalDescriptionId,
 				} }
 				isDismissible={ false }
-				shouldCloseOnEsc={ false }
-				shouldCloseOnClickOutside={ false }
+				onRequestClose={ closeModal }
 			>
 				<VStack alignment="right" spacing={ 5 }>
-					<span id={ modalDescriptionId }>
-						{ disableEnhancedPaginationDescription }
-					</span>
-					<Button
-						variant="primary"
-						onClick={ () => {
-							setAttributes( { enhancedPagination: false } );
-						} }
-					>
+					<span id={ modalDescriptionId }>{ notice }</span>
+					<Button variant="primary" onClick={ closeModal }>
 						{ __( 'OK' ) }
 					</Button>
 				</VStack>

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -1,58 +1,45 @@
 /**
  * WordPress dependencies
  */
-import { ToggleControl, Notice } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { BlockTitle } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useUnsupportedBlockList } from '../../utils';
+import { useUnsupportedBlocks } from '../../utils';
 
 export default function EnhancedPaginationControl( {
 	enhancedPagination,
 	setAttributes,
 	clientId,
 } ) {
-	const unsupported = useUnsupportedBlockList( clientId );
+	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
+
+	let help = __( 'Browsing between pages requires a full page reload.' );
+	if ( enhancedPagination ) {
+		help = __(
+			"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
+		);
+	} else if ( hasUnsupportedBlocks ) {
+		help = __(
+			"Force page reload can't be disabled because there are non-compatible blocks inside the Query block."
+		);
+	}
 
 	return (
 		<>
 			<ToggleControl
-				label={ __( 'Enhanced pagination' ) }
-				help={ __(
-					'Browsing between pages won’t require a full page reload.'
-				) }
-				checked={ !! enhancedPagination }
-				disabled={ unsupported.length }
+				label={ __( 'Force page reload' ) }
+				help={ help }
+				checked={ ! enhancedPagination }
+				disabled={ hasUnsupportedBlocks }
 				onChange={ ( value ) => {
 					setAttributes( {
-						enhancedPagination: !! value,
+						enhancedPagination: ! value,
 					} );
 				} }
 			/>
-			{ !! unsupported.length && (
-				<Notice
-					status="warning"
-					isDismissible={ false }
-					className="wp-block-query__enhanced-pagination-notice"
-				>
-					{ __(
-						"Enhanced pagination doesn't support the following blocks:"
-					) }
-					<ul>
-						{ unsupported.map( ( id ) => (
-							<li key={ id }>
-								<BlockTitle clientId={ id } />
-							</li>
-						) ) }
-					</ul>
-					{ __(
-						'If you want to enable it, you have to remove all unsupported blocks first.'
-					) }
-				</Notice>
-			) }
 		</>
 	);
 }