add variables to Navigation Block

solidbunch · Jul 18, 2024 · 17dd542 · 17dd542
1 parent 26c3a26
commit 17dd542
Showing 1 changed file with 18 additions and 10 deletions.
diff --git 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>