Skip to content

Commit

Permalink
Start styling options for advanced navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
Lalo Sanchez committed Feb 28, 2024
1 parent 80b67ff commit 80e0133
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 63 deletions.
70 changes: 70 additions & 0 deletions includes/navigation/class-kadence-navigation-cpt.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 ) {
Expand Down
156 changes: 93 additions & 63 deletions src/blocks/navigation/edit-inner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 80e0133

Please sign in to comment.