From 80e0133378e673958b5f6fe12b6a14cd915402ed Mon Sep 17 00:00:00 2001
From: Lalo Sanchez <eduardourias@stellarwp.com>
Date: Wed, 28 Feb 2024 02:33:45 -0600
Subject: [PATCH] Start styling options for advanced navigation

---
 .../class-kadence-navigation-cpt.php          |  70 ++++++++
 src/blocks/navigation/edit-inner.js           | 156 +++++++++++-------
 2 files changed, 163 insertions(+), 63 deletions(-)

diff --git a/includes/navigation/class-kadence-navigation-cpt.php b/includes/navigation/class-kadence-navigation-cpt.php
index cf4912135..bbf509df5 100644
--- a/includes/navigation/class-kadence-navigation-cpt.php
+++ b/includes/navigation/class-kadence-navigation-cpt.php
@@ -27,6 +27,8 @@ public static function get_instance() {
 	public function __construct() {
 		// Register the post type.
 		add_action( 'init', array( $this, 'register_post_type' ), 2 );
+		// Register the meta settings for from post.
+		add_action( 'init', array( $this, 'register_meta' ), 20 );
 	}
 
 	/**
@@ -119,6 +121,74 @@ public function register_meta() {
 				'default' => '',
 				'type'    => 'string'
 			),
+			array(
+				'key'     		=> '_kad_navigation_padding',
+				'default'       => array( '20', '20', '20', '20' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'     		=> '_kad_navigation_tabletPadding',
+				'default'       => array( '20', '20', '20', '20' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'     		=> '_kad_navigation_mobilePadding',
+				'default'       => array( '20', '20', '20', '20' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'     => '_kad_navigation_paddingUnit',
+				'default' => 'px',
+				'type'    => 'string',
+			),
+			array(
+				'key'           => '_kad_navigation_margin',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'           => '_kad_navigation_tabletMargin',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'           => '_kad_navigation_mobileMargin',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'     => '_kad_navigation_marginUnit',
+				'default' => 'px',
+				'type'    => 'string',
+			),
+			array(
+				'key'           => '_kad_navigation_border',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'           => '_kad_navigation_borderRadius',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string'
+			),
+			array(
+				'key'           => '_kad_navigation_borderColor',
+				'default'       => '',
+				'type'          => 'string',
+			),
+			array(
+				'key'     => '_kad_navigation_borderUnit',
+				'default' => 'px',
+				'type'    => 'string',
+			),
 		);
 
 		foreach ( $register_meta as $meta ) {
diff --git a/src/blocks/navigation/edit-inner.js b/src/blocks/navigation/edit-inner.js
index 1a8c9392f..b4dc0baee 100644
--- a/src/blocks/navigation/edit-inner.js
+++ b/src/blocks/navigation/edit-inner.js
@@ -13,8 +13,19 @@ import { get, isEqual } from 'lodash';
 import { addQueryArgs } from '@wordpress/url';
 import { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';
 import { formBlockIcon } from '@kadence/icons';
-import { KadencePanelBody, InspectorControlTabs, SpacingVisualizer } from '@kadence/components';
-import { getPreviewSize, KadenceColorOutput, getSpacingOptionOutput, mouseOverVisualizer } from '@kadence/helpers';
+import {
+	KadencePanelBody,
+	InspectorControlTabs,
+	SpacingVisualizer,
+	ResponsiveMeasureRangeControl,
+} from '@kadence/components';
+import {
+	getPreviewSize,
+	KadenceColorOutput,
+	getSpacingOptionOutput,
+	mouseOverVisualizer,
+	arrayStringToInt,
+} from '@kadence/helpers';
 
 import {
 	InspectorControls,
@@ -56,16 +67,22 @@ export function EditInner(props) {
 
 	const paddingMouseOver = mouseOverVisualizer();
 	const marginMouseOver = mouseOverVisualizer();
+	const borderMouseOver = mouseOverVisualizer();
 
-	// const [ padding ] = useNavigationMeta( '_kad_navigation_padding' );
-	// const [ tabletPadding ] = useNavigationMeta( '_kad_navigation_tabletPadding' );
-	// const [ mobilePadding ] = useNavigationMeta( '_kad_navigation_mobilePadding' );
-	// const [ paddingUnit ] = useNavigationMeta( '_kad_navigation_paddingUnit' );
-	//
-	// const [ margin ] = useNavigationMeta( '_kad_navigation_margin' );
-	// const [ tabletMargin ] = useNavigationMeta( '_kad_navigation_tabletMargin' );
-	// const [ mobileMargin ] = useNavigationMeta( '_kad_navigation_mobileMargin' );
-	// const [ marginUnit ] = useNavigationMeta( '_kad_navigation_marginUnit' );
+	const [padding] = useNavigationMeta('_kad_navigation_padding');
+	const [tabletPadding] = useNavigationMeta('_kad_navigation_tabletPadding');
+	const [mobilePadding] = useNavigationMeta('_kad_navigation_mobilePadding');
+	const [paddingUnit] = useNavigationMeta('_kad_navigation_paddingUnit');
+
+	const [margin] = useNavigationMeta('_kad_navigation_margin');
+	const [tabletMargin] = useNavigationMeta('_kad_navigation_tabletMargin');
+	const [mobileMargin] = useNavigationMeta('_kad_navigation_mobileMargin');
+	const [marginUnit] = useNavigationMeta('_kad_navigation_marginUnit');
+
+	const [border] = useNavigationMeta('_kad_navigation_border');
+	const [borderRadius] = useNavigationMeta('_kad_navigation_borderRadius');
+	const [borderColor] = useNavigationMeta('_kad_navigation_borderColor');
+	const [borderUnit] = useNavigationMeta('_kad_navigation_borderUnit');
 
 	const [className] = useNavigationMeta('_kad_navigation_className');
 	const [anchor] = useNavigationMeta('_kad_navigation_anchor');
@@ -232,61 +249,74 @@ export function EditInner(props) {
 						<div className="kt-sidebar-settings-spacer"></div>
 					</>
 				)}
-
-				{activeTab === 'style' && <>Style tab</>}
+				{console.log(activeTab)}
+				{activeTab === 'style' && (
+					<>
+						<KadencePanelBody panelName={'kb-row-border'}>
+							<ResponsiveMeasureRangeControl
+								label={__('Border Width', 'kadence-blocks')}
+								value={border}
+								onChange={(value) => {
+									setMetaAttribute(value.map(String), 'border');
+								}}
+								min={0}
+								max={200}
+								step={1}
+								unit={borderUnit}
+								units={['px']}
+								onMouseOver={borderMouseOver.onMouseOver}
+								onMouseOut={borderMouseOver.onMouseOut}
+							/>
+						</KadencePanelBody>
+					</>
+				)}
 
 				{activeTab === 'advanced' && (
 					<>
-						Advanced tab
-						{/*<KadencePanelBody panelName={'kb-row-padding'}>*/}
-						{/*	<ResponsiveMeasureRangeControl*/}
-						{/*		label={__('Padding', 'kadence-blocks')}*/}
-						{/*		value={ arrayStringToInt( padding ) }*/}
-						{/*		tabletValue={ arrayStringToInt( tabletPadding ) }*/}
-						{/*		mobileValue={ arrayStringToInt( mobilePadding ) }*/}
-						{/*		onChange={(value) => {*/}
-						{/*			setMetaAttribute( value.map(String), 'padding' );*/}
-						{/*		}}*/}
-						{/*		onChangeTablet={(value) => {*/}
-						{/*			setMetaAttribute( value.map(String), 'tabletPadding' );*/}
-						{/*		}}*/}
-						{/*		onChangeMobile={(value) => {*/}
-						{/*			setMetaAttribute( value.map(String), 'mobilePadding' );*/}
-						{/*		}}*/}
-						{/*		min={0}*/}
-						{/*		max={(paddingUnit === 'em' || paddingUnit === 'rem' ? 24 : 200)}*/}
-						{/*		step={(paddingUnit === 'em' || paddingUnit === 'rem' ? 0.1 : 1)}*/}
-						{/*		unit={paddingUnit}*/}
-						{/*		units={['px', 'em', 'rem', '%']}*/}
-						{/*		onUnit={(value) => setMetaAttribute( value, 'paddingUnit' )}*/}
-						{/*		onMouseOver={paddingMouseOver.onMouseOver}*/}
-						{/*		onMouseOut={paddingMouseOver.onMouseOut}*/}
-						{/*	/>*/}
-						{/*	<ResponsiveMeasureRangeControl*/}
-						{/*		label={__('Margin', 'kadence-blocks')}*/}
-						{/*		value={ arrayStringToInt( margin ) }*/}
-						{/*		tabletValue={ arrayStringToInt( tabletMargin ) }*/}
-						{/*		mobileValue={ arrayStringToInt( mobileMargin ) }*/}
-						{/*		onChange={(value) => {*/}
-						{/*			setMetaAttribute( value.map(String), 'margin' );*/}
-						{/*		}}*/}
-						{/*		onChangeTablet={(value) => {*/}
-						{/*			setMetaAttribute( value.map(String), 'tabletMargin' );*/}
-						{/*		}}*/}
-						{/*		onChangeMobile={(value) => {*/}
-						{/*			setMetaAttribute( value.map(String), 'mobileMargin' );*/}
-						{/*		}}*/}
-						{/*		min={(marginUnit === 'em' || marginUnit === 'rem' ? -12 : -200)}*/}
-						{/*		max={(marginUnit === 'em' || marginUnit === 'rem' ? 24 : 200)}*/}
-						{/*		step={(marginUnit === 'em' || marginUnit === 'rem' ? 0.1 : 1)}*/}
-						{/*		unit={marginUnit}*/}
-						{/*		units={['px', 'em', 'rem', '%', 'vh']}*/}
-						{/*		onUnit={(value) => setMetaAttribute( value, 'marginUnit' )}*/}
-						{/*		onMouseOver={marginMouseOver.onMouseOver}*/}
-						{/*		onMouseOut={marginMouseOver.onMouseOut}*/}
-						{/*		allowAuto={ true}*/}
-						{/*	/>*/}
-						{/*</KadencePanelBody>*/}
+						<KadencePanelBody panelName={'kb-row-padding'}>
+							<ResponsiveMeasureRangeControl
+								label={__('Padding', 'kadence-blocks')}
+								value={padding}
+								onChange={(value) => {
+									setMetaAttribute(value.map(String), 'padding');
+								}}
+								onChangeTablet={(value) => {
+									setMetaAttribute(value.map(String), 'tabletPadding');
+								}}
+								onChangeMobile={(value) => {
+									setMetaAttribute(value.map(String), 'mobilePadding');
+								}}
+								min={0}
+								max={paddingUnit === 'em' || paddingUnit === 'rem' ? 24 : 200}
+								step={paddingUnit === 'em' || paddingUnit === 'rem' ? 0.1 : 1}
+								unit={paddingUnit}
+								units={['px', 'em', 'rem', '%']}
+								onUnit={(value) => setMetaAttribute(value, 'paddingUnit')}
+								onMouseOver={paddingMouseOver.onMouseOver}
+								onMouseOut={paddingMouseOver.onMouseOut}
+							/>
+							<ResponsiveMeasureRangeControl
+								label={__('Margin', 'kadence-blocks')}
+								value={margin}
+								onChange={(value) => {
+									setMetaAttribute(value.map(String), 'margin');
+								}}
+								onChangeTablet={(value) => {
+									setMetaAttribute(value.map(String), 'tabletMargin');
+								}}
+								onChangeMobile={(value) => {
+									setMetaAttribute(value.map(String), 'mobileMargin');
+								}}
+								min={0}
+								max={marginUnit === 'em' || marginUnit === 'rem' ? 24 : 200}
+								step={paddingUnit === 'em' || marginUnit === 'rem' ? 0.1 : 1}
+								unit={paddingUnit}
+								units={['px', 'em', 'rem', '%']}
+								onUnit={(value) => setMetaAttribute(value, 'marginUnit')}
+								onMouseOver={marginMouseOver.onMouseOver}
+								onMouseOut={marginMouseOver.onMouseOut}
+							/>
+						</KadencePanelBody>
 					</>
 				)}
 			</InspectorControls>