Accordion Header: Don't use flex-direction:reverse (#71737)

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: mikachan <[email protected]>

Author: t-hamano

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

@@ -63,7 +63,7 @@
 		"title": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "span",
+			"selector": ".accordion-content__toggle-title",
 			"role": "content"
 		},
 		"level": {

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

@@ -65,7 +65,6 @@ export default function Edit( { attributes, setAttributes, context } ) {
 					'accordion-content__heading',
 					{
 						[ `has-custom-font-size` ]: blockProps.style.fontSize,
-						[ `icon-position-left` ]: iconPosition === 'left',
 						[ `has-text-align-${ textAlign }` ]: textAlign,
 					}
 				) }
@@ -81,6 +80,11 @@ export default function Edit( { attributes, setAttributes, context } ) {
 						...spacingProps.style,
 					} }
 				>
+					{ showIcon && iconPosition === 'left' && (
+						<span className="accordion-content__toggle-icon">
+							+
+						</span>
+					) }
 					<RichText
 						withoutInteractiveFormatting
 						disableLineBreaks
@@ -91,7 +95,7 @@ export default function Edit( { attributes, setAttributes, context } ) {
 						}
 						placeholder={ __( 'Accordion title' ) }
 					/>
-					{ showIcon && (
+					{ showIcon && iconPosition === 'right' && (
 						<span className="accordion-content__toggle-icon">
 							+
 						</span>

packages/block-library/src/accordion-header/save.js

@@ -34,7 +34,6 @@ export default function save( { attributes } ) {
 				'accordion-content__heading',
 				{
 					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
-					[ `icon-position-left` ]: iconPosition === 'left',
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				}
 			) }
@@ -50,8 +49,15 @@ export default function save( { attributes } ) {
 					...spacingProps.style,
 				} }
 			>
-				<RichText.Content tagName="span" value={ title } />
-				{ showIcon && (
+				{ showIcon && iconPosition === 'left' && (
+					<span className="accordion-content__toggle-icon">+</span>
+				) }
+				<RichText.Content
+					className="accordion-content__toggle-title"
+					tagName="span"
+					value={ title }
+				/>
+				{ showIcon && iconPosition === 'right' && (
 					<span className="accordion-content__toggle-icon">+</span>
 				) }
 			</button>

packages/block-library/src/accordion/save.js

@@ -1,23 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { iconPosition } = attributes;
+export default function save() {
 	const blockProps = useBlockProps.save();
-	const className = clsx(
-		{
-			'icon-position-left': iconPosition === 'left',
-		},
-		blockProps.className
-	);
-
-	return (
-		<div { ...useInnerBlocksProps.save( { ...blockProps, className } ) } />
-	);
+	return <div { ...useInnerBlocksProps.save( blockProps ) } />;
 }

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

@@ -36,7 +36,7 @@
 	width: 100%;
 }
 
-.accordion-content__toggle > span:not(.accordion-content__toggle-icon) {
+.accordion-content__toggle-title {
 	flex: 1;
 }
 
@@ -68,11 +68,6 @@
 	background-color: unset;
 }
 
-.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;
-}
-
 .accordion-content__toggle:focus-visible {
 	outline: 2px solid -webkit-focus-ring-color;
 	outline-offset: 2px;