Skip to content

Commit 2db13d3

Browse files
kaeizenkaeizen
committed
fix remaining issues
1 parent 8d8414b commit 2db13d3

File tree

6 files changed

+350
-180
lines changed

6 files changed

+350
-180
lines changed

‎src/block/design-library/edit.js‎

Lines changed: 117 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
} from '~stackable/components'
1515
import { SVGStackableIcon } from '~stackable/icons'
1616
import { substituteCoreIfDisabled, BLOCK_STATE } from '~stackable/util'
17+
import { usePresetControls } from '~stackable/hooks'
1718
import { substitutionRules } from '../../blocks'
1819

1920
/**
@@ -74,129 +75,144 @@ const checkIfImageUrl = async value => {
7475
return value
7576
}
7677

77-
// Replaces the current block with a block made out of attributes.
78-
const createBlockWithAttributes = async ( blockName, attributes, innerBlocks, substituteBlocks, parentClientId ) => {
79-
const disabledBlocks = settings.stackable_block_states || {} // eslint-disable-line camelcase
80-
81-
// Recursively substitute core blocks to disabled Stackable blocks
82-
const traverseBlocksAndSubstitute = blocks => {
83-
return blocks.map( block => {
84-
let isDisabled = true
85-
// Maximum attempt to error if no substitution rule for the block
86-
let attempts = 10
87-
88-
// Check if the new substituted block is still disabled
89-
while ( isDisabled && attempts > 0 ) {
90-
const _blockName = block[ 1 ].originalName || block[ 0 ]
91-
block = substituteCoreIfDisabled( _blockName, block[ 1 ], block[ 2 ], substitutionRules )
92-
isDisabled = block[ 0 ] in disabledBlocks && disabledBlocks[ block[ 0 ] ] === BLOCK_STATE.DISABLED
93-
attempts--
94-
}
78+
const Edit = props => {
79+
const {
80+
clientId,
81+
attributes,
82+
} = props
9583

96-
// Do a preorder traversal by subsituting first before traversing
97-
if ( block[ 2 ] && block[ 2 ].length > 0 ) {
98-
block[ 2 ] = traverseBlocksAndSubstitute( block[ 2 ] )
99-
}
84+
const [ isLibraryOpen, setIsLibraryOpen ] = useState( false )
85+
const [ isDialogOpen, setIsDialogOpen ] = useState( false )
10086

101-
if ( ! Array.isArray( block[ 2 ] ) ) {
102-
block[ 2 ] = []
103-
}
87+
const designsRef = useRef( [] )
88+
const disabledBlocksRef = useRef( [] )
89+
const callbackRef = useRef( null )
10490

105-
const _block = {
106-
name: block[ 0 ],
107-
attributes: block[ 1 ],
108-
innerBlocks: block[ 2 ],
109-
isValid: true,
110-
}
111-
return _block
112-
} )
113-
}
91+
const blockProps = useBlockProps( {
92+
className: 'ugb-design-library-block',
93+
} )
11494

115-
if ( ! Array.isArray( disabledBlocks ) && substituteBlocks ) {
116-
let block = convertBlocksToArray( {
117-
name: blockName, attributes, innerBlocks,
118-
} )
95+
const presetMarks = usePresetControls( 'spacingSizes' )
96+
?.getPresetMarks() || null
11997

120-
block = traverseBlocksAndSubstitute( [ block ] )[ 0 ]
121-
blockName = block.name
122-
attributes = block.attributes
123-
innerBlocks = block.innerBlocks
124-
}
98+
const spacingSize = ! presetMarks || ! Array.isArray( presetMarks ) ? 120 : presetMarks[ presetMarks.length - 2 ].value
12599

126-
const cleanBlockAttributes = async blocks => {
127-
for ( const block of blocks ) {
128-
const blockName = block.name
100+
// Replaces the current block with a block made out of attributes.
101+
const createBlockWithAttributes = async ( blockName, attributes, innerBlocks, substituteBlocks, parentClientId ) => {
102+
const disabledBlocks = settings.stackable_block_states || {} // eslint-disable-line camelcase
129103

130-
// For blocks with variations, do not remove the uniqueId
131-
// since that will prompt the layout picker to show.
132-
const hasVariations = !! getBlockType( blockName ) && getBlockVariations( blockName ).length > 0
133-
if ( ! hasVariations && block.attributes.uniqueId ) {
134-
delete block.attributes.uniqueId
135-
}
104+
// Recursively substitute core blocks to disabled Stackable blocks
105+
const traverseBlocksAndSubstitute = blocks => {
106+
return blocks.map( block => {
107+
let isDisabled = true
108+
// Maximum attempt to error if no substitution rule for the block
109+
let attempts = 10
136110

137-
const customAttributes = block.attributes.customAttributes
111+
// Check if the new substituted block is still disabled
112+
while ( isDisabled && attempts > 0 ) {
113+
const _blockName = block[ 1 ].originalName || block[ 0 ]
114+
block = substituteCoreIfDisabled( _blockName, block[ 1 ], block[ 2 ], substitutionRules )
115+
isDisabled = block[ 0 ] in disabledBlocks && disabledBlocks[ block[ 0 ] ] === BLOCK_STATE.DISABLED
116+
attempts--
117+
}
138118

139-
const indexToDelete = customAttributes?.findIndex( attribute => attribute[ 0 ] === 'stk-design-library__bg-target' )
140-
if ( customAttributes && indexToDelete !== -1 ) {
141-
block.attributes.customAttributes.splice( indexToDelete, 1 )
142-
}
119+
// Do a preorder traversal by subsituting first before traversing
120+
if ( block[ 2 ] && block[ 2 ].length > 0 ) {
121+
block[ 2 ] = traverseBlocksAndSubstitute( block[ 2 ] )
122+
}
143123

144-
for ( const attributeName in block.attributes ) {
145-
if ( typeof block.attributes[ attributeName ] === 'string' ) {
146-
const value = String( block.attributes[ attributeName ] )
147-
block.attributes[ attributeName ] = await checkIfImageUrl( value )
124+
if ( ! Array.isArray( block[ 2 ] ) ) {
125+
block[ 2 ] = []
148126
}
149-
}
150127

151-
block.innerBlocks = await cleanBlockAttributes( block.innerBlocks )
128+
const _block = {
129+
name: block[ 0 ],
130+
attributes: block[ 1 ],
131+
innerBlocks: block[ 2 ],
132+
isValid: true,
133+
}
134+
return _block
135+
} )
152136
}
153137

154-
return blocks
155-
}
138+
if ( ! Array.isArray( disabledBlocks ) && substituteBlocks ) {
139+
let block = convertBlocksToArray( {
140+
name: blockName, attributes, innerBlocks,
141+
} )
156142

157-
const block = await cleanBlockAttributes( [ {
158-
name: blockName, attributes, innerBlocks,
159-
} ] )
143+
block = traverseBlocksAndSubstitute( [ block ] )[ 0 ]
144+
blockName = block.name
145+
attributes = block.attributes
146+
innerBlocks = block.innerBlocks
147+
}
160148

161-
blockName = block[ 0 ].name
162-
attributes = block[ 0 ].attributes
163-
innerBlocks = block[ 0 ].innerBlocks
149+
const cleanBlockAttributes = async blocks => {
150+
for ( const block of blocks ) {
151+
const blockName = block.name
164152

165-
if ( ! parentClientId && attributes.hasBackground ) {
166-
attributes.blockMargin = {
167-
top: '',
168-
right: '',
169-
bottom: '0',
170-
left: '',
171-
}
172-
} else if ( ! parentClientId ) {
173-
attributes.blockMargin = {
174-
top: '120',
175-
right: '',
176-
bottom: '120',
177-
left: '',
178-
}
179-
}
153+
// For blocks with variations, do not remove the uniqueId
154+
// since that will prompt the layout picker to show.
155+
const hasVariations = !! getBlockType( blockName ) && getBlockVariations( blockName ).length > 0
156+
if ( ! hasVariations && block.attributes.uniqueId ) {
157+
delete block.attributes.uniqueId
158+
}
180159

181-
return createBlock( blockName, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
182-
}
160+
const customAttributes = block.attributes.customAttributes
183161

184-
const Edit = props => {
185-
const {
186-
clientId,
187-
attributes,
188-
} = props
162+
const indexToDelete = customAttributes?.findIndex( attribute => attribute[ 0 ] === 'stk-design-library__bg-target' )
163+
if ( customAttributes && indexToDelete !== -1 ) {
164+
block.attributes.customAttributes.splice( indexToDelete, 1 )
165+
}
189166

190-
const [ isLibraryOpen, setIsLibraryOpen ] = useState( false )
191-
const [ isDialogOpen, setIsDialogOpen ] = useState( false )
167+
for ( const attributeName in block.attributes ) {
168+
if ( typeof block.attributes[ attributeName ] === 'string' ) {
169+
const value = String( block.attributes[ attributeName ] )
170+
block.attributes[ attributeName ] = await checkIfImageUrl( value )
171+
}
172+
}
192173

193-
const designsRef = useRef( [] )
194-
const disabledBlocksRef = useRef( [] )
195-
const callbackRef = useRef( null )
174+
block.innerBlocks = await cleanBlockAttributes( block.innerBlocks )
175+
}
196176

197-
const blockProps = useBlockProps( {
198-
className: 'ugb-design-library-block',
199-
} )
177+
return blocks
178+
}
179+
180+
const block = await cleanBlockAttributes( [ {
181+
name: blockName, attributes, innerBlocks,
182+
} ] )
183+
184+
blockName = block[ 0 ].name
185+
attributes = block[ 0 ].attributes
186+
innerBlocks = block[ 0 ].innerBlocks
187+
188+
if ( ! parentClientId && attributes.hasBackground ) {
189+
attributes.blockMargin = {
190+
top: '',
191+
right: '',
192+
bottom: '0',
193+
left: '',
194+
}
195+
} else if ( ! parentClientId ) {
196+
attributes.blockMargin = {
197+
top: spacingSize,
198+
right: '',
199+
bottom: spacingSize,
200+
left: '',
201+
}
202+
}
203+
204+
const blockLayouts = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
205+
if ( attributes.hasBackground && typeof blockLayouts === 'object' && ! blockLayouts[ 'block-background-padding' ] ) {
206+
attributes.blockPadding = {
207+
top: spacingSize,
208+
right: spacingSize,
209+
bottom: spacingSize,
210+
left: spacingSize,
211+
}
212+
}
213+
214+
return createBlock( blockName, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
215+
}
200216

201217
const addDesigns = async substituteBlocks => {
202218
const { getBlockRootClientId } = select( 'core/block-editor' )

0 commit comments

Comments
 (0)