fix #389

package.json

@@ -7,7 +7,7 @@
 		"node": "20.11.1"
 	},
 	"devDependencies": {
-		"@inc2734/unitone-css": "^0.60.9",
+		"@inc2734/unitone-css": "^0.61.0",
 		"@wordpress/env": "^10.9.0",
 		"@wordpress/icons": "^10.9.0",
 		"@wordpress/interface": "^6.9.0",

src/blocks/switcher/block.json

@@ -1,12 +1,16 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"version": "10.9.0",
+	"version": "14.1.0",
 	"textdomain": "unitone",
 	"name": "unitone/switcher",
 	"title": "Switcher",
 	"description": "This block switches the direction of contents flow depending on its contents.",
 	"attributes": {
+		"revert": {
+			"type": "boolean",
+			"default": false
+		},
 		"threshold": {
 			"type": "string",
 			"default": "var(--wp--style--global--content-size)"
@@ -41,6 +45,7 @@
 			}
 		},
 		"unitone": {
+			"alignItems": true,
 			"gap": {
 				"splitOnAxis": true
 			},

src/blocks/switcher/edit.js

@@ -10,6 +10,7 @@ import {
 
 import {
 	TextControl,
+	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -20,7 +21,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import metadata from './block.json';
 
 export default function ( { attributes, setAttributes, clientId } ) {
-	const { threshold, templateLock } = attributes;
+	const { revert, threshold, templateLock } = attributes;
 
 	const hasInnerBlocks = useSelect(
 		( select ) =>
@@ -36,7 +37,10 @@ export default function ( { attributes, setAttributes, clientId } ) {
 	} );
 	blockProps[ 'data-unitone-layout' ] = clsx(
 		'switcher',
-		blockProps[ 'data-unitone-layout' ]
+		blockProps[ 'data-unitone-layout' ],
+		{
+			'-revert': revert,
+		}
 	);
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -95,6 +99,31 @@ export default function ( { attributes, setAttributes, clientId } ) {
 							} }
 						/>
 					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () =>
+							revert !== metadata.attributes.revert.default
+						}
+						isShownByDefault
+						label={ __( 'Revert', 'unitone' ) }
+						onDeselect={ () =>
+							setAttributes( {
+								revert: metadata.attributes.revert.default,
+							} )
+						}
+					>
+						<ToggleControl
+							label={ __( 'Revert', 'unitone' ) }
+							help={ __(
+								'In single-column display, by default, the elements on the left side of the two-column display are displayed on top, but when enabled, the elements on the right side of the two-column display are displayed on top.',
+								'unitone'
+							) }
+							checked={ revert }
+							onChange={ ( newAttribute ) => {
+								setAttributes( { revert: newAttribute } );
+							} }
+						/>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 

src/blocks/switcher/save.js

@@ -1,13 +1,17 @@
+import clsx from 'clsx';
+
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function ( { attributes } ) {
-	const { threshold } = attributes;
+	const { revert, threshold } = attributes;
 
 	return (
 		<div
 			{ ...useInnerBlocksProps.save(
 				useBlockProps.save( {
-					'data-unitone-layout': 'switcher',
+					'data-unitone-layout': clsx( 'switcher', {
+						'-revert': revert,
+					} ),
 					style: {
 						'--unitone--threshold': threshold || undefined,
 					},