framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

block settings: toggle for text contrast and fix colour/tint

Browse Source
This commit is contained in:
Steve Ross
2026-02-03 13:00:27 +00:00
parent 391a522900
commit a6a8a8cf2a
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
resources/js/blocks/components/BlockSettings.jsx
View File

@@ -150,33 +150,38 @@ export default function BlockSettings({ attributes, setAttributes }) {
slug = selected.slug;
}
setAttributes( {
let colourAttributes = {
background_colour: slug,
background_hex: hex,
});
};
if(!slug || [0, '0', 'white', 'black'].includes(slug)) {
colourAttributes.background_tint = '0';
}
setAttributes( colourAttributes );
} }
/>
{ 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
<>
<SelectControl
label={ __("Tint", "badegg") }
value={ background_tint }
options={ configOptions.tints }
onChange={ (value) => setAttributes({ background_tint: value }) }
__next40pxDefaultSize={ true }
__nextHasNoMarginBottom={ true }
/>
<ToggleControl
label={ __('Text Contrast', 'badegg') }
checked={ background_contrast }
onChange={(value) => setAttributes({ background_contrast: value }) }
__nextHasNoMarginBottom
/>
</>
<SelectControl
label={ __("Tint", "badegg") }
value={ background_tint }
options={ configOptions.tints }
onChange={ (value) => setAttributes({ background_tint: value }) }
__next40pxDefaultSize={ true }
__nextHasNoMarginBottom={ true }
/>
) : null }
<ToggleControl
label={ __('Text Contrast', 'badegg') }
checked={ background_contrast }
onChange={(value) => setAttributes({ background_contrast: value }) }
__nextHasNoMarginBottom
/>
{ background_image != 0 && (
<>
<ToggleControl