first commit

2023-11-30 13:20:54 -05:00
commit e9e5c0546c
5833 changed files with 1801865 additions and 0 deletions
@@ -0,0 +1,207 @@
+/**
+ * Internal dependencies
+ */
+import isCoreBlockWithExt from '../../utils/is-core-block-with-ext';
+import dynamicStylesBYkey from '../../utils/dynamic-styles-by-key';
+
+const {
+	canvasBreakpoints,
+} = window;
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+const {
+	addFilter,
+} = wp.hooks;
+
+const {
+	Component,
+	Fragment,
+} = wp.element;
+
+const {
+	createHigherOrderComponent,
+} = wp.compose;
+
+const { InspectorControls } = wp.blockEditor;
+
+const {
+	PanelBody,
+	ToggleControl,
+} = wp.components;
+
+const {
+	hasBlockSupport,
+} = wp.blocks;
+
+/**
+ * Extend block attributes with spacings.
+ *
+ * @param {Object} blockSettings Original block settings.
+ * @param {String} name Original block name.
+ *
+ * @return {Object} Filtered block settings.
+ */
+function addAttribute( blockSettings, name ) {
+	let supports = hasBlockSupport( name, 'canvasResponsive', false );
+
+	// add support to core blocks
+	if ( isCoreBlockWithExt( name ) ) {
+		blockSettings.supports = {
+			...blockSettings.supports,
+			canvasResponsive: true,
+		};
+		supports = true;
+	}
+
+	if ( supports ) {
+		if ( ! blockSettings.attributes ) {
+			blockSettings.attributes = {};
+		}
+
+		// responsive attributes.
+		Object.keys( canvasBreakpoints ).forEach( ( breakpoint ) => {
+			if ( ! blockSettings.attributes[ `canvasResponsiveHide_${ breakpoint }` ] ) {
+				blockSettings.attributes[ `canvasResponsiveHide_${ breakpoint }` ] = {
+					type: 'boolean',
+				};
+			}
+		} );
+	}
+
+	return blockSettings;
+}
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning the custom spacings if needed.
+ *
+ * @param {function|Component} BlockEdit Original component.
+ *
+ * @return {string} Wrapped component.
+ */
+const withInspectorControl = createHigherOrderComponent( ( OriginalComponent ) => {
+	return class CanvasResponsiveWrapper extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.getResponsiveStyles = this.getResponsiveStyles.bind( this );
+		}
+
+		/**
+		 * Prepare styles to `hide` block.
+		 *
+		 * @returns {String} responsive styles.
+		 */
+		getResponsiveStyles() {
+			const {
+				attributes,
+				clientId,
+			} = this.props;
+
+			const {
+				canvasClassName,
+			} = attributes;
+
+			let customStyles = '';
+
+			if ( canvasClassName ) {
+				const blockSelector = `#block-${ clientId }`;
+
+				Object.keys( canvasBreakpoints ).forEach( ( breakpoint, i ) => {
+					let media = '';
+
+					switch (breakpoint) {
+						case 'mobile':
+							media = `(max-width: ${ canvasBreakpoints['mobile'].width }px)`;
+							break;
+						case 'tablet':
+							media = `(min-width: ${ canvasBreakpoints['mobile'].width + 1 }px) and (max-width: ${ canvasBreakpoints['tablet'].width }px)`;
+							break;
+						case 'notebook':
+							media = `(min-width: ${ canvasBreakpoints['tablet'].width + 1 }px) and (max-width: ${ canvasBreakpoints['notebook'].width }px)`;
+							break;
+						case 'laptop':
+							media = `(min-width: ${ canvasBreakpoints['tablet'].width + 1 }px) and (max-width: ${ canvasBreakpoints['laptop'].width }px)`;
+							break;
+						case 'desktop':
+							media = `(min-width: ${ canvasBreakpoints['desktop'].width }px)`;
+							break;
+					}
+
+					if ( attributes[ 'canvasResponsiveHide_' + breakpoint ] ) {
+						customStyles += `
+							@media ${ media } {
+								${ blockSelector }::before {
+									background: rgba(0, 0, 0, 0.1) repeating-linear-gradient(125deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px);
+								}
+								${ blockSelector } {
+									-webkit-filter: opacity(0.4) saturate(0);
+									filter: opacity(0.4) saturate(0);
+								}
+							}
+						`;
+					}
+				} );
+			}
+
+			return customStyles;
+		}
+
+		render() {
+			if ( ! hasBlockSupport( this.props.name, 'canvasResponsive', false ) ) {
+				return <OriginalComponent { ...this.props } />;
+			}
+
+			const {
+				attributes,
+				setAttributes,
+			} = this.props;
+
+			const {
+				canvasClassName,
+			} = attributes;
+
+			dynamicStylesBYkey( 'responsive', canvasClassName, this.getResponsiveStyles() );
+
+			// add new spacings controls.
+			return (
+				<Fragment>
+					<OriginalComponent
+						{ ...this.props }
+						{ ...this.state }
+						setState={ this.setState }
+					/>
+					<InspectorControls>
+						<PanelBody
+							title={ __( 'Responsive Settings' ) }
+							initialOpen={ false }
+						>
+							{ Object.keys( canvasBreakpoints ).map( ( breakpoint ) => {
+								return (
+									<ToggleControl
+										key={ breakpoint }
+										label={ __( 'Hide On ' ) + canvasBreakpoints[breakpoint].label }
+										checked={ attributes[ `canvasResponsiveHide_${ breakpoint }` ] }
+										onChange={ () => {
+											setAttributes( {
+												[ `canvasResponsiveHide_${ breakpoint }` ]: ! attributes[ `canvasResponsiveHide_${ breakpoint }` ],
+											} );
+										} }
+									/>
+								);
+							} ) }
+						</PanelBody>
+					</InspectorControls>
+				</Fragment>
+			);
+		}
+	}
+}, 'withInspectorControl' );
+
+// Init filters.
+addFilter( 'blocks.registerBlockType', 'canvas/responsive-settings/additional-attributes', addAttribute );
+addFilter( 'editor.BlockEdit', 'canvas/responsive-settings/additional-attributes', withInspectorControl );