@wordpress/block-library 9.31.0 → 9.31.1-next.233ccab9b.0

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

@@ -0,0 +1,140 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.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

@@ -0,0 +1,140 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
+  display: none;
+  margin-block-start: 0;
+}

package/build-style/style-rtl.css

@@ -138,16 +138,24 @@
 .wp-block-accordion-content {
   display: grid;
   grid-template-rows: max-content 0fr;
+  /* Add transitions only for users who do not prefer reduced motion */
 }
-
 .wp-block-accordion-content.is-open {
   grid-template-rows: max-content 1fr;
 }
-.wp-block-accordion-content.is-open > .wp-block-accordion-header .accordion-content__toggle-icon.has-icon-plus {
+.wp-block-accordion-content.is-open > .wp-block-accordion-header .wp-block-accordion-header__toggle-icon {
   transform: rotate(-45deg);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-accordion-content {
+    transition: grid-template-rows 0.3s ease-out;
+  }
+  .wp-block-accordion-content > .wp-block-accordion-header .wp-block-accordion-header__toggle-icon {
+    transition: transform 0.2s ease-in-out;
+  }
+}
 
-.accordion-content__toggle {
+.wp-block-accordion-header__toggle {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
@@ -169,49 +177,28 @@
   position: relative;
   width: 100%;
 }
-
-.accordion-content__toggle > span {
-  width: 100%;
-}
-
-.is-layout-flow > .wp-block-accordion-panel,
-.wp-block-accordion-panel {
-  overflow: hidden;
-}
-
-.wp-block-accordion-panel[inert],
-.wp-block-accordion-panel[aria-hidden=true] {
-  margin-block-start: 0;
-}
-
-.accordion-panel__wrapper {
-  padding-bottom: var(--wp--preset--spacing--20, 1em);
+.wp-block-accordion-header__toggle:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
 }
 
-/* No icon block style */
-.is-style-no-icon .accordion-content__toggle-icon {
-  background-color: unset;
+.wp-block-accordion-header__toggle-title {
+  flex: 1;
 }
 
-.wp-block-accordion-header.icon-position-left .accordion-content__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;
+.wp-block-accordion-header__toggle-icon {
+  width: 1.2em;
+  height: 1.2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.accordion-content__toggle:focus-visible {
-  outline: 2px solid -webkit-focus-ring-color;
-  outline-offset: 2px;
+.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
+  display: none;
+  margin-block-start: 0;
 }
 
-/* Add transitions only for users who do not prefer reduced motion */
-@media (prefers-reduced-motion: no-preference) {
-  .wp-block-accordion-content .accordion-content__toggle-icon {
-    transition: transform 0.2s ease-in-out;
-  }
-  .wp-block-accordion-content {
-    transition: grid-template-rows 0.3s ease-out;
-  }
-}
 .wp-block-archives {
   box-sizing: border-box;
 }

package/build-style/style.css

@@ -138,16 +138,24 @@
 .wp-block-accordion-content {
   display: grid;
   grid-template-rows: max-content 0fr;
+  /* Add transitions only for users who do not prefer reduced motion */
 }
-
 .wp-block-accordion-content.is-open {
   grid-template-rows: max-content 1fr;
 }
-.wp-block-accordion-content.is-open > .wp-block-accordion-header .accordion-content__toggle-icon.has-icon-plus {
+.wp-block-accordion-content.is-open > .wp-block-accordion-header .wp-block-accordion-header__toggle-icon {
   transform: rotate(45deg);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-accordion-content {
+    transition: grid-template-rows 0.3s ease-out;
+  }
+  .wp-block-accordion-content > .wp-block-accordion-header .wp-block-accordion-header__toggle-icon {
+    transition: transform 0.2s ease-in-out;
+  }
+}
 
-.accordion-content__toggle {
+.wp-block-accordion-header__toggle {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
@@ -169,49 +177,28 @@
   position: relative;
   width: 100%;
 }
-
-.accordion-content__toggle > span {
-  width: 100%;
-}
-
-.is-layout-flow > .wp-block-accordion-panel,
-.wp-block-accordion-panel {
-  overflow: hidden;
-}
-
-.wp-block-accordion-panel[inert],
-.wp-block-accordion-panel[aria-hidden=true] {
-  margin-block-start: 0;
-}
-
-.accordion-panel__wrapper {
-  padding-bottom: var(--wp--preset--spacing--20, 1em);
+.wp-block-accordion-header__toggle:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
 }
 
-/* No icon block style */
-.is-style-no-icon .accordion-content__toggle-icon {
-  background-color: unset;
+.wp-block-accordion-header__toggle-title {
+  flex: 1;
 }
 
-.wp-block-accordion-header.icon-position-left .accordion-content__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;
+.wp-block-accordion-header__toggle-icon {
+  width: 1.2em;
+  height: 1.2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.accordion-content__toggle:focus-visible {
-  outline: 2px solid -webkit-focus-ring-color;
-  outline-offset: 2px;
+.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
+  display: none;
+  margin-block-start: 0;
 }
 
-/* Add transitions only for users who do not prefer reduced motion */
-@media (prefers-reduced-motion: no-preference) {
-  .wp-block-accordion-content .accordion-content__toggle-icon {
-    transition: transform 0.2s ease-in-out;
-  }
-  .wp-block-accordion-content {
-    transition: grid-template-rows 0.3s ease-out;
-  }
-}
 .wp-block-archives {
   box-sizing: border-box;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.31.0",
+	"version": "9.31.1-next.233ccab9b.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,39 +42,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.31.0",
-		"@wordpress/api-fetch": "^7.31.0",
-		"@wordpress/autop": "^4.31.0",
-		"@wordpress/blob": "^4.31.0",
-		"@wordpress/block-editor": "^15.4.0",
-		"@wordpress/blocks": "^15.4.0",
-		"@wordpress/components": "^30.4.0",
-		"@wordpress/compose": "^7.31.0",
-		"@wordpress/core-data": "^7.31.0",
-		"@wordpress/data": "^10.31.0",
-		"@wordpress/date": "^5.31.0",
-		"@wordpress/deprecated": "^4.31.0",
-		"@wordpress/dom": "^4.31.0",
-		"@wordpress/element": "^6.31.0",
-		"@wordpress/escape-html": "^3.31.0",
-		"@wordpress/hooks": "^4.31.0",
-		"@wordpress/html-entities": "^4.31.0",
-		"@wordpress/i18n": "^6.4.0",
-		"@wordpress/icons": "^10.31.0",
-		"@wordpress/interactivity": "^6.31.0",
-		"@wordpress/interactivity-router": "^2.31.0",
-		"@wordpress/keyboard-shortcuts": "^5.31.0",
-		"@wordpress/keycodes": "^4.31.0",
-		"@wordpress/notices": "^5.31.0",
-		"@wordpress/patterns": "^2.31.0",
-		"@wordpress/primitives": "^4.31.0",
-		"@wordpress/private-apis": "^1.31.0",
-		"@wordpress/reusable-blocks": "^5.31.0",
-		"@wordpress/rich-text": "^7.31.0",
-		"@wordpress/server-side-render": "^6.7.0",
-		"@wordpress/url": "^4.31.0",
-		"@wordpress/viewport": "^6.31.0",
-		"@wordpress/wordcount": "^4.31.0",
+		"@wordpress/a11y": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/api-fetch": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/autop": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/blob": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/block-editor": "^15.4.1-next.233ccab9b.0",
+		"@wordpress/blocks": "^15.4.1-next.233ccab9b.0",
+		"@wordpress/components": "^30.5.1-next.233ccab9b.0",
+		"@wordpress/compose": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/core-data": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/data": "^10.31.1-next.233ccab9b.0",
+		"@wordpress/date": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/deprecated": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/dom": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/element": "^6.31.1-next.233ccab9b.0",
+		"@wordpress/escape-html": "^3.31.1-next.233ccab9b.0",
+		"@wordpress/hooks": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/html-entities": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/i18n": "^6.4.1-next.233ccab9b.0",
+		"@wordpress/icons": "^10.31.1-next.233ccab9b.0",
+		"@wordpress/interactivity": "^6.31.1-next.233ccab9b.0",
+		"@wordpress/interactivity-router": "^2.31.1-next.233ccab9b.0",
+		"@wordpress/keyboard-shortcuts": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/keycodes": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/notices": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/patterns": "^2.31.1-next.233ccab9b.0",
+		"@wordpress/primitives": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/private-apis": "^1.31.1-next.233ccab9b.0",
+		"@wordpress/reusable-blocks": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/rich-text": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/server-side-render": "^6.7.1-next.233ccab9b.0",
+		"@wordpress/url": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/viewport": "^6.31.1-next.233ccab9b.0",
+		"@wordpress/wordcount": "^4.31.1-next.233ccab9b.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -92,5 +92,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d7601d30d49462ea942168e8ab6bf449fb93097e"
+	"gitHead": "d11f971521e4b39b07124d5c5516890ff98b0e31"
 }

package/src/accordion/block.json

@@ -19,7 +19,7 @@
 		},
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"__experimentalBorder": {
 			"color": true,
@@ -40,7 +40,20 @@
 		},
 		"shadow": true,
 		"layout": true,
-		"interactivity": true
+		"interactivity": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"attributes": {
 		"iconPosition": {
@@ -62,5 +75,5 @@
 	},
 	"allowedBlocks": [ "core/accordion-content" ],
 	"textdomain": "default",
-	"style": "wp-block-accordion"
+	"viewScriptModule": "@wordpress/block-library/accordion/view"
 }

package/src/accordion/edit.js

@@ -34,6 +34,7 @@ export default function Edit( {
 	attributes: { autoclose, iconPosition, showIcon },
 	clientId,
 	setAttributes,
+	isSelected: isSingleSelected,
 } ) {
 	const blockProps = useBlockProps();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -53,14 +54,13 @@ export default function Edit( {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<ToolbarButton
-					label={ __( 'Add accordion content block' ) }
-					onClick={ addAccordionContentBlock }
-				>
-					{ __( 'Add' ) }
-				</ToolbarButton>
-			</BlockControls>
+			{ isSingleSelected && (
+				<BlockControls group="other">
+					<ToolbarButton onClick={ addAccordionContentBlock }>
+						{ __( 'Add' ) }
+					</ToolbarButton>
+				</BlockControls>
+			) }
 			<InspectorControls key="setting">
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -109,6 +109,9 @@ export default function Edit( {
 							onChange={ ( value ) => {
 								setAttributes( {
 									showIcon: value,
+									iconPosition: value
+										? iconPosition
+										: 'right',
 								} );
 							} }
 							checked={ showIcon }
@@ -117,34 +120,36 @@ export default function Edit( {
 							) }
 						/>
 					</ToolsPanelItem>
-					<ToolsPanelItem
-						label={ __( 'Icon Position' ) }
-						isShownByDefault
-						hasValue={ () => iconPosition !== 'right' }
-						onDeselect={ () =>
-							setAttributes( { iconPosition: 'right' } )
-						}
-					>
-						<ToggleGroupControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							isBlock
+					{ showIcon && (
+						<ToolsPanelItem
 							label={ __( 'Icon Position' ) }
-							value={ iconPosition }
-							onChange={ ( value ) => {
-								setAttributes( { iconPosition: value } );
-							} }
+							isShownByDefault
+							hasValue={ () => iconPosition !== 'right' }
+							onDeselect={ () =>
+								setAttributes( { iconPosition: 'right' } )
+							}
 						>
-							<ToggleGroupControlOption
-								label={ __( 'Left' ) }
-								value="left"
-							/>
-							<ToggleGroupControlOption
-								label={ __( 'Right' ) }
-								value="right"
-							/>
-						</ToggleGroupControl>
-					</ToolsPanelItem>
+							<ToggleGroupControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								isBlock
+								label={ __( 'Icon Position' ) }
+								value={ iconPosition }
+								onChange={ ( value ) => {
+									setAttributes( { iconPosition: value } );
+								} }
+							>
+								<ToggleGroupControlOption
+									label={ __( 'Left' ) }
+									value="left"
+								/>
+								<ToggleGroupControlOption
+									label={ __( 'Right' ) }
+									value="right"
+								/>
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />