navigation-menu: rebase -> customization - first approach

WordPress · Oct 8, 2019 · 840e3d2 · 840e3d2
1 parent 7d8f300
commit 840e3d2
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 0 deletions.
diff --git a/packages/block-library/src/navigation-menu/block-colors-selector.js b/packages/block-library/src/navigation-menu/block-colors-selector.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelColorSettings } from '@wordpress/block-editor';
+import { IconButton, Dropdown, Toolbar, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { DOWN } from '@wordpress/keycodes';
+// import ColorPalette from '@wordpress/block-editor';
+
+const BlockColorsStyleSelector = () => {
+	const ColorSelectorIcon = () =>
+		<div className="block-editor-block-colors-selector__icon-container">
+			<div className="colors-selector__state-selection">
+				{ __( 'Aa' ) }
+			</div>
+		</div>;
+
+	return (
+		<Dropdown
+			position="bottom right"
+			className="editor-block-colors-selector block-editor-block-colors-selector"
+			contentClassName="editor-block-colors-selector__popover block-editor-block-colors-selector__popover"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const openOnArrowDown = ( event ) => {
+					if ( ! isOpen && event.keyCode === DOWN ) {
+						event.preventDefault();
+						event.stopPropagation();
+						onToggle();
+					}
+				};
+
+				return (
+					<Toolbar>
+						<IconButton
+							className="components-icon-button components-toolbar__control block-editor-block-colors-selector__toggle"
+							label={ __( 'Open colors selector' ) }
+							onClick={ onToggle }
+							onKeyDown={ openOnArrowDown }
+							icon={ <ColorSelectorIcon/> }
+						/>
+					</Toolbar>
+				);
+			} }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<PanelColorSettings
+						title={ __( 'Color Settings' ) }
+						initialOpen={ true }
+						colorSettings={ [
+							{
+								value: '#aaa',
+								onChange: console.log,
+								label: __( 'Background Color' ),
+							},
+							{
+								value: '#bbb',
+								onChange: console.log,
+								label: __( 'Text Color' ),
+							},
+						] }
+					>
+					</PanelColorSettings>
+				</>
+			) }
+		/>
+	);
+};
+
+export default BlockColorsStyleSelector;
diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js
@@ -23,6 +23,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useBlockNavigator from './use-block-navigator';
+import BlockColorsStyleSelector from './block-colors-selector';
+
+console.log( BlockColorsStyleSelector );
+
 
 function NavigationMenu( {
 	attributes,
@@ -32,6 +36,7 @@ function NavigationMenu( {
 	isRequesting,
 } ) {
 	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId );
+
 	const defaultMenuItems = useMemo(
 		() => {
 			if ( ! pages ) {
@@ -52,6 +57,7 @@ function NavigationMenu( {
 				<Toolbar>
 					{ navigatorToolbarButton }
 				</Toolbar>
+				<BlockColorsStyleSelector />
 			</BlockControls>
 			{ navigatorModal }
 			<InspectorControls>

diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
@@ -16,3 +16,58 @@
 		margin-left: $grid-size-large;
 	}
 }
+
+/**
+ * Colors selector component
+ */
+$colors-selector-size: 20px;
+.block-editor-block-colors-selector {
+	width: auto;
+
+	// Toolbar colors-selector button.
+	.block-editor-block-colors-selector__toggle {
+		display: block;
+		margin: 0 auto;
+		padding: 3px;
+		width: auto;
+
+		// Button container.
+		.block-editor-block-colors-selector__icon-container {
+			width: 42px;
+			height: 30px;
+			position: relative;
+			margin: 0 auto;
+			padding: 3px;
+			display: flex;
+			align-items: center;
+			border-radius: 4px;
+
+			// colors-selector - selection status.
+			.colors-selector__state-selection {
+				box-shadow: 0 0 1px #000 inset;
+				background-color: #f00;
+				color: #fff;
+				font-size: 10px;
+
+				border-radius: $colors-selector-size / 2;
+				width: $colors-selector-size;
+				min-width: $colors-selector-size;
+				height: $colors-selector-size;
+				min-height: $colors-selector-size;
+				line-height: ($colors-selector-size - 2);
+			}
+
+			// Add the button arrow.
+			&::after {
+				@include dropdown-arrow();
+			}
+
+			// Styling button states.
+			&:focus,
+			&:hover {
+				color: #555d66;
+				box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
+			}
+		}
+	}
+}