Skip to content

Commit

Permalink
Merge branch 'develop' into fix/3229-wp6.6-synced-patterns
Browse files Browse the repository at this point in the history
  • Loading branch information
@mxkae
mxkae committed Jul 15, 2024
2 parents 351f15a + 8541bb7 commit 6c2746b
Show file tree
Hide file tree
Showing 57 changed files with 3,351 additions and 3,305 deletions.
73 changes: 61 additions & 12 deletions src/block-components/columns/column-settings-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import { __ } from '@wordpress/i18n'
import { Button, Dashicon } from '@wordpress/components'
import { getBlockFromExample } from '@wordpress/blocks'
import { useBlockEditContext } from '@wordpress/block-editor'
import { dispatch, select } from '@wordpress/data'
import {
dispatch, select, useSelect,
} from '@wordpress/data'
import { useLocalStorage } from '~stackable/util'

const PASSTHRU = ( func, numColumns ) => func( numColumns )
Expand All @@ -25,38 +27,73 @@ export const ColumnsControl = props => {
const {
numInnerBlocks, innerBlocks,
} = useBlockContext( rootClientId )
const {
multiClientIds, multiNumInnerBlocks, multiInnerBlocks, hasMultiSelectedBlocks,
} = useSelect( select => {
const multiBlocks = select( 'core/block-editor' ).getMultiSelectedBlocks()
let multiClientIds = []
const multiInnerBlocks = {}
const multiNumInnerBlocks = {}
if ( multiBlocks.length && multiBlocks[ 0 ].name === 'stackable/tabs' ) {
multiBlocks.forEach( block => {
const tabContent = block.innerBlocks[ 0 ].name === 'stackable/tab-content' ? block.innerBlocks[ 0 ] : block.innerBlocks[ 1 ]
multiClientIds.push( tabContent.clientId )
} )
} else {
multiClientIds = multiBlocks.map( block => block.clientId )
}

multiClientIds.forEach( clientId => {
const { numInnerBlocks, innerBlocks } = select( 'stackable/block-context' ).getBlockContext( clientId )
multiInnerBlocks[ clientId ] = innerBlocks
multiNumInnerBlocks[ clientId ] = numInnerBlocks
} )

return {
multiClientIds,
multiNumInnerBlocks,
multiInnerBlocks,
hasMultiSelectedBlocks: multiClientIds.length > 1,
}
} )
const [ isDuplicate, setIsDuplicate ] = useLocalStorage( 'stk__columns_new_duplicate', false )

const setColumns = numColumns => {
const changeColumnsFunc = numColumns => {
const _changeColumnsFunc = ( _clientId, _numColumns, _numInnerBlocks, _innerBlocks, quietUpdate = false ) => {
const { insertBlock, removeBlocks } = dispatch( 'core/block-editor' )

// do nothing if input field is blank
if ( numColumns === '' ) {
if ( _numColumns === '' ) {

// Remove the columns.
} else if ( numColumns < numInnerBlocks ) {
const columnClientIds = innerBlocks.slice( numColumns ).map( ( { clientId } ) => clientId )
} else if ( _numColumns < _numInnerBlocks ) {
const columnClientIds = _innerBlocks.slice( numColumns ).map( ( { clientId } ) => clientId )
if ( quietUpdate ) {
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
}
removeBlocks( columnClientIds, false )

// Add a blank column.
} else if ( numColumns > numInnerBlocks && ! isDuplicate ) {
const numToAdd = numColumns - numInnerBlocks
} else if ( _numColumns > _numInnerBlocks && ! isDuplicate ) {
const numToAdd = _numColumns - _numInnerBlocks

// add more empty columns if necessary
for ( let i = 0; i < numToAdd; i++ ) {
const block = getBlockFromExample( 'stackable/column', {
attributes: { ...newColumnAttributes },
} )
insertBlock( block, numInnerBlocks + i + 1, clientId, false )
if ( quietUpdate ) {
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
}
insertBlock( block, _numInnerBlocks + i + 1, _clientId, false )
}

// Duplicate the last column.
} else if ( numColumns > numInnerBlocks ) {
const numToAdd = numColumns - numInnerBlocks
} else if ( _numColumns > _numInnerBlocks ) {
const numToAdd = _numColumns - _numInnerBlocks

// This is not guaranteed to have the latest attributes and values
const lastColumnBlock = last( innerBlocks )
const lastColumnBlock = last( _innerBlocks )

// Retrieve block details to get the latest attributes and values,
// If there's no block, then use a blank column.
Expand All @@ -66,11 +103,23 @@ export const ColumnsControl = props => {

for ( let i = 0; i < numToAdd; i++ ) {
const block = getBlockFromExample( 'stackable/column', pick( newBlock, [ 'attributes', 'innerBlocks' ] ) )
insertBlock( block, numInnerBlocks + i + 1, clientId, false )
if ( quietUpdate ) {
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
}
insertBlock( block, _numInnerBlocks + i + 1, _clientId, false )
}
}
}

const changeColumnsFunc = numColumns => {
if ( hasMultiSelectedBlocks ) {
multiClientIds.forEach( ( blockClientId, index ) =>
_changeColumnsFunc( blockClientId, numColumns, multiNumInnerBlocks[ blockClientId ], multiInnerBlocks[ blockClientId ], index !== 0 ? true : false ) )
} else if ( ! hasMultiSelectedBlocks ) {
_changeColumnsFunc( clientId, numColumns, numInnerBlocks, innerBlocks, false )
}
}

onChangeCallback( changeColumnsFunc, numColumns )
}

Expand Down
131 changes: 101 additions & 30 deletions src/block-components/columns/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ import { range } from 'lodash'
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n'
import { select, dispatch } from '@wordpress/data'
import {
select, dispatch, useSelect,
} from '@wordpress/data'
import { useBlockEditContext } from '@wordpress/block-editor'
import { useState } from '@wordpress/element'

Expand All @@ -36,14 +38,43 @@ export const Controls = props => {
const deviceType = useDeviceType()
const { clientId } = useBlockEditContext()
const { numInnerBlocks, innerBlocks } = useBlockContext()

const {
multiClientIds, multiInnerBlocks, hasMultiSelectedBlocks,
} = useSelect( select => {
const multiClientIds = select( 'core/block-editor' ).getMultiSelectedBlockClientIds()
const multiInnerBlocks = {}

multiClientIds.forEach( clientId => {
const { innerBlocks } = select( 'stackable/block-context' ).getBlockContext( clientId )
multiInnerBlocks[ clientId ] = innerBlocks
} )

return {
multiClientIds,
multiInnerBlocks,
hasMultiSelectedBlocks: multiClientIds.length > 1,
}
} )
const attributes = useBlockAttributesContext( attributes => {
return {
columnArrangementTablet: attributes.columnArrangementTablet,
columnArrangementMobile: attributes.columnArrangementMobile,
columnWrapDesktop: attributes.columnWrapDesktop,
}
} )
const setAttributes = useBlockSetAttributesContext()
const setMultiBlockAttributes = ( _clientId, attrs ) => {
dispatch( 'core/block-editor' ).updateBlockAttributes( multiClientIds, attrs ) // eslint-disable-line stackable/no-update-block-attributes
}
const setSingleBlockAttributes = useBlockSetAttributesContext()

const setAttributes = attrs => {
if ( multiClientIds.length ) {
multiClientIds.forEach( _clientId => setMultiBlockAttributes( _clientId, attrs ) )
} else {
setSingleBlockAttributes( attrs )
}
}

const columnWidths = []
const columnWidthsTablet = []
Expand All @@ -53,15 +84,20 @@ export const Controls = props => {

innerBlocks.forEach( ( { clientId } ) => {
const attributes = select( 'core/block-editor' ).getBlockAttributes( clientId )
columnWidths.push( attributes.columnWidth )
columnWidthsTablet.push( attributes.columnWidthTablet )
columnWidthsMobile.push( attributes.columnWidthMobile )
if ( attributes ) {
// check if attributes exist because there might be a delay in updating the inner blocks
// e.g. a column block may not exist anymore but the inner blocks may still have its client id
// this fixes the block error when adjusting the number of columns from higher to lower in shared controls
columnWidths.push( attributes.columnWidth )
columnWidthsTablet.push( attributes.columnWidthTablet )
columnWidthsMobile.push( attributes.columnWidthMobile )

if ( attributes.columnWidthTablet ) {
hasTabletColumnWidths = true
}
if ( attributes.columnWidthMobile ) {
hasMobileColumnWidths = true
if ( attributes.columnWidthTablet ) {
hasTabletColumnWidths = true
}
if ( attributes.columnWidthMobile ) {
hasMobileColumnWidths = true
}
}
} )

Expand Down Expand Up @@ -91,13 +127,25 @@ export const Controls = props => {
const attributes = {}
const columnWidthName = getAttributeName( 'columnWidth', deviceType )
const columnAdjacentCount = getAttributeName( 'columnAdjacentCount', deviceType )
innerBlocks.forEach( ( block, i ) => {
clientIds.push( block.clientId )
attributes[ block.clientId ] = {
[ columnWidthName ]: columnWidths[ i ],
[ columnAdjacentCount ]: columnWidths.length,
}
} )
if ( hasMultiSelectedBlocks ) {
Object.values( multiInnerBlocks ).forEach( innerBlocks => {
innerBlocks.forEach( ( block, i ) => {
clientIds.push( block.clientId )
attributes[ block.clientId ] = {
[ columnWidthName ]: columnWidths[ i ],
[ columnAdjacentCount ]: columnWidths.length,
}
} )
} )
} else {
innerBlocks.forEach( ( block, i ) => {
clientIds.push( block.clientId )
attributes[ block.clientId ] = {
[ columnWidthName ]: columnWidths[ i ],
[ columnAdjacentCount ]: columnWidths.length,
}
} )
}
dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, attributes, true ) // eslint-disable-line stackable/no-update-block-attributes
setColumnsUpdate( Math.random() )
} }
Expand All @@ -121,13 +169,25 @@ export const Controls = props => {
const attributes = {}
const columnWidthName = getAttributeName( 'columnWidth', deviceType )
const columnAdjacentCount = getAttributeName( 'columnAdjacentCount', deviceType )
innerBlocks.forEach( ( block, i ) => {
clientIds.push( block.clientId )
attributes[ block.clientId ] = {
[ columnWidthName ]: columnWidths[ i ],
[ columnAdjacentCount ]: columnRows.filter( n => n === columnRows[ i ] ).length,
}
} )
if ( hasMultiSelectedBlocks ) {
Object.values( multiInnerBlocks ).forEach( innerBlocks => {
innerBlocks.forEach( ( block, i ) => {
clientIds.push( block.clientId )
attributes[ block.clientId ] = {
[ columnWidthName ]: columnWidths[ i ],
[ columnAdjacentCount ]: columnRows.filter( n => n === columnRows[ i ] ).length,
}
} )
} )
} else {
innerBlocks.forEach( ( block, i ) => {
clientIds.push( block.clientId )
attributes[ block.clientId ] = {
[ columnWidthName ]: columnWidths[ i ],
[ columnAdjacentCount ]: columnRows.filter( n => n === columnRows[ i ] ).length,
}
} )
}
dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, attributes, true ) // eslint-disable-line stackable/no-update-block-attributes
setColumnsUpdate( Math.random() )
} }
Expand All @@ -143,12 +203,23 @@ export const Controls = props => {
allowReset={ true }
onChange={ ( value, { oldIndex, newIndex } ) => {
if ( deviceType !== 'Tablet' && deviceType !== 'Mobile' ) {
dispatch( 'core/block-editor' ).moveBlockToPosition(
innerBlocks[ oldIndex ].clientId,
clientId,
clientId,
newIndex,
)
if ( hasMultiSelectedBlocks ) {
for ( const multiClientId in multiInnerBlocks ) {
dispatch( 'core/block-editor' ).moveBlockToPosition(
multiInnerBlocks[ multiClientId ][ oldIndex ].clientId,
multiClientId,
multiClientId,
newIndex,
)
}
} else {
dispatch( 'core/block-editor' ).moveBlockToPosition(
innerBlocks[ oldIndex ].clientId,
clientId,
clientId,
newIndex,
)
}
} else {
const attrName = getAttributeName( 'columnArrangement', deviceType )
setAttributes( { [ attrName ]: ( value || [] ).join( ',' ) } )
Expand Down
19 changes: 11 additions & 8 deletions src/block-components/image/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ import {
import {
useBlockAttributesContext,
useBlockSetAttributesContext,
useDeviceType,
} from '~stackable/hooks'
import { getAttributeName } from '~stackable/util'

/**
* WordPress dependencies
Expand Down Expand Up @@ -58,6 +60,8 @@ const Controls = props => {
imageHeightUnit: attributes.imageHeightUnit,
imageWidth: attributes.imageWidth,
imageHeight: attributes.imageHeight,
imageHeightTablet: attributes[ getAttributeName( 'imageHeight', 'tablet' ) ],
imageHeightMobile: attributes[ getAttributeName( 'imageHeight', 'mobile' ) ],
imageHasLightbox: attributes.imageHasLightbox,
imageSize: attributes.imageSize,
imageAlt: attributes.imageAlt,
Expand All @@ -72,6 +76,7 @@ const Controls = props => {
}
} )
const setAttributes = useBlockSetAttributesContext()
const deviceType = useDeviceType()

// Get the image size urls.
const { imageData } = useSelect( select => {
Expand Down Expand Up @@ -173,9 +178,12 @@ const Controls = props => {
// For blocks with fixed width like card block,
// set the height to auto to allow the aspect ratio to take effect.
onChange={ value => {
const values = { imageAspectRatio: value }
if ( value && props.hasHeight && !! attributes.imageHeight ) {
values.imageHeight = ''
const attrImageAspectRatio = getAttributeName( 'imageAspectRatio', deviceType )
const attrImageHeight = getAttributeName( 'imageHeight', deviceType )
const values = { [ attrImageAspectRatio ]: value }

if ( value && props.hasHeight && !! attributes[ attrImageHeight ] ) {
values[ attrImageHeight ] = ''
}
setAttributes( values )
} }
Expand Down Expand Up @@ -218,11 +226,6 @@ const Controls = props => {
title: __( 'Image height', i18n ),
description: __( 'Adjusts the image height', i18n ),
} }
// Set the width to auto if the aspect ratio is set and the width is currently empty
// to allow the aspect ratio to take effect with height changes.
onChange={ value => {
setAttributes( { imageHeight: value } )
} }
/>
}

Expand Down
8 changes: 4 additions & 4 deletions src/block-components/image/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const Styles = props => {
responsive="all"
enabledCallback={ () => enableWidth }
valueCallback={ ( value, getAttribute ) => {
// If there's an aspect ratio and the other dimenion is not given, use auto
// If there's an aspect ratio and the other dimension is not given, use auto
if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageHeight' ) ) {
return 'auto'
}
Expand All @@ -96,7 +96,7 @@ const Styles = props => {
responsive="all"
enabledCallback={ () => enableWidth }
valueCallback={ ( value, getAttribute ) => {
// If there's an aspect ratio and the other dimenion is not given, use auto
// If there's an aspect ratio and the other dimension is not given, use auto
if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageHeight' ) ) {
return 'auto'
}
Expand All @@ -119,7 +119,7 @@ const Styles = props => {
responsive="all"
enabledCallback={ () => enableHeight }
valueCallback={ ( value, getAttribute ) => {
// If there's an aspect ratio and the other dimenion is not given, use auto
// If there's an aspect ratio and the other dimension is not given, use auto
if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageWidth' ) ) {
return 'auto'
}
Expand Down Expand Up @@ -148,7 +148,7 @@ const Styles = props => {
responsive="all"
enabledCallback={ () => enableHeight }
valueCallback={ ( value, getAttribute ) => {
// If there's an aspect ratio and the other dimenion is not given, use auto
// If there's an aspect ratio and the other dimension is not given, use auto
if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageWidth' ) ) {
return 'auto'
}
Expand Down
Loading

0 comments on commit 6c2746b

Please sign in to comment.