Tweak: Button icon constrols #27296
Tweak: Button icon constrols #27296
Conversation
…hub/elementor into christian/button-styling # Conflicts: # modules/apps/admin-apps-page.php
…hub/elementor into christian/button-styling
…hub/elementor into christian/button-styling
| svg { | ||
| width: 1em; | ||
| height: auto; | ||
| // Display: flex; // This seems to be causing Backwards Compatibility issues. |
There was a problem hiding this comment.
The existing tests break when this styling is used.
I have updated this.
| @@ -83,6 +93,21 @@ | |||
|
|
|||
| span { | |||
| text-decoration: inherit; //fix for conflict with text-decoration & inline-block | |||
| // Align-self: center; // This might be causing a Backwards Compatibility issue. | |||
There was a problem hiding this comment.
The existing tests break when this styling is used.
I have updated this.
| 'selectors_dictionary' => [ | ||
| 'left' => is_rtl() ? 'row-reverse' : 'row', | ||
| 'right' => is_rtl() ? 'row' : 'row-reverse', | ||
| 'above' => is_rtl() ? 'column-reverse' : 'column', |
There was a problem hiding this comment.
The vertical direction doesn't change on an rtl screen.
And I have added the flex/align-self styling to the new control options only, to ensure that the existing styling doesn't change:
| 'above' => is_rtl() ? 'column-reverse' : 'column', | |
| 'above' => '--button-flex-direction: column; --button-icon-display: flex; --button-align-self: center;', |
| 'left' => is_rtl() ? 'row-reverse' : 'row', | ||
| 'right' => is_rtl() ? 'row' : 'row-reverse', | ||
| 'above' => is_rtl() ? 'column-reverse' : 'column', | ||
| 'below' => is_rtl() ? 'column' : 'column-reverse', |
There was a problem hiding this comment.
| 'below' => is_rtl() ? 'column' : 'column-reverse', | |
| 'below' => '--button-flex-direction: column-reverse; --button-icon-display: flex; --button-align-self: center;', |
| ], | ||
| ], | ||
| 'selectors_dictionary' => [ | ||
| 'left' => is_rtl() ? 'row-reverse' : 'row', |
There was a problem hiding this comment.
| 'left' => is_rtl() ? 'row-reverse' : 'row', | |
| 'left' => is_rtl() ? '--button-flex-direction: row-reverse' : '--button-flex-direction: row', |
| ], | ||
| 'selectors_dictionary' => [ | ||
| 'left' => is_rtl() ? 'row-reverse' : 'row', | ||
| 'right' => is_rtl() ? 'row' : 'row-reverse', |
There was a problem hiding this comment.
| 'right' => is_rtl() ? 'row' : 'row-reverse', | |
| 'right' => is_rtl() ? '--button-flex-direction: row' : '--button-flex-direction: row-reverse', |
| 'below' => is_rtl() ? 'column' : 'column-reverse', | ||
| ], | ||
| 'selectors' => [ | ||
| '{{WRAPPER}} .elementor-button-content-wrapper' => 'flex-direction: {{VALUE}};', |
There was a problem hiding this comment.
This styling can be updated inside SCSS:
| '{{WRAPPER}} .elementor-button-content-wrapper' => 'flex-direction: {{VALUE}};', | |
| '{{WRAPPER}}' => '{{VALUE}};', |
| 'selectors_dictionary' => [ | ||
| 'row' => is_rtl() ? '--button-flex-direction: row-reverse' : '--button-flex-direction: row', | ||
| 'row-reverse' => is_rtl() ? '--button-flex-direction: row' : '--button-flex-direction: row-reverse', | ||
| 'column' => '--button-flex-direction: column; --button-align-self: center; --button-icon-display: flex;', |
There was a problem hiding this comment.
I have updated this.
- RTL means 'from right to left'. That doesn't have an impact on the vertical styling (Above / Below)
- You use the 'above' and 'below' values inside the dictionary, while you added 'column' and 'column-reverse' inside the control.
- I have updated the
align-selfanddisplaystyling, for when users use the new control values. The old control values will stay as it was.
| [ | ||
| 'label' => esc_html__( 'Size', 'elementor' ), | ||
| 'type' => Controls_Manager::SLIDER, | ||
| 'range' => [ |
There was a problem hiding this comment.
This range values can be deleted, because these are the default values.
| ], | ||
| 'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ], | ||
| 'selectors' => [ | ||
| '{{WRAPPER}}' => '--button-icon-size: {{SIZE}}{{UNIT}}; --button-icon-display: flex; --button-align-self: center;', |
There was a problem hiding this comment.
I have added the new display and align self styling here.
If the user leaves the icon size control empty, then we will keep the original styling.
| ], | ||
| ], | ||
| 'selectors_dictionary' => [ | ||
| 'left' => is_rtl() ? 'row-reverse' : 'row', |
There was a problem hiding this comment.
These dictionary values where used because the old controls where updated. We can't remove them. I believe that you triggered had changed them to 'row' and 'row-reverse', but we need to keep the original once as well.
And there is no need for an rtl conversion inside the row/row-reverse settings.
…hub/elementor into christian/button-styling
| ] | ||
| ), | ||
| ] | ||
| ); | ||
|
|
There was a problem hiding this comment.
There are two empty lines here.
| 'selectors' => [ | ||
| '{{WRAPPER}}' => '--button-icon-size: {{SIZE}}{{UNIT}}; --button-icon-display: flex; --button-align-self: center;', | ||
| ], | ||
| ]); |
There was a problem hiding this comment.
Tabs must be used to indent lines; spaces are not
| | allowed
| $this->start_controls_tab( | ||
| 'icon_button_normal', | ||
| [ | ||
| 'label' => esc_html__( 'Normal', 'elementor' ), |
There was a problem hiding this comment.
Remove spaces and replace with tabs.
| 'icon_button_normal', | ||
| [ | ||
| 'label' => esc_html__( 'Normal', 'elementor' ), | ||
| 'condition' => $args['section_condition'], |
There was a problem hiding this comment.
Tabs instead of spaces.
| [ | ||
| 'label' => esc_html__( 'Normal', 'elementor' ), | ||
| 'condition' => $args['section_condition'], | ||
| ]); |
There was a problem hiding this comment.
Tabs instead of spaces.
| 'selectors' => [ | ||
| '{{WRAPPER}}' => '--button-icon-color: {{VALUE}};', | ||
| ], | ||
| ]); |
| [ | ||
| 'label' => esc_html__( 'Hover', 'elementor' ), | ||
| 'condition' => $args['section_condition'], | ||
| ] |
| 'label' => esc_html__( 'Hover', 'elementor' ), | ||
| 'condition' => $args['section_condition'], | ||
| ] | ||
| ); |
| 'selectors' => [ | ||
| '{{WRAPPER}}' => '--button-icon-color-hover: {{VALUE}};', | ||
| ], | ||
| ]); |
hein-obox
force-pushed
the
christian/button-styling
branch
2 times, most recently
from
459a21d
to
e2a2ac4
Compare
PR Checklist
PR Type
What kind of change does this PR introduce?
Summary
This PR can be summarized in the following changelog entry:
Description
An explanation of what is done in this PR
Test instructions
This PR can be tested by following these steps:
Quality assurance
Fixes #