Merge branch 'trunk' into update/modal-heading-labels-missing-text-color

Author: kushagra-goyal-14

backport-changelog/6.9/9600.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9600
+
+* https://github.com/WordPress/gutenberg/pull/70378

docs/reference-guides/core-blocks.md

@@ -28,7 +28,7 @@ Displays a section of content in an accordion, including a header and expandable
 -	**Category:** design
 -	**Parent:** core/accordion
 -	**Allowed Blocks:** core/accordion-header, core/accordion-panel
--	**Supports:** color (background, gradient, text), interactivity, shadow, spacing (blockGap, margin)
+-	**Supports:** color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin)
 -	**Attributes:** openByDefault
 
 ## Accordion Header
@@ -50,7 +50,7 @@ Displays an accordion panel. ([Source](https://github.com/WordPress/gutenberg/tr
 -	**Experimental:** true
 -	**Category:** design
 -	**Parent:** core/accordion-content
--	**Supports:** color (background, gradient, text), interactivity, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** allowedBlocks, isSelected, openByDefault, templateLock
 
 ## Archives

lib/class-wp-theme-json-gutenberg.php

@@ -598,20 +598,21 @@ class WP_Theme_JSON_Gutenberg {
 	 * @var string[]
 	 */
 	const ELEMENTS = array(
-		'link'    => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
-		'heading' => 'h1, h2, h3, h4, h5, h6',
-		'h1'      => 'h1',
-		'h2'      => 'h2',
-		'h3'      => 'h3',
-		'h4'      => 'h4',
-		'h5'      => 'h5',
-		'h6'      => 'h6',
+		'link'      => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
+		'heading'   => 'h1, h2, h3, h4, h5, h6',
+		'h1'        => 'h1',
+		'h2'        => 'h2',
+		'h3'        => 'h3',
+		'h4'        => 'h4',
+		'h5'        => 'h5',
+		'h6'        => 'h6',
 		// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
-		'button'  => '.wp-element-button, .wp-block-button__link',
+		'button'    => '.wp-element-button, .wp-block-button__link',
 		// The block classes are necessary to target older content that won't use the new class names.
-		'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
-		'cite'    => 'cite',
-		'select'  => 'select',
+		'caption'   => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
+		'cite'      => 'cite',
+		'select'    => 'select',
+		'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=text],[type=tel],[type=url])',
 	);
 
 	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(

packages/block-editor/src/components/inserter/index.js

@@ -386,9 +386,7 @@ export default compose( [
 				);
 
 				if ( onSelectOrClose ) {
-					onSelectOrClose( {
-						clientId: blockToInsert?.clientId,
-					} );
+					onSelectOrClose( blockToInsert );
 				}
 
 				const message = sprintf(

packages/block-editor/src/components/list-view/appender.js

@@ -22,13 +22,20 @@ export const Appender = forwardRef(
 		const { insertedBlock, setInsertedBlock } = useListViewContext();
 
 		const instanceId = useInstanceId( Appender );
-		const hideInserter = useSelect(
+		const { directInsert, hideInserter } = useSelect(
 			( select ) => {
-				const { getTemplateLock, isZoomOut } = unlock(
-					select( blockEditorStore )
-				);
+				const { getBlockListSettings, getTemplateLock, isZoomOut } =
+					unlock( select( blockEditorStore ) );
 
-				return !! getTemplateLock( clientId ) || isZoomOut();
+				const settings = getBlockListSettings( clientId );
+				const directInsertValue = settings?.directInsert || false;
+				const hideInserterValue =
+					!! getTemplateLock( clientId ) || isZoomOut();
+
+				return {
+					directInsert: directInsertValue,
+					hideInserter: hideInserterValue,
+				};
 			},
 			[ clientId ]
 		);
@@ -79,7 +86,7 @@ export const Appender = forwardRef(
 					position="bottom right"
 					isAppender
 					selectBlockOnInsert={ false }
-					shouldDirectInsert={ false }
+					shouldDirectInsert={ directInsert }
 					__experimentalIsQuick
 					{ ...props }
 					toggleProps={ { 'aria-describedby': descriptionId } }

packages/block-library/src/accordion-content/block.json

@@ -30,7 +30,8 @@
 				"width": true
 			}
 		},
-		"shadow": true
+		"shadow": true,
+		"layout": true
 	},
 	"attributes": {
 		"openByDefault": {

packages/block-library/src/accordion-content/edit.js

@@ -25,11 +25,8 @@ import clsx from 'clsx';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-export default function Edit( {
-	attributes: { openByDefault },
-	clientId,
-	setAttributes,
-} ) {
+export default function Edit( { attributes, clientId, setAttributes } ) {
+	const { openByDefault } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const { isSelected, getBlockOrder } = useSelect(
@@ -67,29 +64,26 @@ export default function Edit( {
 		updateBlockAttributes,
 	] );
 
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			...blockProps,
-			className: clsx( blockProps.className, {
-				'is-open': openByDefault || isSelected,
-			} ),
-		},
-		{
-			template: [
-				[ 'core/accordion-header', {} ],
-				[
-					'core/accordion-panel',
-					{
-						openByDefault,
-					},
-				],
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			'is-open': openByDefault || isSelected,
+		} ),
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: [
+			[ 'core/accordion-header', {} ],
+			[
+				'core/accordion-panel',
+				{
+					openByDefault,
+				},
 			],
-			templateLock: 'all',
-			directInsert: true,
-			templateInsertUpdatesSelection: true,
-		}
-	);
+		],
+		templateLock: 'all',
+		directInsert: true,
+		templateInsertUpdatesSelection: true,
+	} );
 
 	return (
 		<>

packages/block-library/src/accordion-panel/block.json

@@ -47,7 +47,8 @@
 				"fontSize": true
 			}
 		},
-		"shadow": true
+		"shadow": true,
+		"layout": true
 	},
 	"attributes": {
 		"allowedBlocks": {

packages/block-library/src/accordion/style.scss

@@ -13,11 +13,6 @@
 	}
 }
 
-.accordion-content__heading {
-	margin-block-start: 0;
-	margin-block-end: 0;
-}
-
 .accordion-content__toggle {
 	font-family: inherit;
 	font-size: inherit;
@@ -48,7 +43,12 @@
 .is-layout-flow > .wp-block-accordion-panel,
 .wp-block-accordion-panel {
 	overflow: hidden;
-	margin: 0;
+}
+
+// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
+.wp-block-accordion-panel[inert],
+.wp-block-accordion-panel[aria-hidden="true"] {
+	margin-block-start: 0;
 }
 
 .accordion-panel__wrapper {

packages/block-library/src/form-input/style.scss

@@ -34,7 +34,7 @@
 	width: fit-content;
 }
 
-.wp-block-form-input__input {
+:where(.wp-block-form-input__input) {
 	padding: 0 0.5em;
 	font-size: 1em;
 	margin-bottom: 0.5em;
@@ -54,7 +54,8 @@
 	&[type="week"] {
 		min-height: 2em;
 		line-height: 2;
-		border: 1px solid;
+		border-width: 1px;
+		border-style: solid;
 	}
 }