Drupal block_breakpoint I'm working on

drupal-block-breakpoint.patch

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9f11b75
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/config/schema/block_breakpoint.schema.yml b/config/schema/block_breakpoint.schema.yml
index 9e94a14..8bf3b08 100644
--- a/config/schema/block_breakpoint.schema.yml
+++ b/config/schema/block_breakpoint.schema.yml
@@ -18,3 +18,6 @@ block.block.*.third_party.block_breakpoint:
           breakpoint_id:
             type: string
             label: 'Breakpoint ID'
+    hide:
+      type: boolean
+      label: 'Hide the element instead of removing it'
diff --git a/js/block-breakpoint.js b/js/block-breakpoint.js
index d3c7dd2..7f795be 100644
--- a/js/block-breakpoint.js
+++ b/js/block-breakpoint.js
@@ -19,18 +19,18 @@ var blockBreakpointGetClosestParent = function (element, selector) {
   // Element.matches() polyfill
   if (!Element.prototype.matches) {
     Element.prototype.matches =
-        Element.prototype.matchesSelector ||
-        Element.prototype.mozMatchesSelector ||
-        Element.prototype.msMatchesSelector ||
-        Element.prototype.oMatchesSelector ||
-        Element.prototype.webkitMatchesSelector ||
-        function (s) {
-          var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-              i = matches.length;
-          while (--i >= 0 && matches.item(i) !== this) {
-          }
-          return i > -1;
-        };
+      Element.prototype.matchesSelector ||
+      Element.prototype.mozMatchesSelector ||
+      Element.prototype.msMatchesSelector ||
+      Element.prototype.oMatchesSelector ||
+      Element.prototype.webkitMatchesSelector ||
+      function (s) {
+        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+          i = matches.length;
+        while (--i >= 0 && matches.item(i) !== this) {
+        }
+        return i > -1;
+      };
   }
 
   // Get the closest matching element
@@ -50,38 +50,67 @@ var blockBreakpointGetClosestParent = function (element, selector) {
  */
 var blockBreakpointMatchElement = function(element) {
   if (!element.classList.contains('layout-builder-block')) {
-    var match_media_query;
-    if (match_media_query = element.getAttribute('data-block-breakpoint-media-query')) {
+    var match_media_query = element.getAttribute('data-block-breakpoint-media-query');
+    if (match_media_query) {
       // Check if the given media query is matched. Otherwise remove the block
       // before it is getting further processed in the DOM.
-      if (!window.matchMedia(match_media_query).matches) {
+      if (window.matchMedia(match_media_query).matches && element.getAttribute('data-block-breakpoint-hidden')) {
+        element.setAttribute('data-block-breakpoint-hidden', 0)
+        element.removeAttribute('data-block-breakpoint-prev-display')
+        element.style.display = element.getAttribute('data-block-breakpoint-prev-display')
+      } else {
         // Internet Explorer 11 does not support removing HtmlElement,
         // therefore using the old fashion way.
-        element.parentNode.removeChild(element);
+        element.setAttribute('data-block-breakpoint-hidden', 1)
+        element.setAttribute('data-block-breakpoint-prev-display', element.style.display)
+        element.style.display = 'none'
       }
     }
   }
 }
 
-/**
- * React the initial DOM.
- */
-document.addEventListener('DOMContentLoaded', function() {
+function throttle(callback, limit) {
+  var waiting = false
+  return function() {
+    if (!waiting) {
+      // eslint-disable-next-line
+      callback.apply(this, arguments)
+      waiting = true
+      setTimeout(function() {
+        waiting = false
+      }, limit)
+    }
+  }
+}
+
+function checkBlockBreakpoints() {
   var blocks = document.body.querySelectorAll('.block-breakpoint');
   for (var i = 0; i < blocks.length; i++) {
     blockBreakpointMatchElement(blocks[i]);
   }
-});
+}
 
 /**
  * React on DOM changes using the MutationObserver.
  */
 if (window.MutationObserver) {
+  // Observe the creation of blocks with block_breakpoint feature anbled.
   new MutationObserver(function () {
-    // Observe the creation of blocks with block_breakpoint feature anbled.
-    var blocks = document.body.querySelectorAll('.block-breakpoint');
-    for (var i = 0; i < blocks.length; i++) {
-      blockBreakpointMatchElement(blocks[i]);
-    }
+    checkBlockBreakpoints()
   }).observe(document.documentElement, {childList: true, subtree: false});
 }
+
+/**
+ * React the initial DOM.
+ */
+document.addEventListener('DOMContentLoaded', function() {
+  checkBlockBreakpoints()
+});
+
+window.addEventListener('resize', throttle(() => {
+  checkBlockBreakpoints()
+}, 50))
+
+window.addEventListener('orientationchange', throttle(() => {
+  checkBlockBreakpoints()
+}, 50))
diff --git a/src/BlockBreakpointManager.php b/src/BlockBreakpointManager.php
index 9395fcb..2326aa6 100644
--- a/src/BlockBreakpointManager.php
+++ b/src/BlockBreakpointManager.php
@@ -147,6 +147,14 @@ class BlockBreakpointManager {
         ],
       ],
     ];
+
+    // Add enabled checkbox.
+    $form['block_breakpoint']['hide'] = [
+      '#type' => 'checkbox',
+      '#title' => t('Do not remove block'),
+      '#description' => t('Hide the block with CSS display:none instead of removing it from the DOM.'),
+      '#default_value' => $object->getThirdPartySetting('block_breakpoint', 'hide'),
+    ];
   }
 
   /**
@@ -227,6 +235,7 @@ class BlockBreakpointManager {
       $object->unsetThirdPartySetting('block_breakpoint', 'enabled');
       $object->unsetThirdPartySetting('block_breakpoint', 'breakpoint_group');
       $object->unsetThirdPartySetting('block_breakpoint', 'breakpoint');
+      $object->unsetThirdPartySetting('block_breakpoint', 'hide');
     }
     else {
       $object->setThirdPartySetting('block_breakpoint', 'enabled', TRUE);
@@ -239,6 +248,7 @@ class BlockBreakpointManager {
         $breakpoints[] = ['breakpoint_id' => $breakpoint_id];
       }
       $object->setThirdPartySetting('block_breakpoint', 'breakpoints', $breakpoints);
+      $object->setThirdPartySetting('block_breakpoint', 'hide', $values['hide']);
     }
   }
 
@@ -261,6 +271,7 @@ class BlockBreakpointManager {
         $group = $block->getThirdPartySetting('block_breakpoint', 'breakpoint_group');
         $breakpoints = $block->getThirdPartySetting('block_breakpoint', 'breakpoints');
         $variables['attributes']['data-block-breakpoint-media-query'] = $this->buildMediaQueryFromBreakpoints($breakpoints, $group);
+        $variables['attributes']['data-block-breakpoint-hide'] = $block->getThirdPartySetting('block_breakpoint', 'hide');
         // Add inline script to remove blocks while they are processed in the
         // browser.
         $variables['content'] = [$variables['content']];
@@ -286,6 +297,8 @@ class BlockBreakpointManager {
       $group = $component['#block_breakpoint']['breakpoint_group'];
       $breakpoints = $component['#block_breakpoint']['breakpoints'];
       $component['#attributes']['data-block-breakpoint-media-query'] = $this->buildMediaQueryFromBreakpoints($breakpoints, $group);
+      // In Layout Builder, we don't remove the component to avoid potential issues.
+      $component['#attributes']['data-block-breakpoint-hide'] = TRUE;
       // Add inline script to remove blocks while they are processed in the
       // browser.
       $component['content'] = [$component['content']];