-
Notifications
You must be signed in to change notification settings - Fork 60
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.
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
fix (icon label): change icon gap #3209
Changes from 5 commits
e48c227
b4670b9
3c8b773
ac48019
b286ae5
5f77b68
6b13aef
e6c2154
f35489b
113ac7e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<?php | ||
|
||
// Exit if accessed directly. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we rename this file to deprecated.php or something so we can denote that it's for deprecation purposes? |
||
if ( ! defined( 'ABSPATH' ) ) { | ||
exit; | ||
} | ||
|
||
if ( ! function_exists( 'stackable_render_block_icon_label' ) ) { | ||
/** | ||
* Adds a special class if block uses the old icon gap attribute | ||
*/ | ||
function stackable_render_block_icon_label( $block_content, $block ) { | ||
$attributes = $block[ 'attrs' ]; | ||
|
||
// check if the block uses the old icon gap attribute | ||
$use_old_styles = ( isset( $attributes[ 'iconGap' ] ) || isset( $block[ 'innerBlocks' ][0]['attrs']['iconSize'] ) ) && ! isset( $attributes[ 'iconGap2' ] ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Check first for the presence of the elements in |
||
|
||
if ( $use_old_styles ) { | ||
return preg_replace( '/stk-block-icon-label/i', 'stk-block-icon-label stk-block-icon-label--use-flex-basis', $block_content ); | ||
} | ||
|
||
return $block_content; | ||
} | ||
add_filter( 'render_block_stackable/icon-label', 'stackable_render_block_icon_label', 10, 2 ); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -37,6 +37,11 @@ export const attributes = ( version = VERSION ) => { | |
stkResponsive: true, | ||
default: '', | ||
}, | ||
iconGap2: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add a comment on
bfintal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
type: 'number', | ||
stkResponsive: true, | ||
default: '', | ||
}, | ||
}, | ||
versionAdded: '3.0.0', | ||
versionDeprecated: '', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -26,6 +26,7 @@ const Styles = props => { | |
|
||
return ( | ||
<> | ||
{ /* For the old icon gap */ } | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I believe you should be able to remove the |
||
<BlockCss | ||
{ ...propsToPass } | ||
renderIn="save" | ||
|
@@ -46,6 +47,26 @@ const Styles = props => { | |
format="%spx" | ||
responsive="all" | ||
/> | ||
<BlockCss | ||
{ ...propsToPass } | ||
renderIn="save" | ||
selector=".stk-inner-blocks" | ||
attrName="iconGap2" | ||
key="iconGap-save" | ||
styleRule="gap" | ||
format="%spx" | ||
responsive="all" | ||
/> | ||
<BlockCss | ||
{ ...propsToPass } | ||
renderIn="edit" | ||
selector=".stk-inner-blocks .block-editor-block-list__layout" | ||
attrName="iconGap2" | ||
key="iconGap" | ||
styleRule="gap" | ||
format="%spx" | ||
responsive="all" | ||
/> | ||
</> | ||
) | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,20 @@ | ||
.stk-block-icon-label { | ||
// Default width of the icon width. | ||
.stk-block-icon { | ||
flex: 0 0 64px; | ||
// For old icon gap | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can you move this css to the bottom (isolating it from the rest of the "current" css code) and then label it as "deprecated" |
||
&.stk-block-icon-label--use-flex-basis { | ||
// Default width of the icon width. | ||
.stk-block-icon { | ||
flex: 0 0 64px; | ||
} | ||
.stk-inner-blocks { | ||
gap: 0; | ||
} | ||
} | ||
|
||
// used by iconGap2 | ||
.stk-inner-blocks { | ||
gap: 28px; | ||
} | ||
|
||
// Remove margins and make sure the icon and text are both centered. | ||
:is(.stk-block-icon, .stk-block-heading) { | ||
--stk-block-margin-bottom: 0; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does it work if we remove the flex definition completely since this is for the old
0 0 64px
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it still needs the flex, but i changed it to
flex: 0
instead.