Skip to content

Commit 09d2505

Browse files
kaeizenkaeizen
committed
fix style guide block styles
- accordion - icon list, icon list item - countdown
1 parent e18b083 commit 09d2505

File tree

4 files changed

+114
-50
lines changed

4 files changed

+114
-50
lines changed

‎src/components/style-guide/editor.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,20 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
334334
.stk-block-notification h3 {
335335
color: var(--stk-container-color) !important;
336336
}
337+
338+
.stk-block-accordion {
339+
min-height: unset;
340+
max-height: fit-content;
341+
pointer-events: none;
342+
343+
.stk-block {
344+
min-height: unset;
345+
}
346+
}
347+
}
348+
349+
:where(.ugb-style-guide__elements .stk-block-table-of-contents ul) {
350+
list-style-type: initial;
337351
}
338352

339353
.ugb-style-guide__elements__buttons .stk-button {

‎src/components/style-guide/utils.js‎

Lines changed: 97 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,36 +20,6 @@ import {
2020
getBlockVariations,
2121
} from '@wordpress/blocks'
2222

23-
/* eslint-disable jsx-a11y/anchor-is-valid */
24-
export const DefaultButton = ( {
25-
text, dataDevice = 'desktop', style = '',
26-
} ) => {
27-
return <>
28-
<div className="wp-block-stackable-button stk-block-button stk-block stk-5609083" data-block-id="5609083">
29-
{ style && <style> { style } </style> }
30-
<a className="stk-link stk-button stk--hover-effect-darken" href="" onClick={ e => e.preventDefault() }>
31-
<span className="stk-button__inner-text ugb-style-guide__typography-preview" data-device={ dataDevice }>{ text }</span>
32-
</a>
33-
</div>
34-
</>
35-
}
36-
37-
export const DefaultOutlineButton = ( {
38-
text, dataDevice = 'desktop', style = '',
39-
} ) => {
40-
return <>
41-
42-
<div className="wp-block-stackable-button stk-block-button is-style-ghost stk-block stk-3f9ae3c" data-block-id="3f9ae3c">
43-
<style>{ '.stk-3f9ae3c .stk-button{background:transparent !important;}.stk-3f9ae3c .stk-button:hover:after{background:transparent !important;opacity:1 !important;}:where(.stk-hover-parent:hover, .stk-hover-parent.stk--is-hovered) .stk-3f9ae3c .stk-button:after{background:transparent !important;opacity:1 !important;}.stk-3f9ae3c .stk-button:before{border-style:solid !important;}' }</style>
44-
{ style && <style> { style } </style> }
45-
<a className="stk-link stk-button stk--hover-effect-darken" href="" onClick={ e => e.preventDefault() }>
46-
<span className="stk-button__inner-text ugb-style-guide__typography-preview" data-device={ dataDevice }>{ text }</span>
47-
</a>
48-
</div>
49-
50-
</>
51-
}
52-
5323
export const DUMMY_COLOR_SCHEMES = [
5424
{
5525
name: 'Base Color Scheme',
@@ -87,6 +57,23 @@ export const DUMMY_COLOR_SCHEMES = [
8757

8858
const SERIALIZE_CALLBACKS = {
8959
'stackable/tabs': serialized => serialized.replace( '"stk-block-tabs__tab"', '"stk-block-tabs__tab stk-block-tabs__tab--active"' ),
60+
'stackable/countdown': serialized => serialized.replace(
61+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-day"></div>',
62+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-day">10</div>'
63+
).replace(
64+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-hour"></div>',
65+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-hour">12</div>'
66+
).replace(
67+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-minute"></div>',
68+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-minute">30</div>'
69+
).replace(
70+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-second"></div>',
71+
'<div class="stk-block-countdown__digit stk-block-countdown__digit-second">45</div>',
72+
),
73+
'stackable/icon-list': ( serialized, attributes ) => serialized.replace(
74+
/#stk-icon-list__icon-svg-def-[^"]*/g,
75+
`#stk-icon-list__icon-svg-def-${ attributes.uniqueId }`
76+
),
9077
}
9178

9279
const ADDITIONAL_ATTRIBUTES = {
@@ -99,6 +86,49 @@ const ADDITIONAL_ATTRIBUTES = {
9986
'stackable/number-box': { text: __( '1', i18n ) },
10087
}
10188

89+
const INNER_BLOCK_CALLBACKS = {
90+
'stackable/team-member': innerBlocks => {
91+
innerBlocks[ 0 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
92+
93+
return innerBlocks
94+
},
95+
'stackable/testimonial': innerBlocks => {
96+
innerBlocks[ 1 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
97+
98+
return innerBlocks
99+
},
100+
}
101+
102+
/* eslint-disable jsx-a11y/anchor-is-valid */
103+
export const DefaultButton = ( {
104+
text, dataDevice = 'desktop', style = '',
105+
} ) => {
106+
return <>
107+
<div className="wp-block-stackable-button stk-block-button stk-block stk-5609083" data-block-id="5609083">
108+
{ style && <style> { style } </style> }
109+
<a className="stk-link stk-button stk--hover-effect-darken" href="" onClick={ e => e.preventDefault() }>
110+
<span className="stk-button__inner-text ugb-style-guide__typography-preview" data-device={ dataDevice }>{ text }</span>
111+
</a>
112+
</div>
113+
</>
114+
}
115+
116+
export const DefaultOutlineButton = ( {
117+
text, dataDevice = 'desktop', style = '',
118+
} ) => {
119+
return <>
120+
121+
<div className="wp-block-stackable-button stk-block-button is-style-ghost stk-block stk-3f9ae3c" data-block-id="3f9ae3c">
122+
<style>{ '.stk-3f9ae3c .stk-button{background:transparent !important;}.stk-3f9ae3c .stk-button:hover:after{background:transparent !important;opacity:1 !important;}:where(.stk-hover-parent:hover, .stk-hover-parent.stk--is-hovered) .stk-3f9ae3c .stk-button:after{background:transparent !important;opacity:1 !important;}.stk-3f9ae3c .stk-button:before{border-style:solid !important;}' }</style>
123+
{ style && <style> { style } </style> }
124+
<a className="stk-link stk-button stk--hover-effect-darken" href="" onClick={ e => e.preventDefault() }>
125+
<span className="stk-button__inner-text ugb-style-guide__typography-preview" data-device={ dataDevice }>{ text }</span>
126+
</a>
127+
</div>
128+
129+
</>
130+
}
131+
102132
const getGeneratedCss = ( blocks, generateForInnerBlocks = false ) => {
103133
return blocks.map( block => {
104134
if ( ! block.attributes.uniqueId ) {
@@ -129,14 +159,15 @@ const getGeneratedCss = ( blocks, generateForInnerBlocks = false ) => {
129159
} )
130160
}
131161

132-
export const RenderBlock = props => {
162+
const getSerializedBlock = props => {
133163
const {
134-
blockName, attributes, innerBlocks, name = __( 'Default', i18n ),
164+
blockName: _blockName, attributes, innerBlocks,
135165
} = props
136166

137-
const block = createBlock( blockName, attributes, innerBlocks )
138-
const newBlock = getGeneratedCss( [ block ] )
167+
let blockName = _blockName
139168

169+
let block = createBlock( blockName, attributes, innerBlocks )
170+
let newBlock = getGeneratedCss( [ block ] )
140171
let serialized = serialize( newBlock )
141172

142173
if ( blockName === 'stackable/timeline' ) {
@@ -146,27 +177,45 @@ export const RenderBlock = props => {
146177
serialized += '\n' + serialize( duplicateBlock )
147178
}
148179

180+
if ( blockName === 'stackable/accordion' ) {
181+
const _block = createBlock( blockName, attributes, innerBlocks )
182+
_block.attributes.startOpen = true
183+
_block.attributes.blockMargin = {
184+
top: 24, bottom: 0, left: 0, right: 0,
185+
}
186+
const duplicateBlock = getGeneratedCss( [ _block ] )
187+
serialized += '\n' + serialize( duplicateBlock )
188+
}
189+
190+
if ( blockName === 'stackable/icon-list-item' ) {
191+
block = createBlock( 'stackable/icon-list', {}, [ block ] )
192+
newBlock = getGeneratedCss( [ block ] )
193+
serialized = serialize( newBlock )
194+
blockName = 'stackable/icon-list'
195+
}
196+
197+
return {
198+
serialized, blockName, attributes: block.attributes,
199+
}
200+
}
201+
202+
export const RenderBlock = props => {
203+
const {
204+
name = __( 'Default', i18n ), ...propsToPass
205+
} = props
206+
207+
const {
208+
serialized, blockName, attributes,
209+
} = getSerializedBlock( propsToPass )
210+
149211
return (
150212
<RawHTML>
151-
{ cleanSerializedBlock( serialized, SERIALIZE_CALLBACKS[ blockName ] ) }
213+
{ cleanSerializedBlock( serialized, SERIALIZE_CALLBACKS[ blockName ], attributes ) }
152214
{ `<p>${ name }</p>` }
153215
</RawHTML>
154216
)
155217
}
156218

157-
const INNER_BLOCK_CALLBACKS = {
158-
'stackable/team-member': innerBlocks => {
159-
innerBlocks[ 0 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
160-
161-
return innerBlocks
162-
},
163-
'stackable/testimonial': innerBlocks => {
164-
innerBlocks[ 1 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
165-
166-
return innerBlocks
167-
},
168-
}
169-
170219
export const getPlaceholders = blockName => {
171220
let innerBlocks = []
172221
let attributes = {}

‎src/util/block-styles.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { select } from '@wordpress/data'
44

55
const BLOCK_STYLES_FILTER = {
66
'stackable/column': [ 'columnWidth', 'columnAdjacentCount' ],
7+
'stackable/icon-list-item': [ 'parentUniqueId' ],
78
}
89

910
export const getBlockStyleAttributesFilter = ( blockName, additionalFilters = [] ) => {

‎src/util/blocks.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -610,11 +610,11 @@ export const getFilteredAttributes = ( attributes, filter ) => {
610610
}
611611

612612
// removes comment from serialized block string
613-
export const cleanSerializedBlock = ( serialized, cb ) => {
613+
export const cleanSerializedBlock = ( serialized, cb, attributes = {} ) => {
614614
let cleanSerialized = serialized.replace( /<!--[\s\S]*?-->/g, '' )
615615

616616
if ( cb ) {
617-
cleanSerialized = cb( cleanSerialized )
617+
cleanSerialized = cb( cleanSerialized, attributes )
618618
}
619619

620620
return cleanSerialized

0 commit comments

Comments
 (0)