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>