Media controler

blocks.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name:     Noor Blocks
  * Description:     Collection of custom blocks.
- * Version: 				1.1.1
+ * Version: 				1.1.2
  * 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' => '4efdc7ca779cc18f45231013227c2066'), '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' => '436bdb2481a9e4dbe3e29c98d55f57bd'), '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.1
+Stable tag:        1.1.2
 Requires PHP:      7.0.0
 License:           GPL-2.0-or-later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
@@ -43,11 +43,18 @@ directory take precedence. For example, `/assets/screenshot-1.png` would win ove
 
 1. added new block map-block to use google maps in editor
 
-== 1.1.0 ==
+= 1.1.0 =
 1. Google map block fixed
 
-== 1.1.1 ==
-Added location icon to core/button
+= 1.1.1 =
+
+* Patch 1.1.1
+
+1. Added location icon to core/button
+
+* Patch 1.1.2
+
+1. Added global block control for media query display
 
 == Arbitrary section ==
 

src/index.js

@@ -8,6 +8,12 @@ import * as googleMap from './blocks/google-map/index'
 
 import { addFilter } from '@wordpress/hooks'
 
+import { __ } from '@wordpress/i18n'
+import { createHigherOrderComponent } from '@wordpress/compose'
+import { Fragment } from '@wordpress/element'
+import { InspectorControls } from '@wordpress/block-editor'
+import { PanelBody, ToggleControl } from '@wordpress/components'
+
 import { 
   addInlineIconAttribute,
   withIcon
@@ -35,6 +41,69 @@ const registerNoorBlocks = () => [
 
 registerNoorBlocks();
 
+const mediaQueryControl = (settings, name) => {
+
+  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>
+  );
+}, 'mediaControl');
+
+const mediaExtraProps = ( props, blockType, attributes ) => {
+
+  if ( ! attributes.mediaControl ) {
+
+    props.className = props.className + ' on-media-hide';
+  }
+
+  return props;
+}
+
+// MEDIA DISPLAY SWITCH
+addFilter(
+  'blocks.registerBlockType',
+  'noor/gutenberg-blocks/custom-attributes',
+  mediaQueryControl
+);
+
+addFilter( 
+  'editor.BlockEdit', 
+  'noor/gutenberg-blocks/custom-control', 
+  mediaControl 
+);
+
+addFilter(
+  'blocks.getSaveContent.extraProps',
+  'noor/gutenberg-blocks/extraProps',
+  mediaExtraProps
+);
+
 // CORE/BUTTON
 addFilter( 
   'blocks.registerBlockType',