@wordpress/block-library 8.22.0 → 8.23.0

package/src/gallery/gap-styles.js

@@ -2,13 +2,18 @@
  * WordPress dependencies
  */
 import {
-	BlockList,
 	__experimentalGetGapCSSValue as getGapCSSValue,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useContext, createPortal } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { useStyleOverride } = unlock( blockEditorPrivateApis );
 
 export default function GapStyles( { blockGap, clientId } ) {
-	const styleElement = useContext( BlockList.__unstableElementContext );
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
 	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
@@ -35,11 +40,7 @@ export default function GapStyles( { blockGap, clientId } ) {
 		gap: ${ gapValue }
 	}`;
 
-	const GapStyle = () => {
-		return <style>{ gap }</style>;
-	};
+	useStyleOverride( { css: gap } );
 
-	return gap && styleElement
-		? createPortal( <GapStyle />, styleElement )
-		: null;
+	return null;
 }

package/src/group/edit.js

@@ -52,6 +52,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 		<InspectorControls group="advanced">
 			<SelectControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ [
 					{ label: __( 'Default (<div>)' ), value: 'div' },

package/src/html/transforms.js

@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { create } from '@wordpress/rich-text';
 
 const transforms = {
 	from: [
 		{
 			type: 'block',
 			blocks: [ 'core/code' ],
-			transform: ( { content } ) => {
+			transform: ( { content: html } ) => {
 				return createBlock( 'core/html', {
-					content,
+					// The code block may output HTML formatting, so convert it
+					// to plain text.
+					content: create( { html } ).text,
 				} );
 			},
 		},

package/src/image/deprecated.js

@@ -1047,6 +1047,14 @@ const v8 = {
 		},
 	},
 	migrate( { width, height, ...attributes } ) {
+		// We need to perform a check here because in cases
+		// where attributes are added dynamically to blocks,
+		// block invalidation overrides the isEligible() method
+		// and forces the migration to run, so it's not guaranteed
+		// that `behaviors` or `behaviors.lightbox` will be defined.
+		if ( ! attributes.behaviors?.lightbox ) {
+			return attributes;
+		}
 		const {
 			behaviors: {
 				lightbox: { enabled },

package/src/image/editor.scss

@@ -62,6 +62,13 @@ figure.wp-block-image:not(.wp-block) {
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
+
+	// When the Image block is linked,
+	// it's wrapped with a disabled <a /> tag.
+	// Restore cursor style so it doesn't appear 'clickable'.
+	> a {
+		cursor: default;
+	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.

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;
 		}
 	}
@@ -210,7 +215,7 @@
 	left: 0;
 	z-index: 100000;
 	overflow: hidden;
-	width: 100vw;
+	width: 100%;
 	height: 100vh;
 	box-sizing: border-box;
 	visibility: hidden;
@@ -367,7 +372,7 @@
 
 @keyframes lightbox-zoom-in {
 	0% {
-		transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 	100% {
 		transform: translate(-50%, -50%) scale(1, 1);
@@ -384,6 +389,6 @@
 	}
 	100% {
 		visibility: hidden;
-		transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 }

package/src/image/view.js

@@ -313,11 +313,21 @@ store(
 						if ( caption ) {
 							const captionComputedStyle =
 								window.getComputedStyle( caption );
-							figureHeight =
-								figureHeight -
-								caption.offsetHeight -
-								parseFloat( captionComputedStyle.marginTop ) -
-								parseFloat( captionComputedStyle.marginBottom );
+							if (
+								! [ 'absolute', 'fixed' ].includes(
+									captionComputedStyle.position
+								)
+							) {
+								figureHeight =
+									figureHeight -
+									caption.offsetHeight -
+									parseFloat(
+										captionComputedStyle.marginTop
+									) -
+									parseFloat(
+										captionComputedStyle.marginBottom
+									);
+							}
 						}
 
 						const buttonOffsetTop = figureHeight - offsetHeight;
@@ -340,26 +350,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 } ) => {
@@ -558,6 +568,9 @@ function setStyles( context, ref ) {
 			--wp--lightbox-image-width: ${ lightboxImgWidth }px;
 			--wp--lightbox-image-height: ${ lightboxImgHeight }px;
 			--wp--lightbox-scale: ${ containerScale };
+			--wp--lightbox-scrollbar-width: ${
+				window.innerWidth - document.documentElement.clientWidth
+			}px;
 		}
 	`;
 }

package/src/missing/block.json

@@ -15,7 +15,7 @@
 		},
 		"originalContent": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {

package/src/navigation/edit/overlay-menu-preview.js

@@ -20,7 +20,7 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 				__nextHasNoMarginBottom
 				label={ __( 'Show icon button' ) }
 				help={ __(
-					'Configure the visual appearance of the button opening the overlay menu.'
+					'Configure the visual appearance of the button that toggles the overlay menu.'
 				) }
 				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
 				checked={ hasIcon }