Skip to content

Fixed vertical alignment in flex layouts #335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vytisbulkevicius merged 2 commits into from
Apr 23, 2026
Merged

Fixed vertical alignment in flex layouts #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0de941c
fix: vertical alignment in flex layouts
girishpanchal30 Apr 17, 2026
f80a5e5
fix: improve vertical alignment handling
girishpanchal30 Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions includes/front.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,19 @@ final class Menu_Icons_Front_End {
*/
protected static $hidden_label_class = 'visuallyhidden';

/**
* Align-self map for vertical-align values.
*
* @access private
* @var array
*/
private static $align_self_map = array(
'top' => 'flex-start',
'middle' => 'center',
'bottom' => 'flex-end',
'baseline' => 'baseline',
);


/**
* Add hooks for front-end functionalities
Expand Down Expand Up @@ -339,6 +352,18 @@ public static function get_icon_style( $meta, $keys, $as_attribute = true ) {

$rule = self::$default_style[ $key ];

// Special handling for vertical-align because it affects the layout of flex containers.
if ( 'vertical_align' === $key ) {
if ( ! isset( $meta[ $key ] ) || $meta[ $key ] === $rule['value'] ) {
continue;
}

$stored = $meta[ $key ];
$style_a[ $rule['property'] ] = $stored;
$style_a['align-self'] = isset( self::$align_self_map[ $stored ] ) ? self::$align_self_map[ $stored ] : 'center';
continue;
}

if ( ! isset( $meta[ $key ] ) || $meta[ $key ] === $rule['value'] ) {
continue;
}
Expand All @@ -355,13 +380,13 @@ public static function get_icon_style( $meta, $keys, $as_attribute = true ) {
return $style_s;
}

foreach ( $style_a as $key => $value ) {
$style_s .= "{$key}:{$value};";
foreach ( $style_a as $prop => $value ) {
$style_s .= "{$prop}:{$value};";
}

$style_s = esc_attr( $style_s );

if ( $as_attribute ) {
if ( $as_attribute ) {
$style_s = sprintf( ' style="%s"', $style_s );
}

Expand Down
8 changes: 8 additions & 0 deletions includes/meta.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,14 @@ public static function get( $id, $defaults = array() ) {
$value['position'] = $defaults['position'];
}

// Backward-compatibility: values removed in favour of align-self support.
$supported_vertical_align = array( 'top', 'middle', 'bottom', 'baseline' );
if ( isset( $value['vertical_align'] ) &&
! in_array( $value['vertical_align'], $supported_vertical_align, true )
) {
$value['vertical_align'] = 'middle';
}
Comment on lines +106 to +112
Copy link

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This backward-compatibility block overwrites any previously-saved vertical_align values outside the new supported list (e.g. super, sub, text-top, text-bottom) to middle. Those legacy values are still valid CSS for non-flex layouts, so this migration can cause a visible change for existing sites/themes that are not using flex menus. Consider preserving the legacy vertical_align value for the vertical-align: CSS output, while only mapping/fallbacking align-self to a supported value (or providing a more explicit migration strategy).

Suggested change
// Backward-compatibility: values removed in favour of align-self support.
$supported_vertical_align = array( 'top', 'middle', 'bottom', 'baseline' );
if ( isset( $value['vertical_align'] ) &&
! in_array( $value['vertical_align'], $supported_vertical_align, true )
) {
$value['vertical_align'] = 'middle';
}
// Preserve legacy vertical-align values for backward compatibility.

Copilot uses AI. Check for mistakes.

if ( isset( $value['size'] ) && ! isset( $value['font_size'] ) ) {
$value['font_size'] = $value['size'];
unset( $value['size'] );
Expand Down
16 changes: 0 additions & 16 deletions includes/settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,18 +535,10 @@ public static function get_settings_fields( array $values = array() ) {
'label' => __( 'Vertical Align', 'menu-icons' ),
'default' => 'middle',
'choices' => array(
array(
'value' => 'super',
'label' => __( 'Super', 'menu-icons' ),
),
array(
'value' => 'top',
'label' => __( 'Top', 'menu-icons' ),
),
array(
'value' => 'text-top',
'label' => __( 'Text Top', 'menu-icons' ),
),
array(
'value' => 'middle',
'label' => __( 'Middle', 'menu-icons' ),
Expand All @@ -555,18 +547,10 @@ public static function get_settings_fields( array $values = array() ) {
'value' => 'baseline',
'label' => __( 'Baseline', 'menu-icons' ),
),
array(
'value' => 'text-bottom',
'label' => __( 'Text Bottom', 'menu-icons' ),
),
array(
'value' => 'bottom',
'label' => __( 'Bottom', 'menu-icons' ),
),
array(
'value' => 'sub',
'label' => __( 'Sub', 'menu-icons' ),
),
),
),
'font_size' => array(
Expand Down
Loading