Skip to content
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

Feat: responsive alignment toolbar, inner block orientation #3380

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Feat: responsive alignment toolbar, inner block orientation #3380

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
c45e191
responsive alignment toolbar, inner block orientation
mxkae Dec 17, 2024
a7e0370
minimize block styles, fix onchange
mxkae Dec 19, 2024
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
3 changes: 2 additions & 1 deletion src/block-components/alignment/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,9 @@ export const addAttributes = attrObject => {
default: '',
},
innerBlockOrientation: {
stkResponsive: true,
type: 'string',
default: '',
default: 'vertical',
},
// Flex.
innerBlockJustify: {
Expand Down
78 changes: 64 additions & 14 deletions src/block-components/alignment/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,12 @@ const ALIGN_OPTIONS_NO_JUSTIFY = ALIGN_OPTIONS.filter( option => option.align !=
export const Edit = memo( props => {
const {
contentAlign,
contentAlignTablet,
contentAlignMobile,
columnJustify,
innerBlockOrientation,
innerBlockOrientationTablet,
innerBlockOrientationMobile,
innerBlockWrap,
containerWidth,
containerWidthTablet,
Expand All @@ -67,8 +71,12 @@ export const Edit = memo( props => {
} = useBlockAttributesContext( attributes => {
return {
contentAlign: attributes.contentAlign,
contentAlignTablet: attributes.contentAlignTablet,
contentAlignMobile: attributes.contentAlignMobile,
columnJustify: attributes.columnJustify,
innerBlockOrientation: attributes.innerBlockOrientation,
innerBlockOrientationTablet: attributes.innerBlockOrientationTablet,
innerBlockOrientationMobile: attributes.innerBlockOrientationMobile,
innerBlockWrap: attributes.innerBlockWrap,
containerWidth: attributes.containerWidth,
containerWidthTablet: attributes.containerWidthTablet,
Expand All @@ -81,6 +89,14 @@ export const Edit = memo( props => {
const setAttributes = useBlockSetAttributesContext()
const deviceType = useDeviceType()

const _contentAlignTablet = contentAlignTablet || contentAlign
const _contentAlignMobile = contentAlignMobile || _contentAlignTablet

const _innerBlockOrientationTablet = innerBlockOrientationTablet || innerBlockOrientation
const _innerBlockOrientationMobile = innerBlockOrientationMobile || _innerBlockOrientationTablet

const _innerBlockOrientation = deviceType === 'Desktop' ? innerBlockOrientation : ( deviceType === 'Tablet' ? _innerBlockOrientationTablet : _innerBlockOrientationMobile )

const {
labelContentAlign = sprintf( __( '%s Alignment', i18n ), __( 'Content', i18n ) ),
enableContentAlign = true,
Expand Down Expand Up @@ -140,8 +156,16 @@ export const Edit = memo( props => {
<>
<BlockControls>
<AlignmentToolbar
value={ contentAlign }
onChange={ contentAlign => setAttributes( { contentAlign } ) }
value={ deviceType === 'Desktop' ? contentAlign : ( deviceType === 'Tablet' ? _contentAlignTablet : _contentAlignMobile ) }
onChange={ contentAlign => {
if ( deviceType === 'Desktop' ) {
setAttributes( { contentAlign } )
} else if ( deviceType === 'Tablet' ) {
setAttributes( { contentAlignTablet: contentAlign } )
} else {
setAttributes( { contentAlignMobile: contentAlign } )
}
} }
alignmentControls={ props.hasContentJustify ? ALIGN_OPTIONS : ALIGN_OPTIONS_NO_JUSTIFY }
/>

Expand Down Expand Up @@ -220,20 +244,46 @@ export const Edit = memo( props => {
title: __( 'Horizontal', i18n ),
},
{
value: '',
value: 'vertical',
title: __( 'Vertical', i18n ),
},
] }
attribute="innerBlockOrientation"
responsive="all"
value={ _innerBlockOrientation }
default="vertical"
onChange={ value => {
const newAttributes = {
innerBlockOrientation: value,
}
if ( value === '' ) { // Vertical.
const newAttributes = {}

if ( deviceType === 'Desktop' ) {
// If the new desktop value is the same as the tablet value, set the tablet value to ''
// since tablet value will just inherit the desktop value
// otherwise, set the tablet value to the old desktop value because tablet was inheriting the old value
if ( innerBlockOrientationTablet === value ) {
newAttributes.innerBlockOrientationTablet = ''
} else {
newAttributes.innerBlockOrientationTablet = innerBlockOrientation
}
newAttributes.innerBlockOrientation = value
newAttributes.innerBlockJustify = ''
} else { // Horizontal
newAttributes.innerBlockAlign = ''
} else if ( deviceType === 'Tablet' ) {
if ( innerBlockOrientationMobile === value ) {
newAttributes.innerBlockOrientationMobile = ''
} else {
newAttributes.innerBlockOrientationMobile = _innerBlockOrientationTablet
}

// if the new tablet value is the same as the desktop value, set the tablet value to ''
newAttributes.innerBlockOrientationTablet = innerBlockOrientation === value ? '' : value
newAttributes.innerBlockJustifyTablet = ''
newAttributes.innerBlockAlignTablet = ''
} else {
newAttributes.innerBlockOrientationMobile = _innerBlockOrientationTablet === value ? '' : value
newAttributes.innerBlockJustifyMobile = ''
newAttributes.innerBlockAlignMobile = ''
}

setAttributes( newAttributes )
} }
/>
Expand All @@ -243,7 +293,7 @@ export const Edit = memo( props => {
label={ sprintf( __( '%s Justify', i18n ), __( 'Inner Block', i18n ) ) }
attribute="innerBlockJustify"
responsive="all"
controls={ innerBlockOrientation ? 'flex-horizontal' : 'horizontal' }
controls={ _innerBlockOrientation === 'horizontal' ? 'flex-horizontal' : 'horizontal' }
visualGuide={ {
selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
highlight: 'outline-first-offset',
Expand All @@ -259,7 +309,7 @@ export const Edit = memo( props => {
label={ sprintf( __( '%s Alignment', i18n ), __( 'Inner Block', i18n ) ) }
attribute="innerBlockAlign"
responsive="all"
controls={ innerBlockOrientation ? 'vertical' : 'flex-justify-vertical' }
controls={ _innerBlockOrientation === 'horizontal' ? 'vertical' : 'flex-justify-vertical' }
disabled={ alignLastBlockToBottom ? 'all' : undefined }
visualGuide={ {
selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
Expand All @@ -272,7 +322,7 @@ export const Edit = memo( props => {
help={ __( 'Set Content Min. Height for alignment to display properly', i18n ) }
/>
}
{ innerBlockOrientation &&
{ _innerBlockOrientation &&
<AdvancedToolbarControl
label={ __( 'Inner Block Wrapping', i18n ) }
controls={ [
Expand All @@ -288,7 +338,7 @@ export const Edit = memo( props => {
attribute="innerBlockWrap"
/>
}
{ innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
{ _innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
<AdvancedRangeControl
label={ innerBlockWrap === 'wrap'
? sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Column Gap', i18n ) )
Expand All @@ -314,7 +364,7 @@ export const Edit = memo( props => {
}
/>
}
{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && ! innerBlockOrientation && // This is "row gap" when the blocks are vertical.
{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && _innerBlockOrientation !== 'horizontal' && // This is "row gap" when the blocks are vertical.
<AdvancedRangeControl
label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Gap', i18n ) ) }
responsive="all"
Expand All @@ -333,7 +383,7 @@ export const Edit = memo( props => {
} }
/>
}
{ ( innerBlockOrientation && innerBlockWrap === 'wrap' ) &&
{ ( _innerBlockOrientation === 'horizontal' && innerBlockWrap === 'wrap' ) &&
<AdvancedRangeControl
label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Row Gap', i18n ) ) }
responsive="all"
Expand Down
113 changes: 95 additions & 18 deletions src/block-components/alignment/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "common";

.stk--column-flex,
// If an direct inner block has a top/bottom margin-auto, then we need to set
// the height to full (similar to .stk--column-flex) so the margin auto would
Expand All @@ -6,38 +8,113 @@
.stk--align-last-block-to-bottom {
height: auto; // Reverse the 100% height from style.scss
&:not(.stk--block-horizontal-flex) {
> .block-editor-inner-blocks {
flex: 1 1 100%;
display: flex;
flex-direction: column;
> .block-editor-block-list__layout {
@include desktop {
> .block-editor-inner-blocks {
flex: 1 1 100%;
display: flex !important;
display: flex;
flex-direction: column;
> * {
width: auto;
margin-inline: 0;
> .block-editor-block-list__layout {
flex: 1 1 100%;
display: flex !important;
flex-direction: column;
> * {
width: auto;
margin-inline: 0;

// Placeholder images will collapse.
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
min-width: min(30%, 200px);
// Placeholder images will collapse.
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
min-width: min(30%, 200px);
}
}
}
}
}
}
&.stk--block-horizontal-flex {
> .block-editor-inner-blocks {
> .block-editor-block-list__layout {
height: 100%;
> * {
margin-inline: 0;
@include desktop {
> .block-editor-inner-blocks {
> .block-editor-block-list__layout {
height: 100%;
> * {
margin-inline: 0;
}
}
}
}
}
}

&:not(.stk--block-horizontal-flex-tablet) {
@include tablet {
> .block-editor-inner-blocks {
flex: 1 1 100%;
display: flex;
flex-direction: column;
> .block-editor-block-list__layout {
flex: 1 1 100%;
display: flex !important;
flex-direction: column;
> * {
width: auto;
margin-inline: 0;

// Placeholder images will collapse.
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
min-width: min(30%, 200px);
}
}
}
}
}
}
&.stk--block-horizontal-flex-tablet {
@include tablet {
> .block-editor-inner-blocks {
> .block-editor-block-list__layout {
height: 100%;
> * {
margin-inline: 0;
}
}
}
}
}

&:not(.stk--block-horizontal-flex-mobile) {
@include mobile {
> .block-editor-inner-blocks {
flex: 1 1 100%;
display: flex;
flex-direction: column;
> .block-editor-block-list__layout {
flex: 1 1 100%;
display: flex !important;
flex-direction: column;
> * {
width: auto;
margin-inline: 0;

// Placeholder images will collapse.
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
min-width: min(30%, 200px);
}
}
}
}
}
}
&.stk--block-horizontal-flex-mobile {
@include mobile {
> .block-editor-inner-blocks {
> .block-editor-block-list__layout {
height: 100%;
> * {
margin-inline: 0;
}
}
}
}
}
}

// for firefox :has polyfill
// this needs to be on a separate css ruleset because firefox ignores any CSS ruleset that includes the :has selector
Expand Down
Loading
Loading