first commit

2023-11-30 13:20:54 -05:00
commit e9e5c0546c
5833 changed files with 1801865 additions and 0 deletions
@@ -0,0 +1,114 @@
+/**
+ * Internal dependencies
+ */
+const {
+	canvasBreakpoints,
+} = window;
+
+/**
+ * Row block styles for Editor
+ *
+ * @param {Object} attributes block attributes
+ * @param {String} className block class name
+ * @param {String} clientId block client id
+ *
+ * @returns {String}
+ */
+export default function( attributes, className, clientId ) {
+	let result = '';
+	let hideResizer = true;
+
+	Object.keys( canvasBreakpoints ).forEach( ( name ) => {
+		const data = canvasBreakpoints[ name ];
+		let styles = '';
+		let suffix = '';
+
+		if ( 'desktop' !== name ) {
+			suffix = `_${ name }`;
+		}
+
+		/**
+		 * Hide resizer.
+		 */
+		if ( suffix && hideResizer ) {
+			hideResizer = false;
+			styles += `
+				.${ className } + .cnvs-block-column-resizer {
+					display: none;
+				}
+			`;
+		}
+
+		/**
+		 * Size.
+		 */
+		if ( attributes[ `size${ suffix }` ] ) {
+			const size = attributes[ `size${ suffix }` ];
+			styles += `
+				#block-${ clientId }[data-type="canvas/column"] {
+					-ms-flex-preferred-size: ${ 100 * size / 12 }%;
+					flex-basis: ${ 100 * size / 12 }%;
+					width: ${ 100 * size / 12 }%;
+				}
+			`;
+		}
+
+		/**
+		 * Order.
+		 */
+		if ( attributes[ `order${ suffix }` ] ) {
+			const order = attributes[ `order${ suffix }` ];
+			styles += `
+				#block-${ clientId }[data-type="canvas/column"] {
+					-ms-flex-order: ${ order };
+					order: ${ order };
+				}
+			`;
+		}
+
+		/**
+		 * Min Height.
+		 */
+		if ( attributes[ `minHeight${ suffix }` ] ) {
+			const minHeight = attributes[ `minHeight${ suffix }` ];
+			styles += `
+				.${ className } > .cnvs-block-column-inner {
+					min-height: ${ minHeight };
+				}
+			`;
+		}
+
+		/**
+		 * Vertical Align.
+		 */
+		if ( attributes[ `verticalAlign${ suffix }` ] ) {
+			let verticalAlign = attributes[ `verticalAlign${ suffix }` ];
+
+			if ( 'top' === verticalAlign ) {
+				verticalAlign = 'flex-start';
+			} else if ( 'bottom' === verticalAlign ) {
+				verticalAlign = 'flex-end';
+			}
+
+			styles += `
+				#block-${ clientId }[data-type="canvas/column"] {
+					justify-content: ${ verticalAlign };
+				}
+				.${ className } > .cnvs-block-column-inner {
+					align-items: ${ verticalAlign };
+				}
+			`;
+		}
+
+		// add media query.
+		if ( suffix && styles ) {
+			styles = `@media (max-width: ${ data.width }px) { ${ styles } } `;
+		}
+
+		if ( styles ) {
+			result += styles;
+		}
+	} );
+
+	return result;
+}