Skip to content

Commit 89c040d

Browse files
GambitGambit
Gambit
authored and
Gambit
committed
apply other block layouts
1 parent b059e99 commit 89c040d

File tree

18 files changed

+628
-237
lines changed

18 files changed

+628
-237
lines changed

‎src/block/columns/editor.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828

2929
.stk-block-columns > .stk-block-content > .block-editor-inner-blocks > .block-editor-block-list__layout {
3030
column-gap: var(--stk-column-gap, 0px);
31+
row-gap: var(--stk-column-row-gap, 0px);
3132
}
3233

3334
// For Firefox polyfill

‎src/block/columns/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010

1111
.stk-block-columns > .stk-block-content {
12-
--stk-column-gap: 0px; // For nested columns, this takes precedence.
12+
// --stk-column-gap: 0px; // For nested columns, this takes precedence.
1313
column-gap: var(--stk-column-gap, 0px);
1414
margin-left: auto;
1515
margin-right: auto;

‎src/block/icon-list-item/style.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626

2727
.stk-block-icon-list-item__content {
28-
gap: 8px;
28+
gap: var(--stk-icon-list-icon-gap, 8px);
2929
}
3030

3131
.stk-block-icon-list .stk-block-icon-list__ul .stk-block-icon-list-item {
@@ -42,8 +42,8 @@
4242
position: relative;
4343
.stk--svg-wrapper {
4444
.stk--inner-svg svg {
45-
height: var(--stk-icon-height, 16px);
46-
width: var(--stk-icon-height, 16px);
45+
height: var(--stk-icon-list-size, 16px);
46+
width: var(--stk-icon-list-size, 16px);
4747
transform: rotate(var(--stk-icon-list-icon-rotation, 0deg));
4848
opacity: var(--stk-icon-list-icon-opacity, 1);
4949
fill: var(--stk-icon-list-marker-color);
@@ -82,7 +82,7 @@
8282
.stk-block-icon-list-item__marker::before {
8383
content: counter(stk-icon-list-counter, var(--stk-list-style-type, decimal)) ". ";
8484
display: block;
85-
font-size: var(--stk-icon-height, 16px);
85+
font-size: var(--stk-icon-list-size, 16px);
8686
color: var(--stk-icon-list-marker-color);
8787
transform: rotate(var(--stk-icon-list-icon-rotation, 0deg));
8888
opacity: var(--stk-icon-list-icon-opacity, 1);

‎src/block/icon-list/editor.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
top: 0;
1717
left: 0;
1818
height: 1em;
19-
width: var(--stk-icon-height, 1em);
19+
width: var(--stk-icon-list-size, 1em);
2020
cursor: copy;
21-
margin-left: calc(var(--stk-icon-height, 1em) * -1);
21+
margin-left: calc(var(--stk-icon-list-size, 1em) * -1);
2222
}
2323
}
2424

‎src/block/icon-list/style.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ blockStyles.addBlockStyles( 'iconRotation', [ {
9797

9898
blockStyles.addBlockStyles( 'iconSize', [ {
9999
selector: '',
100-
styleRule: '--stk-icon-height',
100+
styleRule: '--stk-icon-list-size',
101101
attrName: 'iconSize',
102102
key: 'iconSize',
103103
responsive: 'all',

‎src/block/icon-list/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
}
4040
ul.stk-block-icon-list__ul,
4141
ol.stk-block-icon-list__ol {
42-
padding-inline-start: 0;
42+
padding-inline-start: var(--stk-icon-list-indentation, 0);
4343
}
4444

4545
.stk-block-icon-list__ol {

‎src/components/resizable-bottom-margin/index.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { range } from 'lodash'
2020
import {
2121
useState, useEffect, useRef,
2222
} from '@wordpress/element'
23+
import { useSelect } from '@wordpress/data'
2324
import { useBlockEditContext } from '@wordpress/block-editor'
2425
import { applyFilters } from '@wordpress/hooks'
2526
import { ResizableBox } from '@wordpress/components'
@@ -163,25 +164,31 @@ const ResizableBottomMargin = props => {
163164
const deviceType = useDeviceType()
164165
const attrName = getAttributeName( props.attribute, deviceType )
165166
const unitAttrName = getAttributeName( `${ props.attribute }Unit`, deviceType )
167+
const { globalBlockMarginBottom } = useSelect( select => {
168+
const _blockLayouts = select( 'stackable/global-block-layouts' ).getBlockLayouts()
169+
return {
170+
globalBlockMarginBottom: _blockLayouts[ '--stk-block-margin-bottom' ],
171+
}
172+
}, [] )
166173

167-
let value = props[ attrName ]?.bottom
168-
let unit = props[ unitAttrName ]
174+
let value = props[ attrName ]?.bottom || globalBlockMarginBottom?.[ deviceType.toLowerCase() ]
175+
let unit = props[ attrName ]?.bottom ? props[ unitAttrName ] : ( globalBlockMarginBottom?.[ `${ deviceType.toLowerCase() }Unit` ] || 'px' )
169176

170177
if ( deviceType === 'Mobile' ) {
171178
if ( typeof value === 'undefined' || value === '' ) {
172179
const attrNameTablet = getAttributeName( props.attribute, 'Tablet' )
173180
const unitAttrNameTablet = getAttributeName( `${ props.attribute }Unit`, 'Tablet' )
174-
value = props[ attrNameTablet ]?.bottom
175-
unit = props[ unitAttrNameTablet ]
181+
value = props[ attrNameTablet ]?.bottom || globalBlockMarginBottom?.tablet
182+
unit = props[ attrNameTablet ]?.bottom ? props[ unitAttrNameTablet ] : globalBlockMarginBottom?.tabletUnit
176183
}
177184
}
178185

179186
if ( deviceType === 'Tablet' || deviceType === 'Mobile' ) {
180187
if ( typeof value === 'undefined' || value === '' ) {
181188
const attrNameDesktop = getAttributeName( props.attribute, 'Desktop' )
182189
const unitAttrNameDesktop = getAttributeName( `${ props.attribute }Unit`, 'Desktop' )
183-
value = props[ attrNameDesktop ]?.bottom
184-
unit = props[ unitAttrNameDesktop ]
190+
value = props[ attrNameDesktop ]?.bottom || globalBlockMarginBottom?.desktop
191+
unit = props[ attrNameDesktop ]?.bottom ? props[ unitAttrNameDesktop ] : ( globalBlockMarginBottom?.desktopUnit || 'px' )
185192
}
186193
}
187194

‎src/plugins/global-settings/block-layouts/editor-loader.js‎

Lines changed: 23 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,19 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import { getDefault } from './utils'
5+
16
/**
27
* WordPress dependencies
38
*/
49
import { useSelect } from '@wordpress/data'
510
import { useEffect, useState } from '@wordpress/element'
6-
import { useBlockEditContext } from '@wordpress/block-editor'
711

812
/**
913
* External dependencies
1014
*/
1115
import { compact } from 'lodash'
1216
import { useBlockHoverState } from '~stackable/hooks'
13-
/*
14-
:root { --stk-container-border-radius: 10px 10px 10px 10px; :where(.stk--is-hovered, .stk-block:hover) {--stk-container-border-radius: 50px 50px 50px 50px;}}
15-
*/
16-
17-
const transformToNested = ( _blockLayouts ) => {
18-
const devices = [ "desktop", "tablet", "mobile" ]
19-
20-
const blockLayouts = {}
21-
22-
for ( const property in _blockLayouts ) {
23-
blockLayouts[ property ] = {}
24-
25-
devices.forEach( device => {
26-
blockLayouts[ property ][ device ] = {}
27-
28-
if ( typeof blockLayouts[ property ][ `${ device }` ] !== undefined ) {
29-
blockLayouts[ property ][ device ][ 'normal' ] = blockLayouts[ property ][ `${ device }` ]
30-
}
31-
32-
if ( typeof blockLayouts[ property ][ `${ device }Hover` ] !== undefined ) {
33-
blockLayouts[ property ][ device ][ 'hover' ] = blockLayouts[ property ][ `${ device }Hover` ]
34-
}
35-
36-
if ( typeof blockLayouts[ property ][ `${ device }ParentHover` ] !== undefined ) {
37-
blockLayouts[ property ][ device ][ 'parent-hover' ] = blockLayouts[ property ][ `${ device }ParentHover` ]
38-
}
39-
} )
40-
}
41-
42-
return blockLayouts
43-
}
4417

4518
const renderGlobalStyles = ( blockLayouts, setStyles, currentHoverState, blockUniqueId, parentHoverBlock, breakDesktop = 1024, breakTablet = 768 ) => {
4619
if ( Object.keys( blockLayouts ).length === 0 ) {
@@ -50,9 +23,9 @@ const renderGlobalStyles = ( blockLayouts, setStyles, currentHoverState, blockUn
5023
let css = ''
5124

5225
const deviceCss = {
53-
'desktop': [],
54-
'tablet': [],
55-
'mobile': []
26+
desktop: [],
27+
tablet: [],
28+
mobile: [],
5629
}
5730

5831
const getUnit = ( property, state ) => {
@@ -69,10 +42,16 @@ const renderGlobalStyles = ( blockLayouts, setStyles, currentHoverState, blockUn
6942
}
7043

7144
let style = ''
72-
if ( property.includes( 'shadow' ) ) {
45+
if ( typeof value === 'string' ) {
7346
style = `${ property }: ${ value };`
7447
} else if ( typeof value === 'object' ) {
75-
style = `${ property }: ${ value.top }${ unit } ${ value.right }${ unit } ${ value.left }${ unit } ${ value.bottom }${ unit };`
48+
const defaultValue = getDefault( _property, device )
49+
const top = value.top !== undefined ? value.top : defaultValue.top
50+
const right = value.right !== undefined ? value.right : defaultValue.right
51+
const bottom = value.bottom !== undefined ? value.bottom : defaultValue.bottom
52+
const left = value.left !== undefined ? value.left : defaultValue.left
53+
54+
style = `${ property }: ${ top }${ unit } ${ right }${ unit } ${ bottom }${ unit } ${ left }${ unit };`
7655
} else {
7756
style = `${ property }: ${ value }${ unit };`
7857
}
@@ -109,7 +88,7 @@ const renderGlobalStyles = ( blockLayouts, setStyles, currentHoverState, blockUn
10988
}
11089

11190
if ( deviceCss.tablet.length > 0 ) {
112-
css += `@media screen and (max-width: ${ breakDesktop - 1 }px){ :root { ${ compact( deviceCss.tablet ).join( '' ) }} }`
91+
css += `@media screen and (max-width: ${ breakDesktop - 1 }px){ :root { ${ compact( deviceCss.tablet ).join( '' ) }}}`
11392
}
11493

11594
if ( deviceCss.mobile.length > 0 ) {
@@ -120,12 +99,14 @@ const renderGlobalStyles = ( blockLayouts, setStyles, currentHoverState, blockUn
12099
}
121100

122101
export const GlobalBlockLayoutStyles = () => {
123-
const { blockLayouts, selectedBlockUniqueId, SelectedParentHoverBlock,SelectedParentHoverBlockChildren, SelectedHoverChildren } = useSelect( select => ( {
102+
const {
103+
blockLayouts, selectedBlockUniqueId, SelectedParentHoverBlock,
104+
} = useSelect( select => ( {
124105
blockLayouts: select( 'stackable/global-block-layouts' ).getBlockLayouts() || [],
125106
selectedBlockUniqueId: select( 'core/block-editor' ).getSelectedBlock()?.attributes?.uniqueId,
126-
SelectedParentHoverBlock: select( 'stackable/hover-state').getSelectedParentHoverBlock(),
127-
SelectedParentHoverBlockChildren: select( 'stackable/hover-state').getSelectedParentHoverBlockChildren(),
128-
SelectedHoverChildren: select( 'stackable/hover-state').getSelectedHoverChildren()
107+
SelectedParentHoverBlock: select( 'stackable/hover-state' ).getSelectedParentHoverBlock(),
108+
SelectedParentHoverBlockChildren: select( 'stackable/hover-state' ).getSelectedParentHoverBlockChildren(),
109+
SelectedHoverChildren: select( 'stackable/hover-state' ).getSelectedHoverChildren(),
129110
} ), [] )
130111

131112
const [ currentHoverState ] = useBlockHoverState( { globalControl: true } )

‎src/plugins/global-settings/block-layouts/generate-style-rules.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)