From 00fdd778c3ecf8ef256be11503df8fc453d9257b Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 15 Jun 2023 10:46:45 +0100
Subject: [PATCH] Experiment with settings

---
 lib/block-editor-settings.php                 | 12 +++++++
 .../navigation/edit/overlay-menu-preview.js   | 32 +++++++++++++------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php
index 53668e114e04cb..f798546f986827 100644
--- a/lib/block-editor-settings.php
+++ b/lib/block-editor-settings.php
@@ -146,6 +146,18 @@ function gutenberg_get_block_editor_settings( $settings ) {
 			);
 	}
 
+	$settings['navigationBlockOverlayIcons'] = array(
+		array(
+			'label' => __( 'Handle icon', 'gutenberg' ),
+			'icon'  => 'handle',
+		),
+		array(
+			'label' => __( 'Menu icon', 'gutenberg' ),
+			'icon'  => 'menu',
+		),
+
+	);
+
 	return $settings;
 }
 add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', 0 );
diff --git a/packages/block-library/src/navigation/edit/overlay-menu-preview.js b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
index adb1377a604ede..780072444d4601 100644
--- a/packages/block-library/src/navigation/edit/overlay-menu-preview.js
+++ b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
@@ -7,6 +7,8 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,6 +16,16 @@ import { __ } from '@wordpress/i18n';
 import OverlayMenuIcon from './overlay-menu-icon';
 
 export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
+	// get the icons from the block editor settings via a useSelect.
+	// they are under the key "navigationBlockOverlayIcons"
+
+	const navigationBlockOverlayIcons = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.navigationBlockOverlayIcons,
+		[]
+	);
+
 	return (
 		<>
 			<ToggleControl
@@ -33,16 +45,16 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 				onChange={ ( value ) => setAttributes( { icon: value } ) }
 				isBlock
 			>
-				<ToggleGroupControlOption
-					value="handle"
-					aria-label={ __( 'handle' ) }
-					label={ <OverlayMenuIcon icon="handle" /> }
-				/>
-				<ToggleGroupControlOption
-					value="menu"
-					aria-label={ __( 'menu' ) }
-					label={ <OverlayMenuIcon icon="menu" /> }
-				/>
+				{ navigationBlockOverlayIcons.map(
+					( { label, icon: _icon } ) => (
+						<ToggleGroupControlOption
+							key={ _icon }
+							value={ _icon }
+							aria-label={ label }
+							label={ <OverlayMenuIcon icon={ _icon } /> }
+						/>
+					)
+				) }
 			</ToggleGroupControl>
 		</>
 	);