mirror of
https://ghproxy.net/https://github.com/lubusIN/blablablocks-slider-block.git
synced 2025-10-04 01:04:17 +08:00
fix: remove unnecessary comment in save.js and ensure newline at end of style.scss
This commit is contained in:
punitverma123
parent
7fce10488f
commit
9f9dfca755
5 changed files with 278 additions and 279 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -49,9 +49,9 @@ const DEFAULT_BLOCK = {
|
|||
*
|
||||
* @return {JSX.Element} The component rendering for the block editor.
|
||||
*/
|
||||
export default function Edit({ clientId, attributes, setAttributes }) {
|
||||
export default function Edit( { clientId, attributes, setAttributes } ) {
|
||||
const { allowedBlocks } = attributes;
|
||||
const { insertBlock, selectBlock } = useDispatch(blockEditorStore);
|
||||
const { insertBlock, selectBlock } = useDispatch( blockEditorStore );
|
||||
|
||||
const innerBlocksProps = useInnerBlocksProps(
|
||||
{ className: 'swiper-wrapper' },
|
||||
|
|
@ -65,16 +65,16 @@ export default function Edit({ clientId, attributes, setAttributes }) {
|
|||
|
||||
// Check if inner blocks exist using useSelect
|
||||
const innerBlocks = useSelect(
|
||||
(select) => select(blockEditorStore).getBlocks(clientId),
|
||||
[clientId]
|
||||
( select ) => select( blockEditorStore ).getBlocks( clientId ),
|
||||
[ clientId ]
|
||||
);
|
||||
|
||||
const hasInnerBlocks = innerBlocks.length > 0;
|
||||
|
||||
const addSlide = () => {
|
||||
const block = createBlock('blablablocks/slide');
|
||||
insertBlock(block, innerBlocks.length, clientId, false);
|
||||
selectBlock(block.clientId);
|
||||
const block = createBlock( 'blablablocks/slide' );
|
||||
insertBlock( block, innerBlocks.length, clientId, false );
|
||||
selectBlock( block.clientId );
|
||||
};
|
||||
|
||||
const defaultSettings = {
|
||||
|
|
@ -112,379 +112,379 @@ export default function Edit({ clientId, attributes, setAttributes }) {
|
|||
return hasInnerBlocks ? (
|
||||
<>
|
||||
<Slider
|
||||
clientId={clientId}
|
||||
attributes={attributes}
|
||||
innerBlocksProps={innerBlocksProps}
|
||||
innerBlocks={innerBlocks}
|
||||
clientId={ clientId }
|
||||
attributes={ attributes }
|
||||
innerBlocksProps={ innerBlocksProps }
|
||||
innerBlocks={ innerBlocks }
|
||||
/>
|
||||
<BlockControls>
|
||||
<ToolbarGroup>
|
||||
<ToolbarButton onClick={addSlide}>
|
||||
{__('Add Slide', 'blablablocks-slider-block')}
|
||||
<ToolbarButton onClick={ addSlide }>
|
||||
{ __( 'Add Slide', 'blablablocks-slider-block' ) }
|
||||
</ToolbarButton>
|
||||
</ToolbarGroup>
|
||||
</BlockControls>
|
||||
<InspectorControls>
|
||||
<ToolsPanel
|
||||
label={__('Settings', 'blablablocks-slider-block')}
|
||||
resetAll={() => setAttributes(defaultSettings)}
|
||||
label={ __( 'Settings', 'blablablocks-slider-block' ) }
|
||||
resetAll={ () => setAttributes( defaultSettings ) }
|
||||
>
|
||||
<ToolsPanelItem
|
||||
label={__(
|
||||
label={ __(
|
||||
'Slides Per View',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
JSON.stringify(attributes.slidesPerView) !==
|
||||
JSON.stringify(defaultSettings.slidesPerView)
|
||||
hasValue={ () =>
|
||||
JSON.stringify( attributes.slidesPerView ) !==
|
||||
JSON.stringify( defaultSettings.slidesPerView )
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
slidesPerView: {
|
||||
...defaultSettings.slidesPerView,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<VStack>
|
||||
<ResponsiveDropdown
|
||||
label="Slides Per View"
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
attributes={ attributes }
|
||||
setAttributes={ setAttributes }
|
||||
responsiveKey="slidesPerView"
|
||||
/>
|
||||
<RangeControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
help={__(
|
||||
help={ __(
|
||||
"Number of slides visible at the same time on slider's container.",
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
value={
|
||||
attributes.slidesPerView[
|
||||
attributes.slidesPerView.activeDevice
|
||||
attributes.slidesPerView.activeDevice
|
||||
]
|
||||
}
|
||||
min={1}
|
||||
max={30}
|
||||
onChange={(value) =>
|
||||
setAttributes({
|
||||
min={ 1 }
|
||||
max={ 30 }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( {
|
||||
slidesPerView: {
|
||||
...attributes.slidesPerView,
|
||||
[attributes.slidesPerView
|
||||
.activeDevice]: value,
|
||||
[ attributes.slidesPerView
|
||||
.activeDevice ]: value,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</VStack>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__(
|
||||
label={ __(
|
||||
'Slides Spacing',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
JSON.stringify(attributes.slidesSpacing) !==
|
||||
JSON.stringify(defaultSettings.slidesSpacing)
|
||||
hasValue={ () =>
|
||||
JSON.stringify( attributes.slidesSpacing ) !==
|
||||
JSON.stringify( defaultSettings.slidesSpacing )
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
slidesSpacing: {
|
||||
...defaultSettings.slidesSpacing,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<VStack>
|
||||
<ResponsiveDropdown
|
||||
label={__(
|
||||
label={ __(
|
||||
'Slides Spacing',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
) }
|
||||
attributes={ attributes }
|
||||
setAttributes={ setAttributes }
|
||||
responsiveKey="slidesSpacing"
|
||||
/>
|
||||
<RangeControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
help={__(
|
||||
help={ __(
|
||||
'Adjust the spacing between slides.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
initialPosition={30}
|
||||
) }
|
||||
initialPosition={ 30 }
|
||||
value={
|
||||
attributes.slidesSpacing[
|
||||
attributes.slidesSpacing.activeDevice
|
||||
attributes.slidesSpacing.activeDevice
|
||||
]
|
||||
}
|
||||
min={0}
|
||||
onChange={(value) =>
|
||||
setAttributes({
|
||||
min={ 0 }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( {
|
||||
slidesSpacing: {
|
||||
...attributes.slidesSpacing,
|
||||
[attributes.slidesSpacing
|
||||
.activeDevice]: value,
|
||||
[ attributes.slidesSpacing
|
||||
.activeDevice ]: value,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</VStack>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__(
|
||||
label={ __(
|
||||
'Speed (ms)',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
hasValue={ () =>
|
||||
attributes.speed !== defaultSettings.speed
|
||||
}
|
||||
onDeselect={() => setAttributes({ speed: 300 })}
|
||||
onDeselect={ () => setAttributes( { speed: 300 } ) }
|
||||
>
|
||||
<RangeControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
help={__(
|
||||
help={ __(
|
||||
'Set the duration of transition between slides.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
label={__(
|
||||
) }
|
||||
label={ __(
|
||||
'Speed (ms)',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
min={100} // minimum speed in ms
|
||||
max={10000} // maximum speed in ms
|
||||
step={100}
|
||||
value={attributes.speed}
|
||||
onChange={(value) =>
|
||||
setAttributes({ speed: value })
|
||||
) }
|
||||
min={ 100 } // minimum speed in ms
|
||||
max={ 10000 } // maximum speed in ms
|
||||
step={ 100 }
|
||||
value={ attributes.speed }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { speed: value } )
|
||||
}
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Effects', 'blablablocks-slider-block')}
|
||||
label={ __( 'Effects', 'blablablocks-slider-block' ) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
hasValue={ () =>
|
||||
attributes.effects !== defaultSettings.effects
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({ effects: 'slide' })
|
||||
onDeselect={ () =>
|
||||
setAttributes( { effects: 'slide' } )
|
||||
}
|
||||
>
|
||||
<ToggleGroupControl
|
||||
isBlock
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
label={__(
|
||||
label={ __(
|
||||
'Effects',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
value={attributes.effects}
|
||||
onChange={(value) =>
|
||||
setAttributes({ effects: value })
|
||||
) }
|
||||
value={ attributes.effects }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { effects: value } )
|
||||
}
|
||||
help={__(
|
||||
help={ __(
|
||||
'Select how slides transition.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
>
|
||||
<ToggleGroupControlOption
|
||||
label={__(
|
||||
label={ __(
|
||||
'Slide',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
value="slide"
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
label={__(
|
||||
label={ __(
|
||||
'Fade',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
value="fade"
|
||||
/>
|
||||
</ToggleGroupControl>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__(
|
||||
label={ __(
|
||||
'Navigation',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
JSON.stringify(attributes.navigation) !==
|
||||
JSON.stringify(defaultSettings.navigation)
|
||||
hasValue={ () =>
|
||||
JSON.stringify( attributes.navigation ) !==
|
||||
JSON.stringify( defaultSettings.navigation )
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
navigation: { ...defaultSettings.navigation },
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<ToggleControl
|
||||
__nextHasNoMarginBottom
|
||||
className="responsive_field_control"
|
||||
help={__(
|
||||
help={ __(
|
||||
'Enable navigation arrows to manually move between slides.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
checked={
|
||||
attributes.navigation[
|
||||
attributes.navigation.activeDevice
|
||||
attributes.navigation.activeDevice
|
||||
]
|
||||
}
|
||||
label={
|
||||
<ResponsiveDropdown
|
||||
label={__(
|
||||
label={ __(
|
||||
'Navigation',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
) }
|
||||
attributes={ attributes }
|
||||
setAttributes={ setAttributes }
|
||||
responsiveKey="navigation"
|
||||
/>
|
||||
}
|
||||
onChange={(value) =>
|
||||
setAttributes({
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( {
|
||||
navigation: {
|
||||
...attributes.navigation,
|
||||
[attributes.navigation.activeDevice]:
|
||||
[ attributes.navigation.activeDevice ]:
|
||||
value,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__(
|
||||
label={ __(
|
||||
'Pagination',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
JSON.stringify(attributes.pagination) !==
|
||||
JSON.stringify(defaultSettings.pagination)
|
||||
hasValue={ () =>
|
||||
JSON.stringify( attributes.pagination ) !==
|
||||
JSON.stringify( defaultSettings.pagination )
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
pagination: { ...defaultSettings.pagination },
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<ToggleControl
|
||||
__nextHasNoMarginBottom
|
||||
className="responsive_field_control"
|
||||
help={__(
|
||||
help={ __(
|
||||
'Enable pagination indicators to show slide positions.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
checked={
|
||||
attributes.pagination[
|
||||
attributes.pagination.activeDevice
|
||||
attributes.pagination.activeDevice
|
||||
]
|
||||
}
|
||||
label={
|
||||
<ResponsiveDropdown
|
||||
label={__(
|
||||
label={ __(
|
||||
'Pagination',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
) }
|
||||
attributes={ attributes }
|
||||
setAttributes={ setAttributes }
|
||||
responsiveKey="pagination"
|
||||
/>
|
||||
}
|
||||
onChange={(value) =>
|
||||
setAttributes({
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( {
|
||||
pagination: {
|
||||
...attributes.pagination,
|
||||
[attributes.pagination.activeDevice]:
|
||||
[ attributes.pagination.activeDevice ]:
|
||||
value,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Loop', 'blablablocks-slider-block')}
|
||||
hasValue={() =>
|
||||
label={ __( 'Loop', 'blablablocks-slider-block' ) }
|
||||
hasValue={ () =>
|
||||
attributes.loop !== defaultSettings.loop
|
||||
}
|
||||
onDeselect={() => setAttributes({ loop: false })}
|
||||
onDeselect={ () => setAttributes( { loop: false } ) }
|
||||
>
|
||||
<ToggleControl
|
||||
__nextHasNoMarginBottom
|
||||
help={__(
|
||||
help={ __(
|
||||
'Enable loop to continuously cycle through slides.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
checked={attributes.loop}
|
||||
label={__('Loop', 'blablablocks-slider-block')}
|
||||
onChange={(value) =>
|
||||
setAttributes({ loop: value })
|
||||
) }
|
||||
checked={ attributes.loop }
|
||||
label={ __( 'Loop', 'blablablocks-slider-block' ) }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { loop: value } )
|
||||
}
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Autoplay', 'blablablocks-slider-block')}
|
||||
hasValue={() =>
|
||||
label={ __( 'Autoplay', 'blablablocks-slider-block' ) }
|
||||
hasValue={ () =>
|
||||
attributes.autoplay !== defaultSettings.autoplay
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
autoplay: false,
|
||||
delay: 5000,
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
<VStack spacing={ 4 }>
|
||||
<ToggleControl
|
||||
help={__(
|
||||
help={ __(
|
||||
'Enable automatic slide transition.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
checked={attributes.autoplay}
|
||||
label={__(
|
||||
) }
|
||||
checked={ attributes.autoplay }
|
||||
label={ __(
|
||||
'Autoplay',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
onChange={(value) =>
|
||||
setAttributes({ autoplay: value })
|
||||
) }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { autoplay: value } )
|
||||
}
|
||||
/>
|
||||
{attributes.autoplay && (
|
||||
{ attributes.autoplay && (
|
||||
<RangeControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
help={__(
|
||||
help={ __(
|
||||
'Set the delay between slides in milliseconds.',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
label={__(
|
||||
) }
|
||||
label={ __(
|
||||
'Delay (ms)',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
min={100} // minimum delay in ms
|
||||
max={10000} // maximum delay in ms
|
||||
step={100}
|
||||
value={attributes.delay}
|
||||
onChange={(value) =>
|
||||
setAttributes({ delay: value })
|
||||
) }
|
||||
min={ 100 } // minimum delay in ms
|
||||
max={ 10000 } // maximum delay in ms
|
||||
step={ 100 }
|
||||
value={ attributes.delay }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { delay: value } )
|
||||
}
|
||||
/>
|
||||
)}
|
||||
) }
|
||||
</VStack>
|
||||
</ToolsPanelItem>
|
||||
</ToolsPanel>
|
||||
</InspectorControls>
|
||||
<InspectorControls group="styles">
|
||||
<ToolsPanel
|
||||
label={__('Navigation', 'blablablocks-slider-block')}
|
||||
resetAll={() =>
|
||||
setAttributes({
|
||||
label={ __( 'Navigation', 'blablablocks-slider-block' ) }
|
||||
resetAll={ () =>
|
||||
setAttributes( {
|
||||
navigationSize: undefined,
|
||||
navigationColor: {
|
||||
arrow: { default: undefined, hover: undefined },
|
||||
|
|
@ -496,41 +496,41 @@ export default function Edit({ clientId, attributes, setAttributes }) {
|
|||
navigationPadding: undefined,
|
||||
navigationOffset: undefined,
|
||||
navigationBorderRadius: undefined,
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<ToolsPanelItem
|
||||
label={__('Size', 'blablablocks-slider-block')}
|
||||
label={ __( 'Size', 'blablablocks-slider-block' ) }
|
||||
isShownByDefault
|
||||
hasValue={() => !!attributes.navigationSize}
|
||||
onDeselect={() =>
|
||||
setAttributes({ navigationSize: undefined })
|
||||
hasValue={ () => !! attributes.navigationSize }
|
||||
onDeselect={ () =>
|
||||
setAttributes( { navigationSize: undefined } )
|
||||
}
|
||||
>
|
||||
<FontSizePicker
|
||||
__next40pxDefaultSize
|
||||
withSlider
|
||||
withReset={false}
|
||||
onChange={(size) =>
|
||||
setAttributes({ navigationSize: size })
|
||||
withReset={ false }
|
||||
onChange={ ( size ) =>
|
||||
setAttributes( { navigationSize: size } )
|
||||
}
|
||||
value={attributes.navigationSize}
|
||||
value={ attributes.navigationSize }
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Color', 'blablablocks-slider-block')}
|
||||
label={ __( 'Color', 'blablablocks-slider-block' ) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
!!attributes?.navigationColor?.arrowColor
|
||||
hasValue={ () =>
|
||||
!! attributes?.navigationColor?.arrowColor
|
||||
?.default ||
|
||||
!!attributes?.navigationColor?.arrowColor?.hover ||
|
||||
!!attributes?.navigationColor?.backgroundColor
|
||||
!! attributes?.navigationColor?.arrowColor?.hover ||
|
||||
!! attributes?.navigationColor?.backgroundColor
|
||||
?.default ||
|
||||
!!attributes?.navigationColor?.backgroundColor
|
||||
!! attributes?.navigationColor?.backgroundColor
|
||||
?.hover
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
navigationColor: {
|
||||
arrow: {
|
||||
default: undefined,
|
||||
|
|
@ -541,119 +541,119 @@ export default function Edit({ clientId, attributes, setAttributes }) {
|
|||
hover: undefined,
|
||||
},
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<VStack spacing={0}>
|
||||
<VStack spacing={ 0 }>
|
||||
<Heading
|
||||
lineHeight={1}
|
||||
level={3}
|
||||
weight={500}
|
||||
lineHeight={ 1 }
|
||||
level={ 3 }
|
||||
weight={ 500 }
|
||||
upperCase
|
||||
>
|
||||
Color
|
||||
</Heading>
|
||||
<VStack
|
||||
className="slider_color-support-panel"
|
||||
spacing={0}
|
||||
spacing={ 0 }
|
||||
>
|
||||
<ColorControlDropdown
|
||||
label={__(
|
||||
label={ __(
|
||||
'Arrow',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
colorValue={
|
||||
attributes?.navigationColor
|
||||
?.arrowColor || {}
|
||||
}
|
||||
onChangeColor={(newColor) =>
|
||||
setAttributes({
|
||||
onChangeColor={ ( newColor ) =>
|
||||
setAttributes( {
|
||||
navigationColor: {
|
||||
...attributes.navigationColor,
|
||||
arrowColor: newColor,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
hasHover={true}
|
||||
hasHover={ true }
|
||||
/>
|
||||
<ColorControlDropdown
|
||||
label={__(
|
||||
label={ __(
|
||||
'Background',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
colorValue={
|
||||
attributes?.navigationColor
|
||||
?.backgroundColor || {}
|
||||
}
|
||||
onChangeColor={(newColor) =>
|
||||
setAttributes({
|
||||
onChangeColor={ ( newColor ) =>
|
||||
setAttributes( {
|
||||
navigationColor: {
|
||||
...attributes?.navigationColor,
|
||||
backgroundColor: newColor,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
hasHover={true}
|
||||
hasHover={ true }
|
||||
/>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Padding', 'blablablocks-slider-block')}
|
||||
hasValue={() => !!attributes.navigationPadding}
|
||||
onDeselect={() =>
|
||||
setAttributes({ navigationPadding: undefined })
|
||||
label={ __( 'Padding', 'blablablocks-slider-block' ) }
|
||||
hasValue={ () => !! attributes.navigationPadding }
|
||||
onDeselect={ () =>
|
||||
setAttributes( { navigationPadding: undefined } )
|
||||
}
|
||||
>
|
||||
<SpacingSizesControl
|
||||
values={attributes.navigationPadding}
|
||||
onChange={(value) =>
|
||||
setAttributes({ navigationPadding: value })
|
||||
values={ attributes.navigationPadding }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { navigationPadding: value } )
|
||||
}
|
||||
label={__(
|
||||
label={ __(
|
||||
'Padding',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
allowReset={false}
|
||||
splitOnAxis={true}
|
||||
) }
|
||||
allowReset={ false }
|
||||
splitOnAxis={ true }
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Offset', 'blablablocks-slider-block')}
|
||||
hasValue={() => !!attributes.navigationOffset}
|
||||
onDeselect={() =>
|
||||
setAttributes({ navigationOffset: undefined })
|
||||
label={ __( 'Offset', 'blablablocks-slider-block' ) }
|
||||
hasValue={ () => !! attributes.navigationOffset }
|
||||
onDeselect={ () =>
|
||||
setAttributes( { navigationOffset: undefined } )
|
||||
}
|
||||
>
|
||||
<SpacingSizesControl
|
||||
values={attributes.navigationOffset}
|
||||
onChange={(value) =>
|
||||
setAttributes({ navigationOffset: value })
|
||||
values={ attributes.navigationOffset }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { navigationOffset: value } )
|
||||
}
|
||||
label={__(
|
||||
label={ __(
|
||||
'Offset',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
minimumCustomValue={-Infinity}
|
||||
allowReset={false}
|
||||
splitOnAxis={true}
|
||||
) }
|
||||
minimumCustomValue={ -Infinity }
|
||||
allowReset={ false }
|
||||
splitOnAxis={ true }
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Radius', 'blablablocks-slider-block')}
|
||||
hasValue={() => !!attributes.navigationBorderRadius}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
label={ __( 'Radius', 'blablablocks-slider-block' ) }
|
||||
hasValue={ () => !! attributes.navigationBorderRadius }
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
navigationBorderRadius: undefined,
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<BorderRadiusControl
|
||||
values={attributes.navigationBorderRadius}
|
||||
onChange={(value) =>
|
||||
setAttributes({
|
||||
values={ attributes.navigationBorderRadius }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( {
|
||||
navigationBorderRadius: value,
|
||||
})
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
|
|
@ -661,129 +661,129 @@ export default function Edit({ clientId, attributes, setAttributes }) {
|
|||
</InspectorControls>
|
||||
<InspectorControls group="styles">
|
||||
<ToolsPanel
|
||||
label={__('Pagination', 'blablablocks-slider-block')}
|
||||
resetAll={() =>
|
||||
setAttributes({
|
||||
label={ __( 'Pagination', 'blablablocks-slider-block' ) }
|
||||
resetAll={ () =>
|
||||
setAttributes( {
|
||||
paginationSize: undefined,
|
||||
paginationColor: {
|
||||
activeColor: undefined,
|
||||
inactiveColor: undefined,
|
||||
},
|
||||
paginationOffset: undefined,
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<ToolsPanelItem
|
||||
label={__('Size', 'blablablocks-slider-block')}
|
||||
label={ __( 'Size', 'blablablocks-slider-block' ) }
|
||||
isShownByDefault
|
||||
hasValue={() => !!attributes.paginationSize}
|
||||
onDeselect={() =>
|
||||
setAttributes({ paginationSize: undefined })
|
||||
hasValue={ () => !! attributes.paginationSize }
|
||||
onDeselect={ () =>
|
||||
setAttributes( { paginationSize: undefined } )
|
||||
}
|
||||
>
|
||||
<FontSizePicker
|
||||
__next40pxDefaultSize
|
||||
withSlider
|
||||
withReset={false}
|
||||
onChange={(size) =>
|
||||
setAttributes({ paginationSize: size })
|
||||
withReset={ false }
|
||||
onChange={ ( size ) =>
|
||||
setAttributes( { paginationSize: size } )
|
||||
}
|
||||
value={attributes.paginationSize}
|
||||
value={ attributes.paginationSize }
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Color', 'blablablocks-slider-block')}
|
||||
label={ __( 'Color', 'blablablocks-slider-block' ) }
|
||||
isShownByDefault
|
||||
hasValue={() =>
|
||||
!!attributes?.paginationColor?.activeColor ||
|
||||
!!attributes?.paginationColor?.inactiveColor
|
||||
hasValue={ () =>
|
||||
!! attributes?.paginationColor?.activeColor ||
|
||||
!! attributes?.paginationColor?.inactiveColor
|
||||
}
|
||||
onDeselect={() =>
|
||||
setAttributes({
|
||||
onDeselect={ () =>
|
||||
setAttributes( {
|
||||
paginationColor: {
|
||||
activeColor: undefined,
|
||||
inactiveColor: undefined,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
>
|
||||
<VStack spacing={0}>
|
||||
<VStack spacing={ 0 }>
|
||||
<Heading
|
||||
lineHeight={1}
|
||||
level={3}
|
||||
weight={500}
|
||||
lineHeight={ 1 }
|
||||
level={ 3 }
|
||||
weight={ 500 }
|
||||
upperCase
|
||||
>
|
||||
Color
|
||||
</Heading>
|
||||
<VStack
|
||||
className="slider_color-support-panel"
|
||||
spacing={0}
|
||||
spacing={ 0 }
|
||||
>
|
||||
<ColorControlDropdown
|
||||
label={__(
|
||||
label={ __(
|
||||
'Active',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
colorValue={
|
||||
attributes?.paginationColor
|
||||
?.activeColor || {}
|
||||
}
|
||||
onChangeColor={(newColor) =>
|
||||
setAttributes({
|
||||
onChangeColor={ ( newColor ) =>
|
||||
setAttributes( {
|
||||
paginationColor: {
|
||||
...attributes.paginationColor,
|
||||
activeColor: newColor,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
/>
|
||||
<ColorControlDropdown
|
||||
label={__(
|
||||
label={ __(
|
||||
'Inactive',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
) }
|
||||
colorValue={
|
||||
attributes?.paginationColor
|
||||
?.inactiveColor || {}
|
||||
}
|
||||
onChangeColor={(newColor) =>
|
||||
setAttributes({
|
||||
onChangeColor={ ( newColor ) =>
|
||||
setAttributes( {
|
||||
paginationColor: {
|
||||
...attributes?.paginationColor,
|
||||
inactiveColor: newColor,
|
||||
},
|
||||
})
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</ToolsPanelItem>
|
||||
<ToolsPanelItem
|
||||
label={__('Offset', 'blablablocks-slider-block')}
|
||||
hasValue={() => !!attributes.paginationOffset}
|
||||
onDeselect={() =>
|
||||
setAttributes({ paginationOffset: undefined })
|
||||
label={ __( 'Offset', 'blablablocks-slider-block' ) }
|
||||
hasValue={ () => !! attributes.paginationOffset }
|
||||
onDeselect={ () =>
|
||||
setAttributes( { paginationOffset: undefined } )
|
||||
}
|
||||
>
|
||||
<SpacingSizesControl
|
||||
values={attributes.paginationOffset}
|
||||
onChange={(value) =>
|
||||
setAttributes({ paginationOffset: value })
|
||||
values={ attributes.paginationOffset }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { paginationOffset: value } )
|
||||
}
|
||||
label={__(
|
||||
label={ __(
|
||||
'Offset',
|
||||
'blablablocks-slider-block'
|
||||
)}
|
||||
minimumCustomValue={-Infinity}
|
||||
allowReset={false}
|
||||
splitOnAxis={true}
|
||||
) }
|
||||
minimumCustomValue={ -Infinity }
|
||||
allowReset={ false }
|
||||
splitOnAxis={ true }
|
||||
/>
|
||||
</ToolsPanelItem>
|
||||
</ToolsPanel>
|
||||
</InspectorControls>
|
||||
</>
|
||||
) : (
|
||||
<Placeholder clientId={clientId} setAttributes={setAttributes} />
|
||||
<Placeholder clientId={ clientId } setAttributes={ setAttributes } />
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import { InnerBlocks } from '@wordpress/block-editor';
|
|||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @param {Object} props Component properties.
|
||||
* @return {JSX.Element} The block's save component.
|
||||
*/
|
||||
export default function save() {
|
||||
|
|
|
|||
|
|
@ -61,4 +61,4 @@
|
|||
.swiper-pagination-bullet-active {
|
||||
background: var(--pagination-active-color, var(--swiper-theme-color)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
