@wordpress/block-editor 7.0.1 → 8.0.0

package/src/layouts/flow.js

@@ -6,7 +6,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
@@ -17,10 +17,11 @@ import { appendSelectors } from './utils';
 
 export default {
 	name: 'default',
-
 	label: __( 'Flow' ),
-
-	edit: function LayoutDefaultEdit( { layout, onChange } ) {
+	inspectorControls: function DefaultLayoutInspectorControls( {
+		layout,
+		onChange,
+	} ) {
 		const { wideSize, contentSize } = layout;
 		const units = useCustomUnits( {
 			availableUnits: useSetting( 'spacing.units' ) || [
@@ -101,9 +102,13 @@ export default {
 			</>
 		);
 	},
-
+	toolBarControls: function DefaultLayoutToolbarControls() {
+		return null;
+	},
 	save: function DefaultLayoutStyle( { selector, layout = {} } ) {
 		const { contentSize, wideSize } = layout;
+		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const hasBlockGapStylesSupport = blockGapSupport !== null;
 
 		let style =
 			!! contentSize || !! wideSize
@@ -113,11 +118,11 @@ export default {
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
-	
+
 					${ appendSelectors( selector, '> [data-align="wide"]' ) }  {
 						max-width: ${ wideSize ?? contentSize };
 					}
-	
+
 					${ appendSelectors( selector, '> [data-align="full"]' ) } {
 						max-width: none;
 					}
@@ -129,27 +134,89 @@ export default {
 				float: left;
 				margin-right: 2em;
 			}
-	
+
 			${ appendSelectors( selector, '> [data-align="right"]' ) } {
 				float: right;
 				margin-left: 2em;
 			}
+
 		`;
 
+		if ( hasBlockGapStylesSupport ) {
+			style += `
+				${ appendSelectors( selector, '> *' ) } {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
+				${ appendSelectors( selector, '> * + *' ) } {
+					margin-top: var( --wp--style--block-gap );
+				}
+			`;
+		}
+
 		return <style>{ style }</style>;
 	},
-
 	getOrientation() {
 		return 'vertical';
 	},
-
 	getAlignments( layout ) {
+		const alignmentInfo = getAlignmentsInfo( layout );
 		if ( layout.alignments !== undefined ) {
-			return layout.alignments;
+			if ( ! layout.alignments.includes( 'none' ) ) {
+				layout.alignments.unshift( 'none' );
+			}
+			return layout.alignments.map( ( alignment ) => ( {
+				name: alignment,
+				info: alignmentInfo[ alignment ],
+			} ) );
+		}
+		const { contentSize, wideSize } = layout;
+
+		const alignments = [
+			{ name: 'left' },
+			{ name: 'center' },
+			{ name: 'right' },
+		];
+
+		if ( contentSize ) {
+			alignments.unshift( { name: 'full' } );
 		}
 
-		return layout.contentSize || layout.wideSize
-			? [ 'wide', 'full', 'left', 'center', 'right' ]
-			: [ 'left', 'center', 'right' ];
+		if ( wideSize ) {
+			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
+		}
+
+		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
+
+		return alignments;
 	},
 };
+
+/**
+ * Helper method to assign contextual info to clarify
+ * alignment settings.
+ *
+ * Besides checking if `contentSize` and `wideSize` have a
+ * value, we now show this information only if their values
+ * are not a `css var`. This needs to change when parsing
+ * css variables land.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
+ *
+ * @param {Object} layout The layout object.
+ * @return {Object} An object with contextual info per alignment.
+ */
+function getAlignmentsInfo( layout ) {
+	const { contentSize, wideSize } = layout;
+	const alignmentInfo = {};
+	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	if ( sizeRegex.test( contentSize ) ) {
+		// translators: %s: container size (i.e. 600px etc)
+		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
+	}
+	if ( sizeRegex.test( wideSize ) ) {
+		// translators: %s: container size (i.e. 600px etc)
+		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
+	}
+	return alignmentInfo;
+}