Add Reverse on Mobile Attribute for Columns Blocks

docs/reference-guides/core-blocks.md

@@ -107,7 +107,7 @@ Display content in multiple columns, with blocks added to each column. ([Source]
 -	**Name:** core/columns
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, color (background, button, gradients, heading, link, text), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** isStackedOnMobile, templateLock, verticalAlignment
+-	**Attributes:** isReversedOnMobile, isStackedOnMobile, templateLock, verticalAlignment
 
 ## Comment Author Avatar (deprecated)
 

packages/block-library/src/columns/block.json

@@ -14,6 +14,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"isReversedOnMobile": {
+			"type": "boolean",
+			"default": false
+		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]

packages/block-library/src/columns/edit.js

@@ -58,7 +58,12 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
+	const {
+		isStackedOnMobile,
+		isReversedOnMobile,
+		verticalAlignment,
+		templateLock,
+	} = attributes;
 
 	const { count, canInsertColumnBlock, minCount } = useSelect(
 		( select ) => {
@@ -97,6 +102,7 @@ function ColumnsEditContainer( {
 	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
+		[ `is-reversed-on-mobile` ]: isReversedOnMobile,
 	} );
 
 	const blockProps = useBlockProps( {
@@ -157,6 +163,16 @@ function ColumnsEditContainer( {
 							} )
 						}
 					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Reverse on mobile' ) }
+						checked={ isReversedOnMobile }
+						onChange={ () =>
+							setAttributes( {
+								isReversedOnMobile: ! isReversedOnMobile,
+							} )
+						}
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />

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

@@ -9,11 +9,13 @@ import classnames from 'classnames';
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const { isStackedOnMobile, isReversedOnMobile, verticalAlignment } =
+		attributes;
 
 	const className = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
+		[ `is-reversed-on-mobile` ]: isReversedOnMobile,
 	} );
 
 	const blockProps = useBlockProps.save( { className } );

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

@@ -72,6 +72,18 @@
 	}
 }
 
+// Reverse on mobile: Reverse column order
+@media (max-width: #{ ($break-medium - 1) }) {
+	.wp-block-columns.is-reversed-on-mobile.is-not-stacked-on-mobile {
+		flex-direction: row-reverse;
+	}
+
+	.wp-block-columns.is-reversed-on-mobile:not(.is-not-stacked-on-mobile) {
+		flex-direction: column-reverse;
+	}
+}
+
+
 // Lower specificity of margin styles so they don't override the Layout block support.
 :where(.wp-block-columns) {
 	margin-bottom: 1.75em;