Skip to content

Commit

Permalink
dropdown width, padding, and margin controls
Browse files Browse the repository at this point in the history
  • Loading branch information
mark-c-woodard committed Jul 3, 2024
1 parent f7736ab commit c8768dc
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,8 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
'mobile_key' => 'dropdownBorderRadiusMobile',
) );
$css->render_border_styles( $nav_link_attributes, 'dropdownBorder' );
$css->render_measure_output( $nav_link_attributes, 'marginDropdown', 'margin', ['unit_key' => 'marginDropdownUnit']);
$css->render_measure_output( $nav_link_attributes, 'paddingDropdown', 'padding', ['unit_key' => 'paddingDropdownUnit']);

if ( $nav_link_attributes['dropdownShadow'] && isset( $nav_link_attributes['dropdownShadow'][0] ) && $nav_link_attributes['dropdownShadow'][0]['enable'] ) {
$css->add_property( 'box-shadow', $css->render_shadow( $nav_link_attributes['dropdownShadow'][0] ) );
Expand Down Expand Up @@ -359,6 +361,7 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );

$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .wp-block-kadence-navigation-link' . $unique_id . ' ul li.menu-item > .link-drop-wrap > a' );
$css->add_property( 'width', $css->render_size( $sized_attributes['dropdownWidth'], $sized_attributes['dropdownWidthUnit'] ) );
$css->add_property( 'padding-top', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );
$css->add_property( 'padding-bottom', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );
$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .wp-block-kadence-navigation-link' . $unique_id . ' ul li.menu-item > .link-drop-wrap > a, .wp-block-kadence-navigation .navigation .menu-container ul .wp-block-kadence-navigation-link' . $unique_id . ' ul.sub-menu ' );
Expand Down
33 changes: 32 additions & 1 deletion src/blocks/navigation-link/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,38 @@
"type": "string",
"default": "px"
},
"paddingDropdown": {
"type": "array",
"default": ["", "", "", ""]
},
"tabletPaddingDropdown": {
"type": "array",
"default": ["", "", "", ""]
},
"mobilePaddingDropdown": {
"type": "array",
"default": ["", "", "", ""]
},
"paddingDropdownUnit": {
"type": "string",
"default": "px"
},
"marginDropdown": {
"type": "array",
"default": ["", "", "", ""]
},
"tabletMarginDropdown": {
"type": "array",
"default": ["", "", "", ""]
},
"mobileMarginDropdown": {
"type": "array",
"default": ["", "", "", ""]
},
"marginDropdownUnit": {
"type": "string",
"default": "px"
},
"linkColorDropdown": {
"type": "string",
"default": ""
Expand Down Expand Up @@ -1431,7 +1463,6 @@
"reusable": false,
"anchor": true,
"kbMetadata": true,
"ktdynamic": true,
"kbContentLabel": "label",
"renaming": false,
"ktdynamic": true,
Expand Down
27 changes: 27 additions & 0 deletions src/blocks/navigation-link/components/backend-styles/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@ export default function BackendStyles(props) {
tabletMargin,
mobileMargin,
marginUnit,
paddingDropdown,
tabletPaddingDropdown,
mobilePaddingDropdown,
paddingDropdownUnit,
marginDropdown,
tabletMarginDropdown,
mobileMarginDropdown,
marginDropdownUnit,
linkColor,
linkColorHover,
linkColorActive,
Expand Down Expand Up @@ -415,6 +423,8 @@ export default function BackendStyles(props) {
dropdownVerticalSpacingTablet,
dropdownVerticalSpacingMobile
);
const previewDropdownWidth = getPreviewSize(previewDevice, dropdownWidth, dropdownWidthTablet, dropdownWidthMobile);

const previewMediaStyleMargin = getPreviewSize(
previewDevice,
mediaStyle[0].margin,
Expand Down Expand Up @@ -695,6 +705,23 @@ export default function BackendStyles(props) {
css.set_selector(
`.wp-block-kadence-navigation .navigation .menu-container ul .wp-block-kadence-navigation-link${uniqueID} ul.sub-menu, .wp-block-kadence-navigation .navigation .menu-container ul .wp-block-kadence-navigation-link${uniqueID} ul.submenu`
);
css.add_property('width', previewDropdownWidth + dropdownWidthUnit);
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(
Expand Down
20 changes: 0 additions & 20 deletions src/blocks/navigation-link/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -285,19 +285,6 @@ export default function Edit(props) {
megaMenuCustomWidthUnit,
typography,
highlightTypography,
dropdownTypography,
dropdownDivider,
dropdownDividerTablet,
dropdownDividerMobile,
dropdownWidth,
dropdownWidthTablet,
dropdownWidthMobile,
dropdownWidthUnit,
dropdownVerticalSpacing,
dropdownVerticalSpacingTablet,
dropdownVerticalSpacingMobile,
dropdownVerticalSpacingUnit,
dropdownShadow,
mediaType,
mediaAlign,
mediaImage,
Expand All @@ -308,13 +295,6 @@ export default function Edit(props) {
iconSide,
iconSideTablet,
iconSideMobile,
dropdownBorder,
dropdownBorderTablet,
dropdownBorderMobile,
dropdownBorderRadius,
dropdownBorderRadiusTablet,
dropdownBorderRadiusMobile,
dropdownBorderRadiusUnit,
align,
kadenceDynamic,
} = attributes;
Expand Down
4 changes: 2 additions & 2 deletions src/blocks/navigation/edit-inner.js
Original file line number Diff line number Diff line change
Expand Up @@ -1299,8 +1299,8 @@ export function EditInner(props) {
? 200
: 100
}
step={paddingUnit === 'em' || marginDropdownUnit === 'rem' ? 0.1 : 1}
unit={paddingUnit}
step={marginDropdownUnit === 'em' || marginDropdownUnit === 'rem' ? 0.1 : 1}
unit={marginDropdownUnit}
units={['px', 'em', 'rem', '%']}
onUnit={(value) => setMetaAttribute(value, 'marginDropdownUnit')}
/>
Expand Down

0 comments on commit c8768dc

Please sign in to comment.