mobile view control patch

blocks.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name:     Noor Blocks
  * Description:     Collection of custom blocks.
- * Version: 				1.1.2
+ * Version: 				1.1.3
  * Author:          Noor Digital Agency
  * Author URI:      https://noordigital.com
  * Text Domain:     blocks

build/index.asset.php

@@ -1 +1 @@
-<?php return array('index.js' => array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '436bdb2481a9e4dbe3e29c98d55f57bd'), 'accordion.js' => array('dependencies' => array('wp-polyfill'), 'version' => '954a5ccf99e04153addabfadf70be9cd'));
+<?php return array('index.js' => array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '5864c2db1ff2d5760679b23e22a3bfb6'), 'accordion.js' => array('dependencies' => array('wp-polyfill'), 'version' => '954a5ccf99e04153addabfadf70be9cd'));

readme.txt

@@ -3,7 +3,7 @@ Contributors:
 Tags:              block
 Requires at least: 5.3.2
 Tested up to:      5.4.1
-Stable tag:        1.1.2
+Stable tag:        1.1.3
 Requires PHP:      7.0.0
 License:           GPL-2.0-or-later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
@@ -52,7 +52,7 @@ directory take precedence. For example, `/assets/screenshot-1.png` would win ove
 
 1. Added location icon to core/button
 
-* Patch 1.1.2
+* Patch 1.1.3
 
 1. Added global block control for media query display
 

src/blocks/accordion/edit.js

@@ -6,7 +6,7 @@ import { RadioGroup } from '../../components/radio-group'
 
 export default function Edit( props ) {
 
-	const { titleColor, setTitleColor, titleBackground, setTitleBackground, contentBackground, setContentBackground, attributes, setAttributes } = props;
+	const { titleColor, setTitleColor, titleBackground, setTitleBackground, contentBackground, setContentBackground, attributes, setAttributes, mediaControl } = props;
 
 	const [expanded, setExpanded] = useState(false);
 
@@ -79,6 +79,17 @@ export default function Edit( props ) {
 						showIcons={true} 
 					/>
 				</PanelBody>
+
+				<PanelBody
+          title={ __( 'Mobile View Control' ) }
+          initialOpen={ true }
+        > 
+          <ToggleControl
+            label={__(`${props.attributes.mediaControl ? 'Display' : 'Hide'} on mobile`)}
+            checked={props.attributes.mediaControl}
+            onChange={mediaControl => props.setAttributes({ mediaControl })}
+          />
+        </PanelBody>
 
 				<PanelColorSettings
 					title={__('Color settings')}

src/blocks/accordion/index.js

@@ -50,6 +50,10 @@ export const settings = {
 		iconAlignment: {
 			type: 'string',
 			default: 'right'
+		},
+		mediaControl: {
+			type: 'boolean',
+			default: true
 		}
 	},
 	edit: withColors({

src/blocks/accordion/save.js

@@ -3,19 +3,21 @@ import { InnerBlocks, RichText, getColorClassName } from '@wordpress/block-edito
 
 export default function save( { attributes } ) {
 
-	const { titleColor, titleBackground, contentBackground } = attributes;
+	const { titleColor, titleBackground, contentBackground, mediaControl } = attributes;
 
 	const titleColorClass = titleColor != undefined ? getColorClassName('color', titleColor) : '';
 
 	const titleBackgroundClass = titleBackground != undefined ? getColorClassName('background-color', titleBackground) : '';
 
 	const contentBackgroundClass = contentBackground != undefined ? getColorClassName('background-color', contentBackground) : '';
 
+	const hide = mediaControl ? '' : 'on-media-hide';
+
 	return ( 
 		<>
 			<div 
 				id={`#${attributes.anchorContent}`}
-				className={`noor-block-accordion ${titleBackgroundClass}`} aria-expanded={attributes.initialState}
+				className={`noor-block-accordion ${titleBackgroundClass} ${hide}`} aria-expanded={attributes.initialState}
 			>
 				<RichText.Content 
 					className={`noor-block-accordion__title ${titleColorClass}`}

src/blocks/bulletpoint/edit.js

@@ -4,10 +4,10 @@ import { PanelBody, Button, ResponsiveWrapper, __experimentalInputControl as Inp
 import { Fragment } from '@wordpress/element'
 
 export default function Edit( props ) {
-
+  
   const {color, setColor, backgroundColor, setBackgroundColor, attributes, setAttributes, className} = props;
 
-  const { align, mediaId } = attributes;
+  const { align, mediaId, mediaControl } = attributes;
 
   const colorClass = color.class != undefined ? color.class : '';
 
@@ -29,7 +29,7 @@ export default function Edit( props ) {
 
 	const blockStyle = {
 		backgroundImage: attributes.mediaUrl != '' ? 'url("' + attributes.mediaUrl + '")' : 'none'
-	};
+  };
 
   return (
     <Fragment>
@@ -73,6 +73,17 @@ export default function Edit( props ) {
               />}
         </PanelBody>
 
+        <PanelBody
+          title={ __( 'Mobile View Control' ) }
+          initialOpen={ true }
+        > 
+          <ToggleControl
+            label={__(`${props.attributes.mediaControl ? 'Display' : 'Hide'} on mobile`)}
+            checked={props.attributes.mediaControl}
+            onChange={mediaControl => props.setAttributes({ mediaControl })}
+          />
+        </PanelBody>
+
         <PanelColorSettings 
           title={__( 'Colot settings' )}
           initialOpen={true}

src/blocks/bulletpoint/index.js

@@ -41,6 +41,10 @@ export const settings = {
 		mediaUrl: {
 			type: 'string',
 			default: ''
+		},
+		mediaControl: {
+			type: 'boolean',
+			default: true
 		}
 	},
   edit: compose(
@@ -50,14 +54,16 @@ export const settings = {
 		}))( Edit ),
   save: ({ attributes }) => {
 
-		const {color, backgroundColor, align} = attributes;
+		const {color, backgroundColor, align, mediaControl} = attributes;
 
 		const colorClass = color != undefined ? getColorClassName( 'color', color ) : '';
 
 		const backgroundColorClass = backgroundColor != undefined ? getColorClassName('background-color', backgroundColor) : '';
+
+		const hide = mediaControl ? '' : 'on-media-hide';
 
 		return (
-			<div class={`noor-block-bullet-point has-align-${align}`}>
+			<div className={`noor-block-bullet-point has-align-${align} ${hide}`}>
 				<div className={`noor-block-bullet-point__point ${backgroundColorClass}`}>
 					{attributes.useMedia && attributes.mediaId != 0 
 						? <img src={attributes.mediaUrl} /> 

src/blocks/google-map/edit.js

@@ -11,7 +11,7 @@ export default function Edit ( props ) {
 
   const { attributes, setAttributes } = props;
 
-  const { width, height, zoom, address } = attributes;
+  const { width, height, zoom, address, mediaControl } = attributes;
 
   const getaddress = Object.values(address).filter(line => line != '');
 
@@ -75,6 +75,17 @@ export default function Edit ( props ) {
             onChange={country => setAttributes({ address: { ...address, country } })}
           />
         </PanelBody>
+
+        <PanelBody
+          title={ __( 'Mobile View Control' ) }
+          initialOpen={ true }
+        > 
+          <ToggleControl
+            label={__(`${props.attributes.mediaControl ? 'Display' : 'Hide'} on mobile`)}
+            checked={props.attributes.mediaControl}
+            onChange={mediaControl => props.setAttributes({ mediaControl })}
+          />
+        </PanelBody>
       </InspectorControls>
 
       <div className="noor-block-google-map" style={styles}>

src/blocks/google-map/index.js

@@ -36,14 +36,18 @@ export const settings = {
     },
     src: {
       type: 'string'
+    },
+    mediaControl: {
+      type: 'boolean',
+      default: true
     }
   },
   edit: Edit,
   save: ( props ) => {
 
     const {width, height, src } = props.attributes;
 
-    props.className = 'noor-block-google-map';
+    props.className = `noor-block-google-map ${props.attributes.mediaControl ? '' : 'on-media-hide'}`;
 
     return (
       <div className={props.className} style={{width: `${width}%`, paddingBottom: `${height}%`}}>

src/index.js

@@ -43,41 +43,49 @@ registerNoorBlocks();
 
 const mediaQueryControl = (settings, name) => {
 
-  Object.assign(settings.attributes, {
-    mediaControl: {
-      type: 'boolean',
-      default: true
-    }
-  });
+  if ( ! name.includes( 'noor' ) ) {
+
+    Object.assign(settings.attributes, {
+      mediaControl: {
+        type: 'boolean',
+        default: true
+      }
+    });
+  }
 
   return settings;
 }
 
-const mediaControl =   createHigherOrderComponent( BlockEdit => props => {
-
-  return (
-    <Fragment>
-      <BlockEdit {...props} />
-
-      <InspectorControls>
-        <PanelBody
-          title={ __( 'Mobile View Control' ) }
-          initialOpen={ true }
-        > 
-          <ToggleControl
-            label={__('Display on mobile')}
-            checked={props.attributes.mediaControl}
-            onChange={mediaControl => props.setAttributes({ mediaControl })}
-          />
-        </PanelBody>
-      </InspectorControls>
-    </Fragment>
-  );
+const mediaControl = createHigherOrderComponent( BlockEdit => props => {
+
+  if ( ! props.name.includes( 'noor' ) ) {
+
+    return (
+      <Fragment>
+        <BlockEdit {...props} />
+
+        <InspectorControls>
+          <PanelBody
+            title={ __( 'Mobile View Control' ) }
+            initialOpen={ true }
+          > 
+            <ToggleControl
+              label={__(`${props.attributes.mediaControl ? 'Display' : 'Hide'} on mobile`)}
+              checked={props.attributes.mediaControl}
+              onChange={mediaControl => props.setAttributes({ mediaControl })}
+            />
+          </PanelBody>
+        </InspectorControls>
+      </Fragment>
+    );
+  }
+
+  return <BlockEdit {...props} />
 }, 'mediaControl');
 
 const mediaExtraProps = ( props, blockType, attributes ) => {
-  
-  if ( ! attributes.mediaControl ) {
+
+  if ( ! attributes.mediaControl && ! blockType.name.includes('noor') ) {
 
     props.className = props.className + ' on-media-hide';
   }