From 17dd542e1d89d56b93e7ce66702ca93dad050ba3 Mon Sep 17 00:00:00 2001
From: David <halkin.david@gmail.com>
Date: Thu, 18 Jul 2024 19:15:02 +0300
Subject: [PATCH] add variables to Navigation Block

---
 blocks/Navigation/src/index.jsx | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/blocks/Navigation/src/index.jsx b/blocks/Navigation/src/index.jsx
index 50a1665c..b8d72138 100644
--- a/blocks/Navigation/src/index.jsx
+++ b/blocks/Navigation/src/index.jsx
@@ -2,7 +2,7 @@
  * Block dependencies
  */
 import metadata from '../block.json';
-
+import variables from '../../../assets/build/variables.json';
 /**
  * Internal block libraries
  */
@@ -12,6 +12,22 @@ const {PanelBody, SelectControl, Spinner} = wp.components;
 const {serverSideRender: ServerSideRender} = wp;
 const {useState, useEffect} = wp.element;
 
+const getExpandOptions = (breakpoints) => {
+  const options = [
+    {label: 'No responsive', value: 'navbar-expand'},
+    {label: 'Always expand', value: ''}
+  ];
+
+  Object.keys(breakpoints).forEach(key => { 
+    if (key !== 'xs') {
+      options.push({label: `${key.toUpperCase()} and under`, value: `navbar-expand-${key}`});
+    }
+  });
+
+  return options;
+};
+const expandOptions = getExpandOptions(variables['grid-breakpoints']);
+
 registerBlockType(
   metadata,
   {
@@ -92,15 +108,7 @@ registerBlockType(
             <SelectControl
               label={`Expand menu:`}
               value={attributes.expand}
-              options={[
-                {label: 'No responsive', value: 'navbar-expand'},
-                {label: 'SM and under', value: 'navbar-expand-sm'},
-                {label: 'MD and under', value: 'navbar-expand-md'},
-                {label: 'LG and under', value: 'navbar-expand-lg'},
-                {label: 'XL and under', value: 'navbar-expand-xl'},
-                {label: 'XXL and under', value: 'navbar-expand-xxl'},
-                {label: 'Always expand', value: ''},
-              ]}
+              options={expandOptions}
               onChange={(expand) => setAttributes({expand})}
             />
           </PanelBody>