@wordpress/block-library 9.33.8 → 9.33.10

package/build-style/accordion-heading/style-rtl.css

@@ -1,8 +1,3 @@
-.wp-block-accordion-heading.wp-block-accordion-heading {
-  min-width: 100%;
-  margin: 0;
-}
-
 .wp-block-accordion-heading__toggle {
   font-family: inherit;
   font-size: inherit;
@@ -13,7 +8,9 @@
   text-decoration: inherit;
   word-spacing: inherit;
   font-style: inherit;
+  background: none;
   border: none;
+  color: inherit;
   padding: var(--wp--preset--spacing--20, 1em) 0;
   cursor: pointer;
   overflow: hidden;
@@ -21,24 +18,10 @@
   align-items: center;
   text-align: inherit;
   width: 100%;
-  background-color: inherit !important;
-  color: inherit !important;
 }
 .wp-block-accordion-heading__toggle:not(:focus-visible) {
   outline: none;
 }
-.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
-  text-decoration: none;
-  background-color: inherit !important;
-  box-shadow: none;
-  color: inherit;
-  border: none;
-  padding: var(--wp--preset--spacing--20, 1em) 0;
-}
-.wp-block-accordion-heading__toggle:focus-visible {
-  outline: auto;
-  outline-offset: 0;
-}
 .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
   text-decoration: underline;
 }

package/build-style/accordion-heading/style.css

@@ -1,8 +1,3 @@
-.wp-block-accordion-heading.wp-block-accordion-heading {
-  min-width: 100%;
-  margin: 0;
-}
-
 .wp-block-accordion-heading__toggle {
   font-family: inherit;
   font-size: inherit;
@@ -13,7 +8,9 @@
   text-decoration: inherit;
   word-spacing: inherit;
   font-style: inherit;
+  background: none;
   border: none;
+  color: inherit;
   padding: var(--wp--preset--spacing--20, 1em) 0;
   cursor: pointer;
   overflow: hidden;
@@ -21,24 +18,10 @@
   align-items: center;
   text-align: inherit;
   width: 100%;
-  background-color: inherit !important;
-  color: inherit !important;
 }
 .wp-block-accordion-heading__toggle:not(:focus-visible) {
   outline: none;
 }
-.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
-  text-decoration: none;
-  background-color: inherit !important;
-  box-shadow: none;
-  color: inherit;
-  border: none;
-  padding: var(--wp--preset--spacing--20, 1em) 0;
-}
-.wp-block-accordion-heading__toggle:focus-visible {
-  outline: auto;
-  outline-offset: 0;
-}
 .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
   text-decoration: underline;
 }

package/build-style/accordion-item/style-rtl.css

@@ -1,10 +1,3 @@
-.wp-block-accordion-item {
-  display: grid;
-  grid-template-rows: max-content 0fr;
-}
-.wp-block-accordion-item.is-open {
-  grid-template-rows: max-content 1fr;
-}
 .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
   transform: rotate(-45deg);
 }

package/build-style/accordion-item/style.css

@@ -1,10 +1,3 @@
-.wp-block-accordion-item {
-  display: grid;
-  grid-template-rows: max-content 0fr;
-}
-.wp-block-accordion-item.is-open {
-  grid-template-rows: max-content 1fr;
-}
 .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
   transform: rotate(45deg);
 }

package/build-style/accordion-panel/style-rtl.css

@@ -1,7 +1,4 @@
-.wp-block-accordion-panel.wp-block-accordion-panel {
-  min-width: 100%;
-}
-.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }

package/build-style/accordion-panel/style.css

@@ -1,7 +1,4 @@
-.wp-block-accordion-panel.wp-block-accordion-panel {
-  min-width: 100%;
-}
-.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }

package/build-style/classic-rtl.css

@@ -14,4 +14,28 @@
 .wp-block-file__button {
   background: #32373c;
   color: #fff;
+}
+
+.wp-block-accordion-heading {
+  margin: 0;
+}
+
+.wp-block-accordion-heading__toggle {
+  background-color: inherit !important;
+  color: inherit !important;
+}
+.wp-block-accordion-heading__toggle:not(:focus-visible) {
+  outline: none;
+}
+.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
+  text-decoration: none;
+  background-color: inherit !important;
+  box-shadow: none;
+  color: inherit;
+  border: none;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+}
+.wp-block-accordion-heading__toggle:focus-visible {
+  outline-offset: 0;
+  outline: auto;
 }

package/build-style/classic.css

@@ -14,4 +14,28 @@
 .wp-block-file__button {
   background: #32373c;
   color: #fff;
+}
+
+.wp-block-accordion-heading {
+  margin: 0;
+}
+
+.wp-block-accordion-heading__toggle {
+  background-color: inherit !important;
+  color: inherit !important;
+}
+.wp-block-accordion-heading__toggle:not(:focus-visible) {
+  outline: none;
+}
+.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
+  text-decoration: none;
+  background-color: inherit !important;
+  box-shadow: none;
+  color: inherit;
+  border: none;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+}
+.wp-block-accordion-heading__toggle:focus-visible {
+  outline-offset: 0;
+  outline: auto;
 }

package/build-style/media-text/style-rtl.css

@@ -90,6 +90,7 @@
 
 /* Image fill for versions 8 and onwards */
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+  position: relative;
   height: 100%;
   min-height: 250px;
 }
@@ -100,6 +101,7 @@
 }
 
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+  position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;

package/build-style/media-text/style.css

@@ -100,6 +100,7 @@
 
 /* Image fill for versions 8 and onwards */
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+  position: relative;
   height: 100%;
   min-height: 250px;
 }
@@ -110,6 +111,7 @@
 }
 
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+  position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;

package/build-style/style-rtl.css

@@ -1,11 +1,8 @@
 @charset "UTF-8";
-.wp-block-accordion-item {
-  display: grid;
-  grid-template-rows: max-content 0fr;
-}
-.wp-block-accordion-item.is-open {
-  grid-template-rows: max-content 1fr;
+.wp-block-accordion {
+  box-sizing: border-box;
 }
+
 .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
   transform: rotate(-45deg);
 }
@@ -21,11 +18,6 @@
   }
 }
 
-.wp-block-accordion-heading.wp-block-accordion-heading {
-  min-width: 100%;
-  margin: 0;
-}
-
 .wp-block-accordion-heading__toggle {
   font-family: inherit;
   font-size: inherit;
@@ -36,7 +28,9 @@
   text-decoration: inherit;
   word-spacing: inherit;
   font-style: inherit;
+  background: none;
   border: none;
+  color: inherit;
   padding: var(--wp--preset--spacing--20, 1em) 0;
   cursor: pointer;
   overflow: hidden;
@@ -44,24 +38,10 @@
   align-items: center;
   text-align: inherit;
   width: 100%;
-  background-color: inherit !important;
-  color: inherit !important;
 }
 .wp-block-accordion-heading__toggle:not(:focus-visible) {
   outline: none;
 }
-.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
-  text-decoration: none;
-  background-color: inherit !important;
-  box-shadow: none;
-  color: inherit;
-  border: none;
-  padding: var(--wp--preset--spacing--20, 1em) 0;
-}
-.wp-block-accordion-heading__toggle:focus-visible {
-  outline: auto;
-  outline-offset: 0;
-}
 .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
   text-decoration: underline;
 }
@@ -78,10 +58,7 @@
   justify-content: center;
 }
 
-.wp-block-accordion-panel.wp-block-accordion-panel {
-  min-width: 100%;
-}
-.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }
@@ -2297,6 +2274,7 @@ ul {
 
 /* Image fill for versions 8 and onwards */
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+  position: relative;
   height: 100%;
   min-height: 250px;
 }
@@ -2307,6 +2285,7 @@ ul {
 }
 
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+  position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;

package/build-style/style.css

@@ -1,11 +1,8 @@
 @charset "UTF-8";
-.wp-block-accordion-item {
-  display: grid;
-  grid-template-rows: max-content 0fr;
-}
-.wp-block-accordion-item.is-open {
-  grid-template-rows: max-content 1fr;
+.wp-block-accordion {
+  box-sizing: border-box;
 }
+
 .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
   transform: rotate(45deg);
 }
@@ -21,11 +18,6 @@
   }
 }
 
-.wp-block-accordion-heading.wp-block-accordion-heading {
-  min-width: 100%;
-  margin: 0;
-}
-
 .wp-block-accordion-heading__toggle {
   font-family: inherit;
   font-size: inherit;
@@ -36,7 +28,9 @@
   text-decoration: inherit;
   word-spacing: inherit;
   font-style: inherit;
+  background: none;
   border: none;
+  color: inherit;
   padding: var(--wp--preset--spacing--20, 1em) 0;
   cursor: pointer;
   overflow: hidden;
@@ -44,24 +38,10 @@
   align-items: center;
   text-align: inherit;
   width: 100%;
-  background-color: inherit !important;
-  color: inherit !important;
 }
 .wp-block-accordion-heading__toggle:not(:focus-visible) {
   outline: none;
 }
-.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
-  text-decoration: none;
-  background-color: inherit !important;
-  box-shadow: none;
-  color: inherit;
-  border: none;
-  padding: var(--wp--preset--spacing--20, 1em) 0;
-}
-.wp-block-accordion-heading__toggle:focus-visible {
-  outline: auto;
-  outline-offset: 0;
-}
 .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
   text-decoration: underline;
 }
@@ -78,10 +58,7 @@
   justify-content: center;
 }
 
-.wp-block-accordion-panel.wp-block-accordion-panel {
-  min-width: 100%;
-}
-.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }
@@ -2327,6 +2304,7 @@ ul {
 
 /* Image fill for versions 8 and onwards */
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+  position: relative;
   height: 100%;
   min-height: 250px;
 }
@@ -2337,6 +2315,7 @@ ul {
 }
 
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+  position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.33.8",
+	"version": "9.33.10",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -86,11 +86,11 @@
 		"@wordpress/autop": "^4.33.1",
 		"@wordpress/base-styles": "^6.9.1",
 		"@wordpress/blob": "^4.33.1",
-		"@wordpress/block-editor": "^15.6.7",
-		"@wordpress/blocks": "^15.6.2",
-		"@wordpress/components": "^30.6.4",
+		"@wordpress/block-editor": "^15.6.9",
+		"@wordpress/blocks": "^15.6.3",
+		"@wordpress/components": "^30.6.5",
 		"@wordpress/compose": "^7.33.1",
-		"@wordpress/core-data": "^7.33.7",
+		"@wordpress/core-data": "^7.33.9",
 		"@wordpress/data": "^10.33.1",
 		"@wordpress/date": "^5.33.1",
 		"@wordpress/deprecated": "^4.33.1",
@@ -101,18 +101,18 @@
 		"@wordpress/html-entities": "^4.33.1",
 		"@wordpress/i18n": "^6.6.1",
 		"@wordpress/icons": "^11.0.1",
-		"@wordpress/interactivity": "^6.33.1",
-		"@wordpress/interactivity-router": "^2.33.1",
+		"@wordpress/interactivity": "^6.33.3",
+		"@wordpress/interactivity-router": "^2.33.3",
 		"@wordpress/keyboard-shortcuts": "^5.33.1",
 		"@wordpress/keycodes": "^4.33.1",
 		"@wordpress/latex-to-mathml": "^1.1.2",
 		"@wordpress/notices": "^5.33.1",
-		"@wordpress/patterns": "^2.33.7",
+		"@wordpress/patterns": "^2.33.9",
 		"@wordpress/primitives": "^4.33.1",
 		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/reusable-blocks": "^5.33.7",
+		"@wordpress/reusable-blocks": "^5.33.9",
 		"@wordpress/rich-text": "^7.33.2",
-		"@wordpress/server-side-render": "^6.9.4",
+		"@wordpress/server-side-render": "^6.9.5",
 		"@wordpress/url": "^4.33.1",
 		"@wordpress/viewport": "^6.33.1",
 		"@wordpress/wordcount": "^4.33.1",
@@ -133,5 +133,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1c473d047a0b8f529f07cc1e23324a6be723bbc9"
+	"gitHead": "ece3841462592f9e9b99cfa7cac0fe98bdce8fd7"
 }

package/src/accordion/style.scss

@@ -0,0 +1,4 @@
+.wp-block-accordion {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/accordion/view.js

@@ -3,7 +3,11 @@
  */
 import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
 
-store(
+// Whether the hash has been handled for the current page load.
+// This is used to prevent the hash from being handled multiple times.
+let hashHandled = false;
+
+const { actions } = store(
 	'core/accordion',
 	{
 		state: {
@@ -75,15 +79,68 @@ store(
 					nextButton.focus();
 				}
 			} ),
+			openPanelByHash: () => {
+				if ( hashHandled || ! window.location?.hash?.length ) {
+					return;
+				}
+
+				const context = getContext();
+				const { id, accordionItems, autoclose } = context;
+				const hash = decodeURIComponent(
+					window.location.hash.slice( 1 )
+				);
+				const targetElement = window.document.getElementById( hash );
+
+				if ( ! targetElement ) {
+					return;
+				}
+
+				const panelElement = window.document.querySelector(
+					'.wp-block-accordion-panel[aria-labelledby="' + id + '"]'
+				);
+
+				if (
+					! panelElement ||
+					! panelElement.contains( targetElement )
+				) {
+					return;
+				}
+
+				hashHandled = true;
+
+				if ( autoclose ) {
+					accordionItems.forEach( ( item ) => {
+						item.isOpen = item.id === id;
+					} );
+				} else {
+					const targetItem = accordionItems.find(
+						( item ) => item.id === id
+					);
+
+					if ( targetItem ) {
+						targetItem.isOpen = true;
+					}
+				}
+
+				// Wait for the panel to be opened before scrolling to it.
+				window.setTimeout( () => {
+					targetElement.scrollIntoView();
+				}, 0 );
+			},
 		},
 		callbacks: {
 			initAccordionItems: () => {
 				const context = getContext();
-				const { id, openByDefault } = context;
-				context.accordionItems.push( {
+				const { id, openByDefault, accordionItems } = context;
+				accordionItems.push( {
 					id,
 					isOpen: openByDefault,
 				} );
+				actions.openPanelByHash();
+			},
+			hashChange: () => {
+				hashHandled = false;
+				actions.openPanelByHash();
 			},
 		},
 	},

package/src/accordion-heading/block.json

@@ -57,7 +57,7 @@
 			}
 		},
 		"shadow": true,
-		"blockVisibility": false,
+		"visibility": false,
 		"lock": false
 	},
 	"selectors": {

package/src/accordion-heading/deprecated.js

@@ -5,6 +5,7 @@ import {
 	useBlockProps,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 	RichText,
+	getTypographyClassesAndStyles,
 } from '@wordpress/block-editor';
 
 const v1 = {
@@ -74,7 +75,7 @@ const v1 = {
 			},
 		},
 		shadow: true,
-		blockVisibility: false,
+		visibility: false,
 	},
 	save( { attributes } ) {
 		const { level, title, iconPosition, showIcon } = attributes;
@@ -116,4 +117,124 @@ const v1 = {
 	},
 };
 
-export default [ v1 ];
+const v2 = {
+	attributes: {
+		openByDefault: {
+			type: 'boolean',
+			default: false,
+		},
+		title: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: '.wp-block-accordion-heading__toggle-title',
+			role: 'content',
+		},
+		level: {
+			type: 'number',
+		},
+		iconPosition: {
+			type: 'string',
+			enum: [ 'left', 'right' ],
+			default: 'right',
+		},
+		showIcon: {
+			type: 'boolean',
+			default: true,
+		},
+	},
+	supports: {
+		anchor: true,
+		color: {
+			background: true,
+			gradients: true,
+		},
+		align: false,
+		interactivity: true,
+		spacing: {
+			padding: true,
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+			__experimentalSkipSerialization: true,
+			__experimentalSelector: '.wp-block-accordion-heading__toggle',
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		typography: {
+			__experimentalSkipSerialization: [
+				'textDecoration',
+				'letterSpacing',
+			],
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontFamily: true,
+			},
+		},
+		shadow: true,
+		visibility: false,
+		lock: false,
+	},
+	save( { attributes } ) {
+		const { level, title, iconPosition, showIcon } = attributes;
+		const TagName = 'h' + ( level || 3 );
+		const typographyProps = getTypographyClassesAndStyles( attributes );
+
+		const blockProps = useBlockProps.save();
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+
+		return (
+			<TagName { ...blockProps }>
+				<button
+					className="wp-block-accordion-heading__toggle"
+					style={ spacingProps.style }
+				>
+					{ showIcon && iconPosition === 'left' && (
+						<span
+							className="wp-block-accordion-heading__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
+					<RichText.Content
+						className="wp-block-accordion-heading__toggle-title"
+						tagName="span"
+						value={ title }
+						style={ {
+							letterSpacing: typographyProps.style.letterSpacing,
+							textDecoration:
+								typographyProps.style.textDecoration,
+						} }
+					/>
+					{ showIcon && iconPosition === 'right' && (
+						<span
+							className="wp-block-accordion-heading__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
+				</button>
+			</TagName>
+		);
+	},
+};
+
+export default [ v1, v2 ];