@wordpress/block-library 9.37.2-next.79a2f3cdd.0 → 9.37.2-next.ba3aee3a2.0

package/build-style/style-rtl.css

@@ -2733,16 +2733,20 @@ button.wp-block-navigation-item__content {
     animation-fill-mode: forwards;
   }
 }
-.wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-left: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
   padding-right: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
+}
+.wp-block-navigation__responsive-container.is-menu-open {
   overflow: auto;
   z-index: 100000;
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
+.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
   padding-top: calc(2rem + 24px);
+}
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   overflow: visible;
   display: flex;
   flex-direction: column;
@@ -2797,6 +2801,16 @@ button.wp-block-navigation-item__content {
   left: auto;
   right: auto;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay .wp-block-navigation__overlay-container {
+  display: none;
+  width: 100%;
+}
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
+  display: none;
+}
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
+  display: block;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;
@@ -2813,11 +2827,11 @@ button.wp-block-navigation-item__content {
   }
 }
 
-.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
   background-color: #fff;
 }
 
-.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
   color: #000;
 }
 
@@ -2872,6 +2886,11 @@ button.wp-block-navigation-item__content {
   font-size: inherit;
 }
 
+.disable-default-overlay .wp-block-navigation__responsive-container-close {
+  top: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
+  left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
+}
+
 .wp-block-navigation__responsive-close {
   width: 100%;
 }
@@ -2894,11 +2913,11 @@ button.wp-block-navigation-item__content {
   position: relative;
 }
 
-.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
+.has-modal-open .admin-bar .is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
   margin-top: 46px;
 }
 @media (min-width: 782px) {
-  .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
+  .has-modal-open .admin-bar .is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
     margin-top: 32px;
   }
 }
@@ -2940,7 +2959,6 @@ html.has-modal-open {
   text-decoration: none;
 }
 .wp-block-navigation-overlay-close:focus {
-  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {

package/build-style/style.css

@@ -2763,16 +2763,20 @@ button.wp-block-navigation-item__content {
     animation-fill-mode: forwards;
   }
 }
-.wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
   padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
+}
+.wp-block-navigation__responsive-container.is-menu-open {
   overflow: auto;
   z-index: 100000;
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
+.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
   padding-top: calc(2rem + 24px);
+}
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   overflow: visible;
   display: flex;
   flex-direction: column;
@@ -2827,6 +2831,16 @@ button.wp-block-navigation-item__content {
   right: auto;
   left: auto;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay .wp-block-navigation__overlay-container {
+  display: none;
+  width: 100%;
+}
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
+  display: none;
+}
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
+  display: block;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;
@@ -2843,11 +2857,11 @@ button.wp-block-navigation-item__content {
   }
 }
 
-.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
   background-color: #fff;
 }
 
-.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
   color: #000;
 }
 
@@ -2902,6 +2916,11 @@ button.wp-block-navigation-item__content {
   font-size: inherit;
 }
 
+.disable-default-overlay .wp-block-navigation__responsive-container-close {
+  top: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
+  right: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
+}
+
 .wp-block-navigation__responsive-close {
   width: 100%;
 }
@@ -2924,11 +2943,11 @@ button.wp-block-navigation-item__content {
   position: relative;
 }
 
-.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
+.has-modal-open .admin-bar .is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
   margin-top: 46px;
 }
 @media (min-width: 782px) {
-  .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
+  .has-modal-open .admin-bar .is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
     margin-top: 32px;
   }
 }
@@ -2970,7 +2989,6 @@ html.has-modal-open {
   text-decoration: none;
 }
 .wp-block-navigation-overlay-close:focus {
-  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.37.2-next.79a2f3cdd.0",
+	"version": "9.37.2-next.ba3aee3a2.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -93,41 +93,41 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/api-fetch": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/autop": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/base-styles": "^6.13.2-next.79a2f3cdd.0",
-		"@wordpress/blob": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/block-editor": "^15.10.1-next.79a2f3cdd.0",
-		"@wordpress/blocks": "^15.10.1-next.79a2f3cdd.0",
-		"@wordpress/components": "^32.0.1-next.79a2f3cdd.0",
-		"@wordpress/compose": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/core-data": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/data": "^10.37.1-next.79a2f3cdd.0",
-		"@wordpress/date": "^5.37.2-next.79a2f3cdd.0",
-		"@wordpress/deprecated": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/dom": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/element": "^6.37.1-next.79a2f3cdd.0",
-		"@wordpress/escape-html": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/hooks": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/html-entities": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/i18n": "^6.10.1-next.79a2f3cdd.0",
-		"@wordpress/icons": "^11.4.1-next.79a2f3cdd.0",
-		"@wordpress/interactivity": "^6.37.1-next.79a2f3cdd.0",
-		"@wordpress/interactivity-router": "^2.37.1-next.79a2f3cdd.0",
-		"@wordpress/keyboard-shortcuts": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/keycodes": "^4.38.1-next.79a2f3cdd.0",
-		"@wordpress/latex-to-mathml": "^1.5.1-next.79a2f3cdd.0",
-		"@wordpress/notices": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/patterns": "^2.37.1-next.79a2f3cdd.0",
-		"@wordpress/primitives": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/private-apis": "^1.37.1-next.79a2f3cdd.0",
-		"@wordpress/reusable-blocks": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/rich-text": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/server-side-render": "^6.13.1-next.79a2f3cdd.0",
-		"@wordpress/url": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/viewport": "^6.37.1-next.79a2f3cdd.0",
-		"@wordpress/wordcount": "^4.37.1-next.79a2f3cdd.0",
+		"@wordpress/a11y": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/api-fetch": "^7.37.1-next.ba3aee3a2.0",
+		"@wordpress/autop": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/base-styles": "^6.13.2-next.ba3aee3a2.0",
+		"@wordpress/blob": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/block-editor": "^15.10.1-next.ba3aee3a2.0",
+		"@wordpress/blocks": "^15.10.1-next.ba3aee3a2.0",
+		"@wordpress/components": "^32.0.1-next.ba3aee3a2.0",
+		"@wordpress/compose": "^7.37.1-next.ba3aee3a2.0",
+		"@wordpress/core-data": "^7.37.1-next.ba3aee3a2.0",
+		"@wordpress/data": "^10.37.1-next.ba3aee3a2.0",
+		"@wordpress/date": "^5.37.2-next.ba3aee3a2.0",
+		"@wordpress/deprecated": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/dom": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/element": "^6.37.1-next.ba3aee3a2.0",
+		"@wordpress/escape-html": "^3.37.1-next.ba3aee3a2.0",
+		"@wordpress/hooks": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/html-entities": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/i18n": "^6.10.1-next.ba3aee3a2.0",
+		"@wordpress/icons": "^11.4.1-next.ba3aee3a2.0",
+		"@wordpress/interactivity": "^6.37.2-next.ba3aee3a2.0",
+		"@wordpress/interactivity-router": "^2.37.1-next.ba3aee3a2.0",
+		"@wordpress/keyboard-shortcuts": "^5.37.1-next.ba3aee3a2.0",
+		"@wordpress/keycodes": "^4.38.1-next.ba3aee3a2.0",
+		"@wordpress/latex-to-mathml": "^1.5.1-next.ba3aee3a2.0",
+		"@wordpress/notices": "^5.37.1-next.ba3aee3a2.0",
+		"@wordpress/patterns": "^2.37.1-next.ba3aee3a2.0",
+		"@wordpress/primitives": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/private-apis": "^1.37.1-next.ba3aee3a2.0",
+		"@wordpress/reusable-blocks": "^5.37.1-next.ba3aee3a2.0",
+		"@wordpress/rich-text": "^7.37.1-next.ba3aee3a2.0",
+		"@wordpress/server-side-render": "^6.13.1-next.ba3aee3a2.0",
+		"@wordpress/url": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/viewport": "^6.37.1-next.ba3aee3a2.0",
+		"@wordpress/wordcount": "^4.37.1-next.ba3aee3a2.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -149,5 +149,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6a324496a37d9a333a11d4d7fe5fb93b8152a5ba"
+	"gitHead": "67d2e486fcd40c753591cf911ca0659132f519ca"
 }

package/src/code/transforms.js

@@ -12,7 +12,7 @@ import { getTransformedAttributes } from '../utils/get-transformed-attributes';
 const transforms = {
 	from: [
 		{
-			type: 'enter',
+			type: 'input',
 			regExp: /^```$/,
 			transform: () => createBlock( 'core/code' ),
 		},

package/src/image/block.json

@@ -89,6 +89,9 @@
 		"scale": {
 			"type": "string"
 		},
+		"focalPoint": {
+			"type": "object"
+		},
 		"sizeSlug": {
 			"type": "string"
 		},

package/src/image/image.js

@@ -4,6 +4,7 @@
 import { isBlobURL } from '@wordpress/blob';
 import {
 	ExternalLink,
+	FocalPointPicker,
 	ResizableBox,
 	Spinner,
 	TextareaControl,
@@ -61,7 +62,7 @@ import {
 	SIZED_LAYOUTS,
 	DEFAULT_MEDIA_SIZE_SLUG,
 } from './constants';
-import { evalAspectRatio } from './utils';
+import { evalAspectRatio, mediaPosition } from './utils';
 
 const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -279,6 +280,7 @@ export default function Image( {
 		height,
 		aspectRatio,
 		scale,
+		focalPoint,
 		linkTarget,
 		sizeSlug,
 		lightbox,
@@ -468,6 +470,15 @@ export default function Image( {
 		setAttributes( { alt: newAlt } );
 	}
 
+	const imperativeFocalPointPreview = ( value ) => {
+		if ( imageElement ) {
+			imageElement.style.setProperty(
+				'object-position',
+				mediaPosition( value )
+			);
+		}
+	};
+
 	function updateImage( newSizeSlug ) {
 		const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url;
 		if ( ! newUrl ) {
@@ -713,7 +724,6 @@ export default function Image( {
 		);
 
 	const hasDataFormBlockFields =
-		window?.__experimentalContentOnlyPatternInsertion &&
 		window?.__experimentalContentOnlyInspectorFields;
 
 	const controls = (
@@ -864,9 +874,36 @@ export default function Image( {
 					width: undefined,
 					height: undefined,
 					scale: undefined,
+					focalPoint: undefined,
 				} ) }
 			>
 				{ dimensionsControl }
+				{ url && scale && (
+					<ToolsPanelItem
+						label={ __( 'Focal point' ) }
+						isShownByDefault
+						hasValue={ () => !! focalPoint }
+						onDeselect={ () =>
+							setAttributes( {
+								focalPoint: undefined,
+							} )
+						}
+						panelId={ clientId }
+					>
+						<FocalPointPicker
+							label={ __( 'Focal point' ) }
+							url={ url }
+							value={ focalPoint }
+							onDragStart={ imperativeFocalPointPreview }
+							onDrag={ imperativeFocalPointPreview }
+							onChange={ ( newFocalPoint ) =>
+								setAttributes( {
+									focalPoint: newFocalPoint,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				) }
 			</InspectorControls>
 			{ !! imageSizeOptions.length && (
 				<InspectorControls>
@@ -965,6 +1002,10 @@ export default function Image( {
 							  }
 							: { width, height } ),
 						objectFit: scale,
+						objectPosition:
+							focalPoint && scale
+								? mediaPosition( focalPoint )
+								: undefined,
 						...borderProps.style,
 						...shadowProps.style,
 					} }

package/src/image/save.js

@@ -14,6 +14,11 @@ import {
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { mediaPosition } from './utils';
+
 export default function save( { attributes } ) {
 	const {
 		url,
@@ -27,6 +32,7 @@ export default function save( { attributes } ) {
 		height,
 		aspectRatio,
 		scale,
+		focalPoint,
 		id,
 		linkTarget,
 		sizeSlug,
@@ -64,6 +70,10 @@ export default function save( { attributes } ) {
 				...shadowProps.style,
 				aspectRatio,
 				objectFit: scale,
+				objectPosition:
+					focalPoint && scale
+						? mediaPosition( focalPoint )
+						: undefined,
 				width,
 				height,
 			} }

package/src/image/utils.js

@@ -93,3 +93,7 @@ export function isValidFileType( file ) {
 		( mediaType ) => file.type.indexOf( mediaType ) === 0
 	);
 }
+
+export function mediaPosition( { x, y } = { x: 0.5, y: 0.5 } ) {
+	return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
+}

package/src/navigation/constants.js

@@ -27,3 +27,12 @@ export const SELECT_NAVIGATION_MENUS_ARGS = [
 	'wp_navigation',
 	PRELOADED_NAVIGATION_MENUS_QUERY,
 ];
+
+/**
+ * Template part area identifier for navigation overlays.
+ * This constant defines the area name used when registering and filtering
+ * template parts that are specifically designed for navigation overlay layouts.
+ *
+ * @type {string}
+ */
+export const NAVIGATION_OVERLAY_TEMPLATE_PART_AREA = 'navigation-overlay';

package/src/navigation/edit/overlay-template-part-selector.js

@@ -21,6 +21,7 @@ import { plus } from '@wordpress/icons';
  */
 import { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';
 import useCreateOverlayTemplatePart from './use-create-overlay';
+import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';
 
 /**
  * Overlay Template Part Selector component.
@@ -55,7 +56,8 @@ export default function OverlayTemplatePartSelector( {
 			return [];
 		}
 		return templateParts.filter(
-			( templatePart ) => templatePart.area === 'overlay'
+			( templatePart ) =>
+				templatePart.area === NAVIGATION_OVERLAY_TEMPLATE_PART_AREA
 		);
 	}, [ templateParts ] );
 

package/src/navigation/edit/test/overlay-template-part-selector.js

@@ -60,7 +60,7 @@ const templatePart1 = {
 	title: {
 		rendered: 'My Overlay',
 	},
-	area: 'overlay',
+	area: 'navigation-overlay',
 };
 
 const templatePart2 = {
@@ -70,7 +70,7 @@ const templatePart2 = {
 	title: {
 		rendered: 'Another Overlay',
 	},
-	area: 'overlay',
+	area: 'navigation-overlay',
 };
 
 const templatePartOtherArea = {
@@ -470,7 +470,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 				title: {
 					rendered: 'Overlay',
 				},
-				area: 'overlay',
+				area: 'navigation-overlay',
 			};
 
 			mockCreateOverlayTemplatePart.mockResolvedValue( newOverlay );

package/src/navigation/edit/test/use-create-overlay.js

@@ -42,7 +42,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 			title: {
 				rendered: 'Overlay',
 			},
-			area: 'overlay',
+			area: 'navigation-overlay',
 		};
 
 		mockSaveEntityRecord.mockResolvedValue( createdOverlay );
@@ -62,7 +62,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 			expect.objectContaining( {
 				slug: 'overlay',
 				title: 'Overlay',
-				area: 'overlay',
+				area: 'navigation-overlay',
 			} ),
 			{ throwOnError: true }
 		);
@@ -77,7 +77,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 			title: {
 				rendered: 'Overlay',
 			},
-			area: 'overlay',
+			area: 'navigation-overlay',
 		};
 		const overlayTemplateParts = [ existingOverlay ];
 		const createdOverlay = {
@@ -87,7 +87,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 			title: {
 				rendered: 'Overlay 2',
 			},
-			area: 'overlay',
+			area: 'navigation-overlay',
 		};
 
 		mockSaveEntityRecord.mockResolvedValue( createdOverlay );
@@ -107,7 +107,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 			expect.objectContaining( {
 				title: 'Overlay 2',
 				slug: 'overlay-2',
-				area: 'overlay',
+				area: 'navigation-overlay',
 			} ),
 			{ throwOnError: true }
 		);

package/src/navigation/edit/use-create-overlay.js

@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from './utils';
+import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';
 
 /**
  * Hook to create a new overlay template part.
@@ -40,7 +41,7 @@ export default function useCreateOverlayTemplatePart( overlayTemplateParts ) {
 			{
 				slug: cleanSlug,
 				title: uniqueTitle,
-				area: 'overlay',
+				area: NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
 			},
 			{ throwOnError: true }
 		);