@wordpress/block-library 9.27.1-next.46f643fa0.0 → 9.28.1-next.0f6f9d12c.0

package/build-style/more/editor-rtl.css

@@ -146,26 +146,18 @@
   text-align: center;
   white-space: nowrap;
 }
-.wp-block-more input[type=text] {
+.wp-block-more .rich-text {
   position: relative;
   font-size: 13px;
   text-transform: uppercase;
   font-weight: 600;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
-  border: none;
-  box-shadow: none;
+  display: inline-flex;
   white-space: nowrap;
   text-align: center;
-  margin: 0;
-  border-radius: 4px;
   background: #fff;
-  padding: 6px 8px;
-  height: 24px;
-  max-width: 100%;
-}
-.wp-block-more input[type=text]:focus {
-  box-shadow: none;
+  padding: 10px 36px;
 }
 .wp-block-more::before {
   content: "";

package/build-style/more/editor.css

@@ -146,26 +146,18 @@
   text-align: center;
   white-space: nowrap;
 }
-.wp-block-more input[type=text] {
+.wp-block-more .rich-text {
   position: relative;
   font-size: 13px;
   text-transform: uppercase;
   font-weight: 600;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
-  border: none;
-  box-shadow: none;
+  display: inline-flex;
   white-space: nowrap;
   text-align: center;
-  margin: 0;
-  border-radius: 4px;
   background: #fff;
-  padding: 6px 8px;
-  height: 24px;
-  max-width: 100%;
-}
-.wp-block-more input[type=text]:focus {
-  box-shadow: none;
+  padding: 10px 36px;
 }
 .wp-block-more::before {
   content: "";

package/build-style/post-featured-image/editor-rtl.css

@@ -136,8 +136,7 @@
  */
 .wp-block-post-featured-image .block-editor-media-placeholder {
   z-index: 1;
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
+  backdrop-filter: none;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
 .wp-block-post-featured-image .components-placeholder {

package/build-style/post-featured-image/editor.css

@@ -136,8 +136,7 @@
  */
 .wp-block-post-featured-image .block-editor-media-placeholder {
   z-index: 1;
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
+  backdrop-filter: none;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
 .wp-block-post-featured-image .components-placeholder {

package/build-style/style-rtl.css

@@ -135,6 +135,94 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-accordion-item {
+  display: grid;
+  grid-template-rows: max-content 0fr;
+}
+
+.wp-block-accordion-item.is-open {
+  grid-template-rows: max-content 1fr;
+}
+
+.accordion-item__heading {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.accordion-item__toggle {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-decoration: inherit;
+  word-spacing: inherit;
+  background: none;
+  border: none;
+  color: inherit;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  text-align: inherit;
+  position: relative;
+  width: 100%;
+}
+
+.accordion-item__toggle > span {
+  width: 100%;
+}
+
+.is-layout-flow > .wp-block-accordion-panel,
+.wp-block-accordion-panel {
+  overflow: hidden;
+  margin: 0;
+}
+
+.accordion-panel__wrapper {
+  padding-bottom: var(--wp--preset--spacing--20, 1em);
+}
+
+/* No icon block style */
+.is-style-no-icon .accordion-item__toggle-icon {
+  background-color: unset;
+}
+
+.wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+  flex-direction: row-reverse;
+}
+
+/* RTL language support */
+[dir=rtl] .wp-block-accordion-header:not(.icon-position-left) .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Automatically adjust icon position for RTL languages. */
+  flex-direction: row-reverse;
+}
+
+[dir=rtl] .wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  flex-direction: row;
+}
+
+.accordion-item__toggle:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
+
+/* Add transitions only for users who do not prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-accordion-item .accordion-item__toggle-icon {
+    transition: transform 0.2s ease-in-out;
+  }
+  .wp-block-accordion-item {
+    transition: grid-template-rows 0.3s ease-out;
+  }
+}
+.is-open .accordion-item__toggle-icon.has-icon-plus {
+  transform: rotate(-45deg);
+}
+
 .wp-block-archives {
   box-sizing: border-box;
 }
@@ -1465,8 +1553,7 @@ figure.wp-block-gallery.has-nested-images {
   height: 100%;
   max-height: 40%;
   pointer-events: none;
-  -webkit-backdrop-filter: blur(3px);
-          backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
   -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
           mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 }
@@ -1741,8 +1828,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
   opacity: 0;
   border: none;
   background-color: rgba(90, 90, 90, 0.25);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-          backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
   display: flex;
   justify-content: center;

package/build-style/style.css

@@ -135,6 +135,94 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-accordion-item {
+  display: grid;
+  grid-template-rows: max-content 0fr;
+}
+
+.wp-block-accordion-item.is-open {
+  grid-template-rows: max-content 1fr;
+}
+
+.accordion-item__heading {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.accordion-item__toggle {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-decoration: inherit;
+  word-spacing: inherit;
+  background: none;
+  border: none;
+  color: inherit;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  text-align: inherit;
+  position: relative;
+  width: 100%;
+}
+
+.accordion-item__toggle > span {
+  width: 100%;
+}
+
+.is-layout-flow > .wp-block-accordion-panel,
+.wp-block-accordion-panel {
+  overflow: hidden;
+  margin: 0;
+}
+
+.accordion-panel__wrapper {
+  padding-bottom: var(--wp--preset--spacing--20, 1em);
+}
+
+/* No icon block style */
+.is-style-no-icon .accordion-item__toggle-icon {
+  background-color: unset;
+}
+
+.wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+  flex-direction: row-reverse;
+}
+
+/* RTL language support */
+[dir=rtl] .wp-block-accordion-header:not(.icon-position-left) .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Automatically adjust icon position for RTL languages. */
+  flex-direction: row-reverse;
+}
+
+[dir=rtl] .wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  flex-direction: row;
+}
+
+.accordion-item__toggle:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
+
+/* Add transitions only for users who do not prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-accordion-item .accordion-item__toggle-icon {
+    transition: transform 0.2s ease-in-out;
+  }
+  .wp-block-accordion-item {
+    transition: grid-template-rows 0.3s ease-out;
+  }
+}
+.is-open .accordion-item__toggle-icon.has-icon-plus {
+  transform: rotate(45deg);
+}
+
 .wp-block-archives {
   box-sizing: border-box;
 }
@@ -1473,8 +1561,7 @@ figure.wp-block-gallery.has-nested-images {
   height: 100%;
   max-height: 40%;
   pointer-events: none;
-  -webkit-backdrop-filter: blur(3px);
-          backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
   -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
           mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 }
@@ -1755,8 +1842,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
   opacity: 0;
   border: none;
   background-color: rgba(90, 90, 90, 0.25);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-          backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
   display: flex;
   justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.27.1-next.46f643fa0.0",
+	"version": "9.28.1-next.0f6f9d12c.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,6 +27,7 @@
 	"react-native": "src/index",
 	"wpScript": true,
 	"wpScriptModuleExports": {
+		"./accordions/view": "./build-module/accordions/view.js",
 		"./file/view": "./build-module/file/view.js",
 		"./form/view": "./build-module/form/view.js",
 		"./image/view": "./build-module/image/view.js",
@@ -41,39 +42,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/api-fetch": "^7.27.1-next.46f643fa0.0",
-		"@wordpress/autop": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/blob": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/block-editor": "^15.0.1-next.46f643fa0.0",
-		"@wordpress/blocks": "^15.0.1-next.46f643fa0.0",
-		"@wordpress/components": "^30.1.1-next.46f643fa0.0",
-		"@wordpress/compose": "^7.27.1-next.46f643fa0.0",
-		"@wordpress/core-data": "^7.27.1-next.46f643fa0.0",
-		"@wordpress/data": "^10.27.1-next.46f643fa0.0",
-		"@wordpress/date": "^5.27.1-next.46f643fa0.0",
-		"@wordpress/deprecated": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/dom": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/element": "^6.27.1-next.46f643fa0.0",
-		"@wordpress/escape-html": "^3.27.1-next.46f643fa0.0",
-		"@wordpress/hooks": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/html-entities": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/i18n": "^6.0.1-next.46f643fa0.0",
-		"@wordpress/icons": "^10.27.2-next.46f643fa0.0",
-		"@wordpress/interactivity": "^6.28.1-next.46f643fa0.0",
-		"@wordpress/interactivity-router": "^2.27.1-next.46f643fa0.0",
-		"@wordpress/keyboard-shortcuts": "^5.27.1-next.46f643fa0.0",
-		"@wordpress/keycodes": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/notices": "^5.27.1-next.46f643fa0.0",
-		"@wordpress/patterns": "^2.27.1-next.46f643fa0.0",
-		"@wordpress/primitives": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/private-apis": "^1.27.1-next.46f643fa0.0",
-		"@wordpress/reusable-blocks": "^5.27.1-next.46f643fa0.0",
-		"@wordpress/rich-text": "^7.27.1-next.46f643fa0.0",
-		"@wordpress/server-side-render": "^6.4.1-next.46f643fa0.0",
-		"@wordpress/url": "^4.27.1-next.46f643fa0.0",
-		"@wordpress/viewport": "^6.27.1-next.46f643fa0.0",
-		"@wordpress/wordcount": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/a11y": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/api-fetch": "^7.28.1-next.0f6f9d12c.0",
+		"@wordpress/autop": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/blob": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/block-editor": "^15.1.1-next.0f6f9d12c.0",
+		"@wordpress/blocks": "^15.1.1-next.0f6f9d12c.0",
+		"@wordpress/components": "^30.2.1-next.0f6f9d12c.0",
+		"@wordpress/compose": "^7.28.1-next.0f6f9d12c.0",
+		"@wordpress/core-data": "^7.28.1-next.0f6f9d12c.0",
+		"@wordpress/data": "^10.28.1-next.0f6f9d12c.0",
+		"@wordpress/date": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/deprecated": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/dom": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/element": "^6.28.1-next.0f6f9d12c.0",
+		"@wordpress/escape-html": "^3.28.1-next.0f6f9d12c.0",
+		"@wordpress/hooks": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/html-entities": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/i18n": "^6.1.1-next.0f6f9d12c.0",
+		"@wordpress/icons": "^10.28.2-next.0f6f9d12c.0",
+		"@wordpress/interactivity": "^6.28.1-next.0f6f9d12c.0",
+		"@wordpress/interactivity-router": "^2.28.1-next.0f6f9d12c.0",
+		"@wordpress/keyboard-shortcuts": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/keycodes": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/notices": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/patterns": "^2.28.1-next.0f6f9d12c.0",
+		"@wordpress/primitives": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/private-apis": "^1.28.1-next.0f6f9d12c.0",
+		"@wordpress/reusable-blocks": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/rich-text": "^7.28.1-next.0f6f9d12c.0",
+		"@wordpress/server-side-render": "^6.4.1-next.0f6f9d12c.0",
+		"@wordpress/url": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/viewport": "^6.28.1-next.0f6f9d12c.0",
+		"@wordpress/wordcount": "^4.28.1-next.0f6f9d12c.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +92,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "17e600e091675c5e3d809adfea23ac456bbeae19"
+	"gitHead": "7d4f4367e2f76deddf4a09b540e6b2f9f4c3fe9f"
 }

package/src/accordion-header/block.json

@@ -0,0 +1,93 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/accordion-header",
+	"version": "0.1.0",
+	"title": "Accordion Header",
+	"category": "design",
+	"description": "Accordion header.",
+	"example": {},
+	"__experimental": true,
+	"parent": [ "core/accordion-item" ],
+	"usesContext": [
+		"core/accordion-icon-position",
+		"core/accordion-show-icon"
+	],
+	"supports": {
+		"anchor": true,
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"align": false,
+		"border": true,
+		"interactivity": true,
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"margin": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"textAlign": true,
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontFamily": true
+			}
+		},
+		"shadow": true
+	},
+	"attributes": {
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
+		"title": {
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "span"
+		},
+		"level": {
+			"type": "number",
+			"default": 3
+		},
+		"levelOptions": {
+			"type": "array"
+		},
+		"textAlignment": {
+			"type": "string",
+			"default": "left"
+		},
+		"iconPosition": {
+			"type": "string",
+			"enum": [ "left", "right" ],
+			"default": "right"
+		},
+		"showIcon": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"textdomain": "default"
+}

package/src/accordion-header/edit.js

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import {
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
+	BlockControls,
+	HeadingLevelDropdown,
+	RichText,
+} from '@wordpress/block-editor';
+import { ToolbarGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { plus } from '../accordion-item/icons';
+
+const ICONS = {
+	plus,
+};
+
+export default function Edit( { attributes, setAttributes, context } ) {
+	const { level, title, textAlign, levelOptions } = attributes;
+	const {
+		'core/accordion-icon-position': iconPosition,
+		'core/accordion-show-icon': showIcon,
+	} = context;
+	const TagName = 'h' + level;
+
+	// Set icon attributes.
+	useEffect( () => {
+		if ( iconPosition !== undefined && showIcon !== undefined ) {
+			setAttributes( {
+				iconPosition,
+				showIcon,
+			} );
+		}
+	}, [ iconPosition, showIcon, setAttributes ] );
+
+	const blockProps = useBlockProps();
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
+
+	const Icon = ICONS.plus;
+	const shouldShowIcon = showIcon && Icon;
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<HeadingLevelDropdown
+						value={ level }
+						options={ levelOptions }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<TagName
+				{ ...blockProps }
+				className={ clsx(
+					blockProps.className,
+					colorProps.className,
+					borderProps.className,
+					'accordion-item__heading',
+					{
+						[ `has-custom-font-size` ]: blockProps.style.fontSize,
+						[ `icon-position-left` ]: iconPosition === 'left',
+						[ `has-text-align-${ textAlign }` ]: textAlign,
+					}
+				) }
+				style={ {
+					...borderProps.style,
+					...colorProps.style,
+					...shadowProps.style,
+				} }
+			>
+				<button
+					className={ clsx( 'accordion-item__toggle' ) }
+					style={ {
+						...spacingProps.style,
+					} }
+				>
+					<RichText
+						allowedFormats={ [
+							'core/bold',
+							'core/italic',
+							'core/image',
+							'core/strikethrough',
+						] }
+						disableLineBreaks
+						tagName="span"
+						value={ title }
+						onChange={ ( newTitle ) =>
+							setAttributes( { title: newTitle } )
+						}
+						placeholder={ __( 'Accordion title' ) }
+					/>
+					{ shouldShowIcon && (
+						<span
+							className={ clsx( `accordion-item__toggle-icon`, {
+								'has-icon-plus': true,
+							} ) }
+							style={ {
+								// TO-DO: make this configurable
+								width: `1.2em`,
+								height: `1.2em`,
+							} }
+						>
+							{ Icon && <Icon width="1.2em" height="1.2em" /> }
+						</span>
+					) }
+				</button>
+			</TagName>
+		</>
+	);
+}

package/src/accordion-header/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { accordionHeader } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import initBlock from '../utils/init-block';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon: accordionHeader,
+	example: {},
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/accordion-header/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();