margin and padding controls for dropdowns

stellarwp · Jul 3, 2024 · f7736ab · f7736ab
1 parent 0e37b30
commit f7736ab
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 6 deletions.
diff --git a/includes/blocks/class-kadence-blocks-navigation-block.php b/includes/blocks/class-kadence-blocks-navigation-block.php
@@ -81,16 +81,23 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 			$this->sized_dynamic_styles( $css, $nav_attributes, $unique_id, $size );
 		}
 		$css->set_media_state( 'desktop' );
-
+		//main continer
+		$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' > .navigation > .menu-container > .menu' );
+		$css->render_measure_output( $nav_attributes, 'margin', 'margin', ['unit_key' => 'marginUnit']);
+		$css->render_measure_output( $nav_attributes, 'padding', 'padding', ['unit_key' => 'paddingUnit']);
+
 		$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container > ul li.menu-item > .link-drop-wrap > a' );
 		$css->render_typography( $nav_attributes );
 
+		// Dropdown.
 		$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container ul ul li.menu-item > .link-drop-wrap > a' );
 		$css->render_typography( $nav_attributes, 'dropdownTypography' );
 
-		$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' > .navigation > .menu-container > .menu' );
-		$css->render_measure_output( $nav_attributes, 'margin', 'margin', ['unit_key' => 'marginUnit']);
-		$css->render_measure_output( $nav_attributes, 'padding', 'padding', ['unit_key' => 'paddingUnit']);
+		$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container ul ul.sub-menu, .wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container ul ul.submenu' );
+		$css->render_measure_output( $nav_attributes, 'marginDropdown', 'margin', ['unit_key' => 'marginDropdownUnit']);
+		$css->render_measure_output( $nav_attributes, 'paddingDropdown', 'padding', ['unit_key' => 'paddingDropdownUnit']);
+
+
 
 		return $css->css_output();
 	}

diff --git a/includes/navigation/class-kadence-navigation-cpt.php b/includes/navigation/class-kadence-navigation-cpt.php
@@ -202,6 +202,52 @@ public function register_meta() {
 				'default' => 'px',
 				'type'    => 'string',
 			),
+			array(
+				'key'           => '_kad_navigation_paddingDropdown',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string',
+			),
+			array(
+				'key'           => '_kad_navigation_tabletPaddingDropdown',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string',
+			),
+			array(
+				'key'           => '_kad_navigation_mobilePaddingDropdown',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string',
+			),
+			array(
+				'key'     => '_kad_navigation_paddingDropdownUnit',
+				'default' => 'px',
+				'type'    => 'string',
+			),
+			array(
+				'key'           => '_kad_navigation_marginDropdown',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string',
+			),
+			array(
+				'key'           => '_kad_navigation_tabletMarginDropdown',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string',
+			),
+			array(
+				'key'           => '_kad_navigation_mobileMarginDropdown',
+				'default'       => array( '', '', '', '' ),
+				'type'          => 'array',
+				'children_type' => 'string',
+			),
+			array(
+				'key'     => '_kad_navigation_marginDropdownUnit',
+				'default' => 'px',
+				'type'    => 'string',
+			),
 			array(
 				'key'           => '_kad_navigation_border',
 				'default'       => array( '', '', '', '' ),

diff --git a/src/blocks/navigation/components/backend-styles/index.js b/src/blocks/navigation/components/backend-styles/index.js
@@ -14,6 +14,14 @@ export default function BackendStyles(props) {
 		tabletMargin,
 		mobileMargin,
 		marginUnit,
+		paddingDropdown,
+		tabletPaddingDropdown,
+		mobilePaddingDropdown,
+		paddingDropdownUnit,
+		marginDropdown,
+		tabletMarginDropdown,
+		mobileMarginDropdown,
+		marginDropdownUnit,
 		orientation,
 		orientationTablet,
 		orientationMobile,
@@ -463,6 +471,22 @@ export default function BackendStyles(props) {
 	css.set_selector(
 		`.wp-block-kadence-navigation${uniqueID} .navigation .menu-container ul ul.sub-menu, .wp-block-kadence-navigation${uniqueID} .navigation .menu-container ul ul.submenu`
 	);
+	css.render_measure_output(
+		paddingDropdown,
+		tabletPaddingDropdown,
+		mobilePaddingDropdown,
+		previewDevice,
+		'padding',
+		paddingDropdownUnit
+	);
+	css.render_measure_output(
+		marginDropdown,
+		tabletMarginDropdown,
+		mobileMarginDropdown,
+		previewDevice,
+		'margin',
+		marginDropdownUnit
+	);
 	css.add_property('background', css.render_color(previewBackgroundDropdown));
 	css.add_property(
 		'border-top',

diff --git a/src/blocks/navigation/edit-inner.js b/src/blocks/navigation/edit-inner.js
@@ -110,6 +110,14 @@ export function EditInner(props) {
 		tabletMargin: meta?._kad_navigation_tabletMargin,
 		mobileMargin: meta?._kad_navigation_mobileMargin,
 		marginUnit: meta?._kad_navigation_marginUnit,
+		paddingDropdown: meta?._kad_navigation_paddingDropdown,
+		tabletPaddingDropdown: meta?._kad_navigation_tabletPaddingDropdown,
+		mobilePaddingDropdown: meta?._kad_navigation_mobilePaddingDropdown,
+		paddingDropdownUnit: meta?._kad_navigation_paddingDropdownUnit,
+		marginDropdown: meta?._kad_navigation_marginDropdown,
+		tabletMarginDropdown: meta?._kad_navigation_tabletMarginDropdown,
+		mobileMarginDropdown: meta?._kad_navigation_mobileMarginDropdown,
+		marginDropdownUnit: meta?._kad_navigation_marginDropdownUnit,
 		border: meta?._kad_navigation_border,
 		borderRadius: meta?._kad_navigation_borderRadius,
 		borderColor: meta?._kad_navigation_borderColor,
@@ -264,6 +272,14 @@ export function EditInner(props) {
 		tabletMargin,
 		mobileMargin,
 		marginUnit,
+		paddingDropdown,
+		tabletPaddingDropdown,
+		mobilePaddingDropdown,
+		paddingDropdownUnit,
+		marginDropdown,
+		tabletMarginDropdown,
+		mobileMarginDropdown,
+		marginDropdownUnit,
 		border,
 		borderRadius,
 		borderColor,
@@ -1220,7 +1236,6 @@ export function EditInner(props) {
 								onUnit={(value) => setMetaAttribute(value, 'dropdownVerticalSpacingUnit')}
 								showUnit={true}
 							/>
-
 							<ResponsiveSelectControl
 								label={__('Dropdown Horizontal Alignment', 'kadence-blocks')}
 								value={dropdownHorizontalAlignment}
@@ -1235,6 +1250,60 @@ export function EditInner(props) {
 								onChangeTablet={(value) => setMetaAttribute(value, 'dropdownHorizontalAlignmentTablet')}
 								onChangeMobile={(value) => setMetaAttribute(value, 'dropdownHorizontalAlignmentMobile')}
 							/>
+							<ResponsiveMeasureRangeControl
+								label={__('Padding', 'kadence-blocks')}
+								value={paddingDropdown}
+								tabletValue={tabletPaddingDropdown}
+								mobileValue={mobilePaddingDropdown}
+								onChange={(value) => {
+									setMetaAttribute(value.map(String), 'paddingDropdown');
+								}}
+								onChangeTablet={(value) => {
+									setMetaAttribute(value.map(String), 'tabletPaddingDropdown');
+								}}
+								onChangeMobile={(value) => {
+									setMetaAttribute(value.map(String), 'mobilePaddingDropdown');
+								}}
+								min={0}
+								max={
+									paddingDropdownUnit === 'em' || paddingDropdownUnit === 'rem'
+										? 24
+										: paddingDropdownUnit === 'px'
+										? 200
+										: 100
+								}
+								step={paddingDropdownUnit === 'em' || paddingDropdownUnit === 'rem' ? 0.1 : 1}
+								unit={paddingDropdownUnit}
+								units={['px', 'em', 'rem', '%']}
+								onUnit={(value) => setMetaAttribute(value, 'paddingDropdownUnit')}
+							/>
+							<ResponsiveMeasureRangeControl
+								label={__('Margin', 'kadence-blocks')}
+								value={marginDropdown}
+								tabletValue={tabletMarginDropdown}
+								mobileValue={mobileMarginDropdown}
+								onChange={(value) => {
+									setMetaAttribute(value.map(String), 'marginDropdown');
+								}}
+								onChangeTablet={(value) => {
+									setMetaAttribute(value.map(String), 'tabletMarginDropdown');
+								}}
+								onChangeMobile={(value) => {
+									setMetaAttribute(value.map(String), 'mobileMarginDropdown');
+								}}
+								min={0}
+								max={
+									marginDropdownUnit === 'em' || marginDropdownUnit === 'rem'
+										? 24
+										: marginDropdownUnit === 'px'
+										? 200
+										: 100
+								}
+								step={paddingUnit === 'em' || marginDropdownUnit === 'rem' ? 0.1 : 1}
+								unit={paddingUnit}
+								units={['px', 'em', 'rem', '%']}
+								onUnit={(value) => setMetaAttribute(value, 'marginDropdownUnit')}
+							/>
 							<ResponsiveBorderControl
 								label={__('Dropdown Border', 'kadence-blocks')}
 								value={dropdownBorder}
@@ -1244,7 +1313,6 @@ export function EditInner(props) {
 								onChangeTablet={(value) => setMetaAttribute(value, 'dropdownBorderTablet')}
 								onChangeMobile={(value) => setMetaAttribute(value, 'dropdownBorderMobile')}
 							/>
-
 							<ResponsiveMeasurementControls
 								label={__('Dropdown Border Radius', 'kadence-blocks')}
 								value={dropdownBorderRadius}
@@ -1422,6 +1490,8 @@ export function EditInner(props) {
 							<ResponsiveMeasureRangeControl
 								label={__('Padding', 'kadence-blocks')}
 								value={padding}
+								tabletValue={tabletPadding}
+								mobileValue={mobilePadding}
 								onChange={(value) => {
 									setMetaAttribute(value.map(String), 'padding');
 								}}
@@ -1449,6 +1519,8 @@ export function EditInner(props) {
 							<ResponsiveMeasureRangeControl
 								label={__('Margin', 'kadence-blocks')}
 								value={margin}
+								tabletValue={tabletMargin}
+								mobileValue={mobileMargin}
 								onChange={(value) => {
 									setMetaAttribute(value.map(String), 'margin');
 								}}