@wordpress/block-library 8.12.0 → 8.12.2

package/build-style/style.css

@@ -97,6 +97,7 @@
 
 .wp-block-avatar {
   box-sizing: border-box;
+  line-height: 0;
 }
 .wp-block-avatar img {
   box-sizing: border-box;
@@ -1647,7 +1648,6 @@ h6.has-background {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  padding: 30px;
 }
 .wp-lightbox-overlay .wp-block-image figcaption {
   display: none;
@@ -1669,18 +1669,54 @@ h6.has-background {
   background-color: white;
   opacity: 0.9;
 }
-.wp-lightbox-overlay.initialized {
-  animation: both turn-off-visibility 300ms;
+.wp-lightbox-overlay.fade.active {
+  visibility: visible;
+  animation: both turn-on-visibility 0.25s;
+}
+.wp-lightbox-overlay.fade.active img {
+  animation: both turn-on-visibility 0.3s;
 }
-.wp-lightbox-overlay.initialized img {
-  animation: both turn-off-visibility 250ms;
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) {
+  animation: both turn-off-visibility 0.3s;
+}
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) img {
+  animation: both turn-off-visibility 0.25s;
+}
+.wp-lightbox-overlay.zoom img {
+  position: absolute;
+  transform-origin: top left;
+  width: var(--lightbox-image-max-width);
+  height: var(--lightbox-image-max-height);
 }
-.wp-lightbox-overlay.initialized.active {
+.wp-lightbox-overlay.zoom.active {
+  opacity: 1;
   visibility: visible;
-  animation: both turn-on-visibility 250ms;
 }
-.wp-lightbox-overlay.initialized.active img {
-  animation: both turn-on-visibility 300ms;
+.wp-lightbox-overlay.zoom.active .wp-block-image img {
+  animation: lightbox-zoom-in 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.active .wp-block-image img {
+    animation: both turn-on-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.active .scrim {
+  animation: turn-on-visibility 0.4s forwards;
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+  animation: lightbox-zoom-out 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+    animation: both turn-off-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim {
+  animation: turn-off-visibility 0.4s forwards;
+}
+
+html.has-lightbox-open {
+  overflow: hidden;
 }
 
 @keyframes turn-on-visibility {
@@ -1705,10 +1741,34 @@ h6.has-background {
     visibility: hidden;
   }
 }
-html.has-lightbox-open {
-  overflow: hidden;
+@keyframes lightbox-zoom-in {
+  0% {
+    left: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
+  100% {
+    left: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+}
+@keyframes lightbox-zoom-out {
+  0% {
+    visibility: visible;
+    left: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+  99% {
+    visibility: visible;
+  }
+  100% {
+    left: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
 }
-
 ol.wp-block-latest-comments {
   margin-left: 0;
   box-sizing: border-box;
@@ -3768,6 +3828,25 @@ pre.wp-block-verse {
   margin-bottom: 1em;
 }
 
+.editor-styles-wrapper,
+.entry-content {
+  counter-reset: footnotes;
+}
+
+.fn {
+  vertical-align: super;
+  font-size: smaller;
+  counter-increment: footnotes;
+  display: inline-block;
+  text-indent: -9999999px;
+}
+
+.fn::after {
+  content: "[" counter(footnotes) "]";
+  text-indent: 0;
+  float: left;
+}
+
 /**
  * Element styles.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.12.0",
+	"version": "8.12.2",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@preact/signals": "^1.1.3",
-		"@wordpress/a11y": "^3.35.0",
-		"@wordpress/api-fetch": "^6.32.0",
-		"@wordpress/autop": "^3.35.0",
-		"@wordpress/blob": "^3.35.0",
-		"@wordpress/block-editor": "^12.3.0",
-		"@wordpress/blocks": "^12.12.0",
-		"@wordpress/components": "^25.1.0",
-		"@wordpress/compose": "^6.12.0",
-		"@wordpress/core-data": "^6.12.0",
-		"@wordpress/data": "^9.5.0",
-		"@wordpress/date": "^4.35.0",
-		"@wordpress/deprecated": "^3.35.0",
-		"@wordpress/dom": "^3.35.0",
-		"@wordpress/element": "^5.12.0",
-		"@wordpress/escape-html": "^2.35.0",
-		"@wordpress/hooks": "^3.35.0",
-		"@wordpress/html-entities": "^3.35.0",
-		"@wordpress/i18n": "^4.35.0",
-		"@wordpress/icons": "^9.26.0",
-		"@wordpress/keycodes": "^3.35.0",
-		"@wordpress/notices": "^4.3.0",
-		"@wordpress/primitives": "^3.33.0",
-		"@wordpress/private-apis": "^0.17.0",
-		"@wordpress/reusable-blocks": "^4.12.0",
-		"@wordpress/rich-text": "^6.12.0",
-		"@wordpress/server-side-render": "^4.12.0",
-		"@wordpress/url": "^3.36.0",
-		"@wordpress/viewport": "^5.12.0",
-		"@wordpress/wordcount": "^3.35.0",
+		"@wordpress/a11y": "^3.35.1",
+		"@wordpress/api-fetch": "^6.32.1",
+		"@wordpress/autop": "^3.35.1",
+		"@wordpress/blob": "^3.35.1",
+		"@wordpress/block-editor": "^12.3.2",
+		"@wordpress/blocks": "^12.12.1",
+		"@wordpress/components": "^25.1.2",
+		"@wordpress/compose": "^6.12.1",
+		"@wordpress/core-data": "^6.12.2",
+		"@wordpress/data": "^9.5.1",
+		"@wordpress/date": "^4.35.1",
+		"@wordpress/deprecated": "^3.35.1",
+		"@wordpress/dom": "^3.35.1",
+		"@wordpress/element": "^5.12.1",
+		"@wordpress/escape-html": "^2.35.1",
+		"@wordpress/hooks": "^3.35.1",
+		"@wordpress/html-entities": "^3.35.1",
+		"@wordpress/i18n": "^4.35.1",
+		"@wordpress/icons": "^9.26.2",
+		"@wordpress/keycodes": "^3.35.1",
+		"@wordpress/notices": "^4.3.1",
+		"@wordpress/primitives": "^3.33.1",
+		"@wordpress/private-apis": "^0.17.1",
+		"@wordpress/reusable-blocks": "^4.12.2",
+		"@wordpress/rich-text": "^6.12.1",
+		"@wordpress/server-side-render": "^4.12.2",
+		"@wordpress/url": "^3.36.1",
+		"@wordpress/viewport": "^5.12.1",
+		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -73,7 +73,8 @@
 		"memize": "^2.1.0",
 		"micromodal": "^0.4.10",
 		"preact": "^10.13.2",
-		"remove-accents": "^0.4.2"
+		"remove-accents": "^0.4.2",
+		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -82,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
+	"gitHead": "a00463f06c90ae6705951861eb889e67a52bf448"
 }

package/src/archives/block.json

@@ -26,7 +26,6 @@
 	},
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/avatar/block.json

@@ -25,7 +25,6 @@
 	},
 	"usesContext": [ "postType", "postId", "commentId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"align": true,
 		"alignWide": false,
@@ -49,6 +48,6 @@
 			"__experimentalDuotone": "img"
 		}
 	},
-	"editorStyle": "wp-block-avatar",
+	"editorStyle": "wp-block-avatar-editor",
 	"style": "wp-block-avatar"
 }

package/src/avatar/style.scss

@@ -1,6 +1,7 @@
 .wp-block-avatar {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
+	line-height: 0;
 	img {
 		box-sizing: border-box;
 	}

package/src/block/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/block",
-	"title": "Reusable block",
+	"title": "Pattern",
 	"category": "reusable",
 	"description": "Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.",
 	"textdomain": "default",

package/src/block/edit.js

@@ -59,6 +59,7 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		'wp_block',
 		{ id: ref }
 	);
+
 	const [ title, setTitle ] = useEntityProp(
 		'postType',
 		'wp_block',

package/src/block/test/__snapshots__/transforms.native.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Reusable block block transforms to Columns block 1`] = `
+exports[`Pattern block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
 <div class="wp-block-column" style="flex-basis:100%"><!-- wp:block {"ref":130} /--></div>
@@ -8,7 +8,7 @@ exports[`Reusable block block transforms to Columns block 1`] = `
 <!-- /wp:columns -->"
 `;
 
-exports[`Reusable block block transforms to Group block 1`] = `
+exports[`Pattern block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:block {"ref":130} /--></div>
 <!-- /wp:group -->"

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

@@ -114,7 +114,7 @@ describe( 'Reusable block', () => {
 
 		// Get the reusable block.
 		const [ reusableBlock ] = await screen.findAllByLabelText(
-			/Reusable block Block\. Row 1/
+			/Pattern Block\. Row 1/
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -131,7 +131,7 @@ describe( 'Reusable block', () => {
 		} );
 
 		const [ reusableBlock ] = await screen.findAllByLabelText(
-			/Reusable block Block\. Row 1/
+			/Pattern Block\. Row 1/
 		);
 
 		const blockDeleted = within( reusableBlock ).getByText(
@@ -142,9 +142,7 @@ describe( 'Reusable block', () => {
 		expect( blockDeleted ).toBeDefined();
 	} );
 
-	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
-	// triggering `onLayout*` on the element: https://github.com/callstack/react-native-testing-library/issues/897.
-	it.skip( 'renders block content', async () => {
+	it( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
@@ -163,8 +161,8 @@ describe( 'Reusable block', () => {
 			initialHtml,
 		} );
 
-		const [ reusableBlock ] = await screen.findByLabelText(
-			/Reusable block Block\. Row 1/
+		const reusableBlock = await screen.findByLabelText(
+			/Pattern Block\. Row 1/
 		);
 
 		const innerBlockListWrapper = await within(

package/src/block/test/transforms.native.js

@@ -9,7 +9,7 @@ import {
 	getBlockTransformOptions,
 } from 'test/helpers';
 
-const block = 'Reusable block';
+const block = 'Pattern';
 const initialHtml = `
 <!-- wp:block {"ref":130} /-->`;
 

package/src/buttons/block.json

@@ -32,7 +32,7 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {

package/src/buttons/edit.js

@@ -36,7 +36,7 @@ const DEFAULT_BLOCK = {
 };
 
 function ButtonsEdit( { attributes, className } ) {
-	const { fontSize, style } = attributes;
+	const { fontSize, layout, style } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
@@ -59,8 +59,8 @@ function ButtonsEdit( { attributes, className } ) {
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],
-
 		templateInsertUpdatesSelection: true,
+		orientation: layout?.orientation ?? 'horizontal',
 	} );
 
 	return <div { ...innerBlocksProps } />;

package/src/buttons/edit.native.js

@@ -28,6 +28,10 @@ const ALLOWED_BLOCKS = [ buttonBlockName ];
 
 const layoutProp = { type: 'default', alignments: [] };
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 export default function ButtonsEdit( {
 	attributes: { layout, align },
 	clientId,
@@ -41,7 +45,7 @@ export default function ButtonsEdit( {
 	const { marginLeft: spacing } = styles.spacing;
 
 	// Extract attributes from block layout
-	const layoutBlockSupport = getBlockSupport( name, '__experimentalLayout' );
+	const layoutBlockSupport = getBlockSupport( name, 'layout' );
 	const defaultBlockLayout = layoutBlockSupport?.default;
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { justifyContent } = usedLayout;
@@ -137,10 +141,7 @@ export default function ButtonsEdit( {
 								},
 							} )
 						}
-						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
-						} }
+						popoverProps={ POPOVER_PROPS }
 					/>
 				</BlockControls>
 			) }
@@ -167,7 +168,7 @@ export default function ButtonsEdit( {
 				parentWidth={ maxWidth } // This value controls the width of that the buttons are able to expand to.
 				marginHorizontal={ spacing }
 				marginVertical={ spacing }
-				__experimentalLayout={ layoutProp }
+				layout={ layoutProp }
 				templateInsertUpdatesSelection
 				blockWidth={ blockWidth }
 			/>

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

@@ -71,3 +71,9 @@ exports[`Buttons block when a button is shown removing button along with buttons
 <p></p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Buttons block when a button is shown removing button along with buttons block removes the button and buttons block when deleting the block using the delete (backspace) key 1`] = `
+"<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -18,6 +18,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE } from '@wordpress/keycodes';
 
 const BUTTONS_HTML = `<!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button /--></div>
@@ -80,7 +81,8 @@ describe( 'Buttons block', () => {
 			);
 
 			const incrementButton = await within( radiusStepper ).findByTestId(
-				'Increment'
+				'Increment',
+				{ hidden: true }
 			);
 			fireEvent( incrementButton, 'onPressIn' );
 
@@ -180,7 +182,7 @@ describe( 'Buttons block', () => {
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
-			fireEvent.press( await screen.findByText( 'Button' ) );
+			fireEvent.press( within( blockList ).getByText( 'Button' ) );
 
 			// Get new button
 			const secondButtonBlock = await getBlock( screen, 'Button', {
@@ -232,6 +234,32 @@ describe( 'Buttons block', () => {
 
 				expect( getEditorHtml() ).toMatchSnapshot();
 			} );
+
+			it( 'removes the button and buttons block when deleting the block using the delete (backspace) key', async () => {
+				const screen = await initializeEditor( {
+					initialHtml: BUTTONS_HTML,
+				} );
+
+				// Get block
+				const buttonsBlock = await getBlock( screen, 'Buttons' );
+				triggerBlockListLayout( buttonsBlock );
+
+				// Get inner button block
+				const buttonBlock = await getBlock( screen, 'Button' );
+				fireEvent.press( buttonBlock );
+
+				const buttonInput =
+					within( buttonBlock ).getByLabelText( 'Text input. Empty' );
+
+				// Delete block
+				fireEvent( buttonInput, 'onKeyDown', {
+					nativeEvent: {},
+					preventDefault() {},
+					keyCode: BACKSPACE,
+				} );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} );
 		} );
 	} );
 

package/src/calendar/block.json

@@ -17,7 +17,6 @@
 	},
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"color": {
 			"link": true,
 			"__experimentalSkipSerialization": [ "text", "background" ],

package/src/categories/block.json

@@ -30,7 +30,6 @@
 	},
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/column/block.json

@@ -65,6 +65,6 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"layout": true
 	}
 }

package/src/columns/block.json

@@ -43,7 +43,7 @@
 				"blockGap": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowEditing": false,