feat: initial ACRIB WordPress deployment
- WordPress 6.9.4 (es_ES) with Kadence theme - Homepage: Hero, La Asociación, Pilares, Beneficios, Eventos, Miembros, Hazte Miembro, Contacto - Brand identity: #13294b navy, #a12932 burgundy, #c69c48 gold - Fonts: Raleway (headings) + Source Sans 3 (body) + Lato (UI) - Plugins: Kadence Blocks, Polylang, Contact Form 7 - Custom CSS with full brand styling and responsive layout - HTTPS enforced via wp-config.php proxy detection
This commit is contained in:
Malin
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* function to return string with capital letter.
|
||||
* @param {string} string the word string.
|
||||
* @returns {string} with capital letter.
|
||||
*/
|
||||
export default function capitalizeFirstLetter( string ) {
|
||||
return string.charAt( 0 ).toUpperCase() + string.slice( 1 );
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
import color from 'react-color/lib/helpers/color'
|
||||
|
||||
import { EditableInput } from 'react-color/lib/components/common'
|
||||
const {
|
||||
Component,
|
||||
Fragment
|
||||
} = wp.element;
|
||||
const {
|
||||
Dashicon,
|
||||
} = wp.components;
|
||||
class PickerFields extends Component {
|
||||
constructor(props) {
|
||||
super( props );
|
||||
this.toggleViews = this.toggleViews.bind( this );
|
||||
this.handleChange = this.handleChange.bind( this );
|
||||
this.state = {
|
||||
view: 'rgb',
|
||||
};
|
||||
}
|
||||
toggleViews() {
|
||||
if ( this.state.view === 'hsl' ) {
|
||||
this.setState({ view: 'rgb' })
|
||||
} else if (this.state.view === 'rgb') {
|
||||
this.setState({ view: 'hsl' })
|
||||
}
|
||||
}
|
||||
handleChange(data, e) {
|
||||
if (data.hex) {
|
||||
color.isValidHex(data.hex) && this.props.onChange({
|
||||
hex: data.hex,
|
||||
source: 'hex',
|
||||
}, e)
|
||||
} else if (data.r || data.g || data.b) {
|
||||
this.props.onChange({
|
||||
r: data.r || this.props.rgb.r,
|
||||
g: data.g || this.props.rgb.g,
|
||||
b: data.b || this.props.rgb.b,
|
||||
a: this.props.rgb.a,
|
||||
source: 'rgb',
|
||||
}, e)
|
||||
} else if (data.a) {
|
||||
if (data.a < 0) {
|
||||
data.a = 0
|
||||
} else if (data.a > 1) {
|
||||
data.a = 1
|
||||
}
|
||||
|
||||
this.props.onChange({
|
||||
h: this.props.hsl.h,
|
||||
s: this.props.hsl.s,
|
||||
l: this.props.hsl.l,
|
||||
a: Math.round(data.a * 100) / 100,
|
||||
source: 'rgb',
|
||||
}, e)
|
||||
} else if (data.h || data.s || data.l) {
|
||||
// Remove any occurances of '%'.
|
||||
if (typeof(data.s) === 'string') { data.s = data.s.replace('%', '') }
|
||||
if (typeof(data.l) === 'string') { data.l = data.l.replace('%', '') }
|
||||
this.props.onChange({
|
||||
h: data.h || this.props.hsl.h || 0,
|
||||
s: Number((data.s && data.s / 100) || this.props.hsl.s || 0.0 ),
|
||||
l: Number((data.l && data.l / 100) || this.props.hsl.l || 0.0 ),
|
||||
a: Math.round(data.a * 100) / 100 || this.props.rgb.a || 1,
|
||||
source: 'hsl',
|
||||
}, e)
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const styles = {
|
||||
fields: {
|
||||
display: 'flex',
|
||||
paddingTop: '4px',
|
||||
},
|
||||
single: {
|
||||
flex: '1',
|
||||
paddingLeft: '6px',
|
||||
},
|
||||
alpha: {
|
||||
flex: '1',
|
||||
paddingLeft: '6px',
|
||||
},
|
||||
double: {
|
||||
flex: '2',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '4px 10% 3px',
|
||||
border: 'none',
|
||||
borderRadius: '2px',
|
||||
boxShadow: 'rgb(218, 218, 218) 0px 0px 0px 1px inset',
|
||||
fontSize: '11px',
|
||||
},
|
||||
label: {
|
||||
display: 'block',
|
||||
textAlign: 'center',
|
||||
fontSize: '11px',
|
||||
color: '#222',
|
||||
paddingTop: '3px',
|
||||
paddingBottom: '4px',
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
toggle: {
|
||||
width: '32px',
|
||||
textAlign: 'right',
|
||||
position: 'relative',
|
||||
},
|
||||
}
|
||||
return (
|
||||
<div style={ styles.fields } className="flexbox-fix">
|
||||
<div style={ styles.double }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="hex"
|
||||
value={ this.props.hex.replace('#', '') }
|
||||
onChange={ this.handleChange }
|
||||
/>
|
||||
</div>
|
||||
{ this.state.view === 'rgb' && (
|
||||
<Fragment>
|
||||
<div style={ styles.single }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="r"
|
||||
value={ this.props.rgb.r }
|
||||
onChange={ this.handleChange }
|
||||
dragLabel="true"
|
||||
dragMax="255"
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.single }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="g"
|
||||
value={ this.props.rgb.g }
|
||||
onChange={ this.handleChange }
|
||||
dragLabel="true"
|
||||
dragMax="255"
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.single }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="b"
|
||||
value={ this.props.rgb.b }
|
||||
onChange={ this.handleChange }
|
||||
dragLabel="true"
|
||||
dragMax="255"
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.alpha }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="a"
|
||||
value={ this.props.rgb.a }
|
||||
arrowOffset={ 0.01 }
|
||||
onChange={ this.handleChange }
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
) }
|
||||
{ this.state.view === 'hsl' && (
|
||||
<Fragment>
|
||||
<div style={ styles.single }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="h"
|
||||
value={ Math.round(this.props.hsl.h) }
|
||||
onChange={ this.handleChange }
|
||||
dragLabel="true"
|
||||
dragMax="359"
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.single }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="s"
|
||||
value={ `${ Math.round( this.props.hsl.s * 100 ) }` }
|
||||
onChange={ this.handleChange }
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.single }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="l"
|
||||
value={ `${ Math.round(this.props.hsl.l * 100) }` }
|
||||
onChange={ this.handleChange }
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.alpha }>
|
||||
<EditableInput
|
||||
style={{ input: styles.input, label: styles.label }}
|
||||
label="a"
|
||||
value={ this.props.hsl.a }
|
||||
arrowOffset={ 0.01 }
|
||||
onChange={ this.handleChange }
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
) }
|
||||
<div style={ styles.toggle }>
|
||||
<div className="toggle-icons" style={ styles.icon } onClick={ this.toggleViews } ref={ (icon) => this.icon = icon }>
|
||||
<Dashicon icon="arrow-up-alt2" />
|
||||
<Dashicon icon="arrow-down-alt2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default PickerFields
|
||||
@@ -0,0 +1,128 @@
|
||||
import { CustomPicker } from 'react-color'
|
||||
import { EditableInput, Hue, Saturation, Alpha, Checkboard } from 'react-color/lib/components/common'
|
||||
import { ChromePointerCircle } from 'react-color/lib/components/chrome/ChromePointerCircle'
|
||||
import { ChromePointer } from 'react-color/lib/components/chrome/ChromePointer'
|
||||
import PickerFields from './color-picker-fields'
|
||||
|
||||
export const KadenceColorPicker = ({ rgb, hex, hsv, hsl, onChange, renderers }) => {
|
||||
const styles = {
|
||||
picker: {
|
||||
width: 300,
|
||||
position: 'relative',
|
||||
marginBottom: 10,
|
||||
},
|
||||
hue: {
|
||||
height: 10,
|
||||
position: 'relative',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
Hue: {
|
||||
radius: '2px',
|
||||
},
|
||||
alpha: {
|
||||
height: '10px',
|
||||
position: 'relative',
|
||||
},
|
||||
Alpha: {
|
||||
radius: '2px',
|
||||
},
|
||||
input: {
|
||||
height: 34,
|
||||
border: `1px solid ${ hex }`,
|
||||
paddingLeft: 10,
|
||||
},
|
||||
body: {
|
||||
padding: '10px 0',
|
||||
},
|
||||
controls: {
|
||||
display: 'flex',
|
||||
},
|
||||
color: {
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
position: 'relative',
|
||||
marginTop: '3px',
|
||||
marginLeft: '10px',
|
||||
borderRadius: '50%',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
activeColor: {
|
||||
position: 'absolute',
|
||||
left:0,
|
||||
right:0,
|
||||
top:0,
|
||||
bottom:0,
|
||||
borderRadius: '50%',
|
||||
background: `rgba(${ rgb.r },${ rgb.g },${ rgb.b },${ rgb.a })`,
|
||||
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
|
||||
},
|
||||
swatch: {
|
||||
width: 54,
|
||||
height: 38,
|
||||
background: hex,
|
||||
},
|
||||
sliders: {
|
||||
padding: '4px 0',
|
||||
flex: '1',
|
||||
},
|
||||
saturation: {
|
||||
width: '100%',
|
||||
paddingBottom: '40%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
Saturation: {
|
||||
radius: '2px 2px 0 0',
|
||||
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
|
||||
},
|
||||
}
|
||||
return (
|
||||
<div style={ styles.picker } className={ 'kadence-picker' }>
|
||||
<div style={ styles.saturation }>
|
||||
<Saturation
|
||||
style={ styles.Saturation }
|
||||
hsl={ hsl }
|
||||
hsv={ hsv }
|
||||
pointer={ ChromePointerCircle }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.body }>
|
||||
<div style={ styles.controls } className="flexbox-fix">
|
||||
<div style={ styles.sliders }>
|
||||
<div style={ styles.hue }>
|
||||
<Hue
|
||||
style={ styles.Hue }
|
||||
hsl={ hsl }
|
||||
onChange={ onChange }
|
||||
pointer={ ChromePointer }
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.alpha }>
|
||||
<Alpha
|
||||
style={ styles.Alpha }
|
||||
rgb={ rgb }
|
||||
hsl={ hsl }
|
||||
renderers={ renderers }
|
||||
pointer={ ChromePointer }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={ styles.color }>
|
||||
<Checkboard />
|
||||
<div style={ styles.activeColor } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PickerFields
|
||||
rgb={ rgb }
|
||||
hsl={ hsl }
|
||||
hex={ hex }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomPicker(KadenceColorPicker)
|
||||
@@ -0,0 +1,752 @@
|
||||
import PropTypes from "prop-types";
|
||||
import SwatchesControl from "./swatches";
|
||||
import KadenceColorPicker from "./color-picker";
|
||||
import Icons from "./icons";
|
||||
import { __ } from "@wordpress/i18n";
|
||||
const { Component, Fragment } = wp.element;
|
||||
const {
|
||||
Button,
|
||||
Popover,
|
||||
Dashicon,
|
||||
ColorIndicator,
|
||||
Tooltip,
|
||||
Icon,
|
||||
TabPanel,
|
||||
GradientPicker,
|
||||
__experimentalGradientPicker,
|
||||
} = wp.components;
|
||||
import KadenceGradientPicker from "../gradient-control/index.js";
|
||||
|
||||
class ColorControl extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onChangeState = this.onChangeState.bind(this);
|
||||
this.onChangeComplete = this.onChangeComplete.bind(this);
|
||||
this.onChangeGradientComplete =
|
||||
this.onChangeGradientComplete.bind(this);
|
||||
this.state = {
|
||||
isVisible: false,
|
||||
refresh: false,
|
||||
stateColor: this.props.color,
|
||||
color: this.props.color,
|
||||
isPalette:
|
||||
this.props.color &&
|
||||
this.props.color.includes("palette") &&
|
||||
!this.props.color.includes("gradient")
|
||||
? true
|
||||
: false,
|
||||
palette:
|
||||
this.props.presetColors && this.props.presetColors
|
||||
? this.props.presetColors
|
||||
: [],
|
||||
activePalette:
|
||||
this.props.presetColors && this.props.presetColors.active
|
||||
? this.props.presetColors.active
|
||||
: "palette",
|
||||
supportGradient:
|
||||
undefined === GradientPicker &&
|
||||
undefined === __experimentalGradientPicker
|
||||
? false
|
||||
: true,
|
||||
showSyncMessage: true,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
// Helper function to check if we should show sync message
|
||||
const shouldShowSyncMessage = () => {
|
||||
return (
|
||||
this.props.paletteName === "palette10" &&
|
||||
this.props.color === "#FfFfFf" &&
|
||||
this.state.showSyncMessage === true
|
||||
);
|
||||
};
|
||||
|
||||
const shouldShowResyncMessage = () => {
|
||||
return (
|
||||
this.props.paletteName === "palette10" &&
|
||||
this.props.color !== "#FfFfFf" &&
|
||||
this.state.showSyncMessage === false
|
||||
);
|
||||
};
|
||||
|
||||
const toggleVisible = () => {
|
||||
if (this.props.usePalette) {
|
||||
const updateColors = JSON.parse(
|
||||
this.props.customizer
|
||||
.control("kadence_color_palette")
|
||||
.setting.get()
|
||||
);
|
||||
const active =
|
||||
updateColors && updateColors.active
|
||||
? updateColors.active
|
||||
: "palette";
|
||||
this.setState({ palette: updateColors, activePalette: active });
|
||||
}
|
||||
if (this.state.refresh === true) {
|
||||
this.setState({ refresh: false });
|
||||
} else {
|
||||
this.setState({ refresh: true });
|
||||
}
|
||||
this.setState({ isVisible: true });
|
||||
};
|
||||
|
||||
const toggleClose = () => {
|
||||
if (this.state.isVisible === true) {
|
||||
this.setState({ isVisible: false });
|
||||
}
|
||||
};
|
||||
|
||||
const position = this.props.position
|
||||
? this.props.position
|
||||
: "bottom right";
|
||||
const showingGradient =
|
||||
this.props.allowGradient && this.state.supportGradient
|
||||
? true
|
||||
: false;
|
||||
|
||||
const syncMessageContent = () => {
|
||||
return (
|
||||
<div
|
||||
className="kadence-sync-message"
|
||||
style={{ padding: "16px", textAlign: "center" }}
|
||||
>
|
||||
<p>
|
||||
{__(
|
||||
"This color is currently linked as the compliment to your accent color.",
|
||||
"kadence"
|
||||
)}
|
||||
</p>
|
||||
<Button
|
||||
onClick={() =>
|
||||
this.setState({ showSyncMessage: false })
|
||||
}
|
||||
variant="secondary"
|
||||
isSmall
|
||||
>
|
||||
{__("Unlink Color", "kadence")}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const resyncMessageContent = () => {
|
||||
return (
|
||||
<div
|
||||
className="kadence-sync-message"
|
||||
style={{ padding: "16px", textAlign: "center" }}
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
this.setState({ showSyncMessage: true });
|
||||
this.onChangeState({ hex: "#FfFfFf" }, "");
|
||||
this.props.onChangeComplete({ hex: "#FfFfFf" }, "");
|
||||
}}
|
||||
variant="secondary"
|
||||
isSmall
|
||||
>
|
||||
{__("Link Color", "kadence")}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const paletteIndexRegex = this.state.color?.match(/\d+$/)?.[0] - 1;
|
||||
const paletteIndex = this.state.isPalette
|
||||
? paletteIndexRegex
|
||||
: undefined;
|
||||
return (
|
||||
<div
|
||||
className={"kadence-color-picker-wrap " + this.props.className}
|
||||
>
|
||||
{this.props.colorDefault &&
|
||||
this.props.color &&
|
||||
this.props.color !== this.props.colorDefault && (
|
||||
<Tooltip text={__("Clear")}>
|
||||
<span className="tooltip-clear">
|
||||
<Button
|
||||
className="components-color-palette__clear"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
color: this.props.colorDefault,
|
||||
isPalette: "",
|
||||
});
|
||||
this.props.onChangeComplete("", "");
|
||||
}}
|
||||
isSmall
|
||||
>
|
||||
<Dashicon icon="redo" />
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{showingGradient && (
|
||||
<Fragment>
|
||||
{this.state.isVisible && (
|
||||
<Popover
|
||||
position={position}
|
||||
inline={true}
|
||||
anchor={
|
||||
undefined !==
|
||||
this.props?.controlRef?.current
|
||||
? this.props.controlRef.current
|
||||
: undefined
|
||||
}
|
||||
className="kadence-popover-color kadence-popover-color-gradient kadence-customizer-popover"
|
||||
onClose={toggleClose}
|
||||
>
|
||||
{shouldShowSyncMessage() ? (
|
||||
syncMessageContent()
|
||||
) : (
|
||||
<TabPanel
|
||||
className="kadence-popover-tabs kadence-background-tabs"
|
||||
activeClass="active-tab"
|
||||
initialTabName={
|
||||
this.state.color &&
|
||||
this.state.color.includes(
|
||||
"gradient"
|
||||
)
|
||||
? "gradient"
|
||||
: "color"
|
||||
}
|
||||
tabs={[
|
||||
{
|
||||
name: "color",
|
||||
title: __("Color", "kadence"),
|
||||
className:
|
||||
"kadence-color-background",
|
||||
},
|
||||
{
|
||||
name: "gradient",
|
||||
title: __(
|
||||
"Gradient",
|
||||
"kadence"
|
||||
),
|
||||
className:
|
||||
"kadence-gradient-background",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{(tab) => {
|
||||
let tabout;
|
||||
if (tab.name) {
|
||||
if ("gradient" === tab.name) {
|
||||
tabout = (
|
||||
<Fragment>
|
||||
<KadenceGradientPicker
|
||||
value={
|
||||
this.state
|
||||
.color &&
|
||||
this.state.color.includes(
|
||||
"gradient"
|
||||
)
|
||||
? this
|
||||
.state
|
||||
.color
|
||||
: ""
|
||||
}
|
||||
onChange={(
|
||||
gradient
|
||||
) =>
|
||||
this.onChangeGradientComplete(
|
||||
gradient
|
||||
)
|
||||
}
|
||||
activePalette={
|
||||
this.state
|
||||
.palette &&
|
||||
this.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
]
|
||||
? this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
]
|
||||
: []
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
tabout = (
|
||||
<Fragment>
|
||||
{this.state
|
||||
.refresh && (
|
||||
<Fragment>
|
||||
<KadenceColorPicker
|
||||
color={
|
||||
this
|
||||
.state
|
||||
.isPalette &&
|
||||
this
|
||||
.state
|
||||
.palette
|
||||
.palette &&
|
||||
this
|
||||
.state
|
||||
.palette
|
||||
.palette[
|
||||
paletteIndex
|
||||
]
|
||||
? this
|
||||
.state
|
||||
.palette
|
||||
.palette[
|
||||
paletteIndex
|
||||
]
|
||||
?.color
|
||||
: this
|
||||
.state
|
||||
.color
|
||||
}
|
||||
onChange={(
|
||||
color
|
||||
) =>
|
||||
this.onChangeState(
|
||||
color,
|
||||
""
|
||||
)
|
||||
}
|
||||
onChangeComplete={(
|
||||
color
|
||||
) =>
|
||||
this.onChangeComplete(
|
||||
color,
|
||||
""
|
||||
)
|
||||
}
|
||||
/>
|
||||
{this.props
|
||||
.usePalette && (
|
||||
<SwatchesControl
|
||||
colors={
|
||||
this
|
||||
.state
|
||||
.palette &&
|
||||
this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
]
|
||||
? this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
]
|
||||
: []
|
||||
}
|
||||
isPalette={
|
||||
this
|
||||
.state
|
||||
.isPalette
|
||||
? this
|
||||
.state
|
||||
.color
|
||||
: ""
|
||||
}
|
||||
onClick={(
|
||||
color,
|
||||
palette
|
||||
) =>
|
||||
this.onChangeComplete(
|
||||
color,
|
||||
palette
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
{!this.state
|
||||
.refresh && (
|
||||
<Fragment>
|
||||
<KadenceColorPicker
|
||||
//presetColors={ [] }
|
||||
color={
|
||||
this
|
||||
.state
|
||||
.isPalette &&
|
||||
this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
] &&
|
||||
this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
][
|
||||
paletteIndex
|
||||
]
|
||||
? this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
][
|
||||
paletteIndex
|
||||
]
|
||||
?.color
|
||||
: this
|
||||
.state
|
||||
.color
|
||||
}
|
||||
onChange={(
|
||||
color
|
||||
) =>
|
||||
this.onChangeState(
|
||||
color,
|
||||
""
|
||||
)
|
||||
}
|
||||
onChangeComplete={(
|
||||
color
|
||||
) =>
|
||||
this.onChangeComplete(
|
||||
color,
|
||||
""
|
||||
)
|
||||
}
|
||||
//width={ 300 }
|
||||
//styles={ styleing }
|
||||
/>
|
||||
{this.props
|
||||
.usePalette && (
|
||||
<SwatchesControl
|
||||
colors={
|
||||
this
|
||||
.state
|
||||
.palette &&
|
||||
this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
]
|
||||
? this
|
||||
.state
|
||||
.palette[
|
||||
this
|
||||
.state
|
||||
.activePalette
|
||||
]
|
||||
: []
|
||||
}
|
||||
isPalette={
|
||||
this
|
||||
.state
|
||||
.isPalette
|
||||
? this
|
||||
.state
|
||||
.color
|
||||
: ""
|
||||
}
|
||||
onClick={(
|
||||
color,
|
||||
palette
|
||||
) =>
|
||||
this.onChangeComplete(
|
||||
color,
|
||||
palette
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{tabout}
|
||||
{shouldShowResyncMessage()
|
||||
? resyncMessageContent()
|
||||
: ""}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</TabPanel>
|
||||
)}
|
||||
</Popover>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
{!showingGradient && (
|
||||
<Fragment>
|
||||
{this.state.isVisible && this.state.refresh && (
|
||||
<Popover
|
||||
position="top right"
|
||||
inline={true}
|
||||
anchor={
|
||||
undefined !==
|
||||
this.props?.controlRef?.current
|
||||
? this.props.controlRef.current
|
||||
: undefined
|
||||
}
|
||||
className="kadence-popover-color kadence-customizer-popover"
|
||||
onClose={toggleClose}
|
||||
>
|
||||
{shouldShowSyncMessage() ? (
|
||||
syncMessageContent()
|
||||
) : (
|
||||
<Fragment>
|
||||
<KadenceColorPicker
|
||||
color={
|
||||
this.state.isPalette &&
|
||||
this.state.palette.palette &&
|
||||
this.state.palette.palette[
|
||||
paletteIndex
|
||||
]
|
||||
? this.state.palette
|
||||
.palette[
|
||||
paletteIndex
|
||||
]?.color
|
||||
: this.state.color
|
||||
}
|
||||
onChange={(color) =>
|
||||
this.onChangeState(color, "")
|
||||
}
|
||||
onChangeComplete={(color) =>
|
||||
this.onChangeComplete(color, "")
|
||||
}
|
||||
/>
|
||||
{this.props.usePalette && (
|
||||
<SwatchesControl
|
||||
colors={
|
||||
this.state.palette &&
|
||||
this.state.palette[
|
||||
this.state.activePalette
|
||||
]
|
||||
? this.state.palette[
|
||||
this.state
|
||||
.activePalette
|
||||
]
|
||||
: []
|
||||
}
|
||||
isPalette={
|
||||
this.state.isPalette
|
||||
? this.state.color
|
||||
: ""
|
||||
}
|
||||
onClick={(color, palette) =>
|
||||
this.onChangeComplete(
|
||||
color,
|
||||
palette
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{shouldShowResyncMessage()
|
||||
? resyncMessageContent()
|
||||
: ""}
|
||||
</Fragment>
|
||||
)}
|
||||
</Popover>
|
||||
)}
|
||||
{this.state.isVisible && !this.state.refresh && (
|
||||
<Popover
|
||||
position={position}
|
||||
inline={true}
|
||||
anchor={
|
||||
undefined !==
|
||||
this.props?.controlRef?.current
|
||||
? this.props.controlRef.current
|
||||
: undefined
|
||||
}
|
||||
className="kadence-popover-color kadence-customizer-popover"
|
||||
onClose={toggleClose}
|
||||
>
|
||||
{shouldShowSyncMessage() ? (
|
||||
syncMessageContent()
|
||||
) : (
|
||||
<Fragment>
|
||||
<KadenceColorPicker
|
||||
//presetColors={ [] }
|
||||
color={
|
||||
this.state.isPalette &&
|
||||
this.state.palette[
|
||||
this.state.activePalette
|
||||
] &&
|
||||
this.state.palette[
|
||||
this.state.activePalette
|
||||
][paletteIndex]
|
||||
? this.state.palette[
|
||||
this.state
|
||||
.activePalette
|
||||
][paletteIndex]?.color
|
||||
: this.state.color
|
||||
}
|
||||
onChange={(color) =>
|
||||
this.onChangeState(color, "")
|
||||
}
|
||||
onChangeComplete={(color) =>
|
||||
this.onChangeComplete(color, "")
|
||||
}
|
||||
//width={ 300 }
|
||||
//styles={ styleing }
|
||||
/>
|
||||
{this.props.usePalette && (
|
||||
<SwatchesControl
|
||||
colors={
|
||||
this.state.palette &&
|
||||
this.state.palette[
|
||||
this.state.activePalette
|
||||
]
|
||||
? this.state.palette[
|
||||
this.state
|
||||
.activePalette
|
||||
]
|
||||
: []
|
||||
}
|
||||
isPalette={
|
||||
this.state.isPalette
|
||||
? this.state.color
|
||||
: ""
|
||||
}
|
||||
onClick={(color, palette) =>
|
||||
this.onChangeComplete(
|
||||
color,
|
||||
palette
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{shouldShowResyncMessage()
|
||||
? resyncMessageContent()
|
||||
: ""}
|
||||
</Fragment>
|
||||
)}
|
||||
</Popover>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
<Tooltip
|
||||
text={
|
||||
this.props.tooltip
|
||||
? this.props.tooltip
|
||||
: __("Select Color", "kadence")
|
||||
}
|
||||
>
|
||||
<div className="color-button-wrap">
|
||||
<Button
|
||||
className={"kadence-color-icon-indicate"}
|
||||
onClick={() => {
|
||||
this.state.isVisible
|
||||
? toggleClose()
|
||||
: toggleVisible();
|
||||
}}
|
||||
disabled={this.props.disabled}
|
||||
>
|
||||
<ColorIndicator
|
||||
className="kadence-advanced-color-indicate"
|
||||
colorValue={
|
||||
this.state.isPalette
|
||||
? "var(--global-" +
|
||||
this.props.color +
|
||||
")"
|
||||
: this.props.color
|
||||
}
|
||||
/>
|
||||
{this.state.isPalette && (
|
||||
<Icon className="dashicon" icon={Icons.globe} />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onChangeState(color, palette) {
|
||||
let newColor;
|
||||
if (palette) {
|
||||
newColor = palette;
|
||||
} else if (
|
||||
undefined !== color.rgb &&
|
||||
undefined !== color.rgb.a &&
|
||||
1 !== color.rgb.a
|
||||
) {
|
||||
newColor =
|
||||
"rgba(" +
|
||||
color.rgb.r +
|
||||
"," +
|
||||
color.rgb.g +
|
||||
"," +
|
||||
color.rgb.b +
|
||||
"," +
|
||||
color.rgb.a +
|
||||
")";
|
||||
} else {
|
||||
newColor = color.hex;
|
||||
}
|
||||
this.setState({ color: newColor, isPalette: palette ? true : false });
|
||||
if (undefined !== this.props.onChange) {
|
||||
this.props.onChange(color, palette);
|
||||
}
|
||||
}
|
||||
onChangeGradientComplete(gradient) {
|
||||
let newColor;
|
||||
if (undefined === gradient) {
|
||||
newColor = "";
|
||||
} else {
|
||||
newColor = gradient;
|
||||
}
|
||||
this.setState({ color: newColor, isPalette: false });
|
||||
this.props.onChangeComplete(newColor, "");
|
||||
}
|
||||
onChangeComplete(color, palette) {
|
||||
let newColor;
|
||||
if (palette) {
|
||||
newColor = palette;
|
||||
} else if (
|
||||
undefined !== color.rgb &&
|
||||
undefined !== color.rgb.a &&
|
||||
1 !== color.rgb.a
|
||||
) {
|
||||
newColor =
|
||||
"rgba(" +
|
||||
color.rgb.r +
|
||||
"," +
|
||||
color.rgb.g +
|
||||
"," +
|
||||
color.rgb.b +
|
||||
"," +
|
||||
color.rgb.a +
|
||||
")";
|
||||
} else {
|
||||
newColor = color.hex;
|
||||
}
|
||||
this.setState({ color: newColor, isPalette: palette ? true : false });
|
||||
this.props.onChangeComplete(color, palette);
|
||||
}
|
||||
}
|
||||
|
||||
ColorControl.propTypes = {
|
||||
color: PropTypes.string,
|
||||
usePalette: PropTypes.bool,
|
||||
palette: PropTypes.string,
|
||||
presetColors: PropTypes.array,
|
||||
onChangeComplete: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
customizer: PropTypes.object,
|
||||
};
|
||||
|
||||
export default ColorControl;
|
||||
@@ -0,0 +1,92 @@
|
||||
if ( kadencegooglefonts === undefined ) {
|
||||
var kadencegooglefonts = [];
|
||||
}
|
||||
const {
|
||||
Component,
|
||||
} = wp.element;
|
||||
import PropTypes from "prop-types";
|
||||
import WebFont from "webfontloader";
|
||||
const statuses = {
|
||||
inactive: 'inactive',
|
||||
active: 'active',
|
||||
loading: 'loading',
|
||||
};
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
class KadenceWebfontLoader extends Component {
|
||||
constructor(props) {
|
||||
super( props );
|
||||
this.handleLoading = this.handleLoading.bind( this );
|
||||
this.handleActive = this.handleActive.bind( this );
|
||||
this.addFont = this.addFont.bind( this );
|
||||
this.handleInactive = this.handleInactive.bind( this );
|
||||
this.loadFonts = this.loadFonts.bind( this );
|
||||
this.state = {
|
||||
status: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
addFont( font ) {
|
||||
if ( ! kadencegooglefonts.includes( font ) ) {
|
||||
kadencegooglefonts.push( font );
|
||||
}
|
||||
};
|
||||
|
||||
handleLoading() {
|
||||
this.setState( { status: statuses.loading } );
|
||||
};
|
||||
|
||||
handleActive() {
|
||||
this.setState( { status: statuses.active } );
|
||||
};
|
||||
|
||||
handleInactive() {
|
||||
this.setState( { status: statuses.inactive } );
|
||||
};
|
||||
|
||||
loadFonts() {
|
||||
//if ( ! this.state.fonts.includes( this.props.config.google.families[ 0 ] ) ) {
|
||||
if ( ! kadencegooglefonts.includes( this.props.config.google.families[ 0 ] ) ) {
|
||||
WebFont.load( {
|
||||
...this.props.config,
|
||||
loading: this.handleLoading,
|
||||
active: this.handleActive,
|
||||
inactive: this.handleInactive,
|
||||
} );
|
||||
this.addFont( this.props.config.google.families[ 0 ] );
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadFonts();
|
||||
}
|
||||
|
||||
componentDidUpdate( prevProps, prevState ) {
|
||||
const { onStatus, config } = this.props;
|
||||
|
||||
if ( prevState.status !== this.state.status ) {
|
||||
onStatus( this.state.status );
|
||||
}
|
||||
if ( prevProps.config !== config ) {
|
||||
this.loadFonts();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
return children || null;
|
||||
}
|
||||
}
|
||||
|
||||
KadenceWebfontLoader.propTypes = {
|
||||
config: PropTypes.object.isRequired,
|
||||
children: PropTypes.element,
|
||||
onStatus: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
KadenceWebfontLoader.defaultProps = {
|
||||
onStatus: noop,
|
||||
};
|
||||
|
||||
export default KadenceWebfontLoader;
|
||||
1360
wp-content/themes/kadence/inc/customizer/react/src/common/icons.js
Normal file
1360
wp-content/themes/kadence/inc/customizer/react/src/common/icons.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,93 @@
|
||||
const { RangeControl } = wp.components;
|
||||
const { useInstanceId } = wp.compose;
|
||||
|
||||
/**
|
||||
* Build the Measure controls
|
||||
* @returns {object} Measure settings.
|
||||
*/
|
||||
export default function KadenceRange({
|
||||
label,
|
||||
onChange,
|
||||
value = "",
|
||||
className = "",
|
||||
step = 1,
|
||||
max = 100,
|
||||
min = 0,
|
||||
beforeIcon = "",
|
||||
help = "",
|
||||
}) {
|
||||
const onChangInput = (event) => {
|
||||
if (event.target.value === "") {
|
||||
onChange(undefined);
|
||||
return;
|
||||
}
|
||||
const newValue = Number(event.target.value);
|
||||
if (newValue === "") {
|
||||
onChange(undefined);
|
||||
return;
|
||||
}
|
||||
if (min < -0.1) {
|
||||
if (newValue > max) {
|
||||
onChange(max);
|
||||
} else if (newValue < min && newValue !== "-") {
|
||||
onChange(min);
|
||||
} else {
|
||||
onChange(newValue);
|
||||
}
|
||||
} else {
|
||||
if (newValue > max) {
|
||||
onChange(max);
|
||||
} else if (newValue < -0.1) {
|
||||
onChange(min);
|
||||
} else {
|
||||
onChange(newValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
const id = useInstanceId(KadenceRange, "inspector-kadence-range");
|
||||
return [
|
||||
onChange && (
|
||||
<div
|
||||
className={`components-base-control kadence-range-control${
|
||||
className ? " " + className : ""
|
||||
}`}
|
||||
>
|
||||
{label && (
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="components-base-control__label"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<div className={"kadence-range-control-inner"}>
|
||||
<RangeControl
|
||||
className={"kadence-range-control-range"}
|
||||
beforeIcon={beforeIcon}
|
||||
value={value}
|
||||
onChange={(newVal) => onChange(newVal)}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
help={help}
|
||||
withInputField={false}
|
||||
/>
|
||||
<div className="components-base-control kt-range-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={value}
|
||||
onChange={onChangInput}
|
||||
min={min}
|
||||
max={max}
|
||||
id={id}
|
||||
step={step}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import PropTypes from "prop-types";
|
||||
import Icons from "./icons";
|
||||
import { __ } from "@wordpress/i18n";
|
||||
const { Component, Fragment } = wp.element;
|
||||
const { Button, Dashicon, Tooltip, ButtonGroup, Icon } = wp.components;
|
||||
|
||||
class ResponsiveControl extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
view:
|
||||
undefined !== this.props.deviceSize
|
||||
? this.props.deviceSize
|
||||
: "desktop",
|
||||
};
|
||||
this.linkResponsiveButtons();
|
||||
}
|
||||
|
||||
render() {
|
||||
let { view } = this.state,
|
||||
deviceMap = {
|
||||
desktop: {
|
||||
tooltip: __("Desktop", "kadence"),
|
||||
icon: <Icon icon={Icons.desktop} />,
|
||||
},
|
||||
tablet: {
|
||||
tooltip: __("Tablet", "kadence"),
|
||||
icon: <Icon icon={Icons.tablet} />,
|
||||
},
|
||||
mobile: {
|
||||
tooltip: __("Mobile", "kadence"),
|
||||
icon: <Icon icon={Icons.smartphone} />,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={"kadence-responsive-control-bar"}>
|
||||
{this.props.controlLabel && (
|
||||
<span className="customize-control-title">
|
||||
{this.props.controlLabel}
|
||||
</span>
|
||||
)}
|
||||
{this.props.advancedControls && (
|
||||
<div className="advanced-controls">
|
||||
<ButtonGroup>
|
||||
<Tooltip
|
||||
text={__("Clamp Font Size", "kadence")}
|
||||
>
|
||||
<Button
|
||||
isTertiary
|
||||
onClick={() => {
|
||||
this.props.onAdvancedChange();
|
||||
}}
|
||||
isPressed={this.props.advanced}
|
||||
>
|
||||
<Dashicon icon="admin-settings" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
)}
|
||||
{!this.props.hideResponsive && (
|
||||
<div className="floating-controls">
|
||||
{this.props.tooltip && (
|
||||
<ButtonGroup>
|
||||
{Object.keys(deviceMap).map((device) => {
|
||||
return (
|
||||
<Tooltip
|
||||
text={deviceMap[device].tooltip}
|
||||
>
|
||||
<Button
|
||||
isTertiary
|
||||
className={
|
||||
(device === view
|
||||
? "active-device "
|
||||
: "") + device
|
||||
}
|
||||
onClick={() => {
|
||||
let event =
|
||||
new CustomEvent(
|
||||
"kadenceChangedRepsonsivePreview",
|
||||
{
|
||||
detail: device,
|
||||
}
|
||||
);
|
||||
document.dispatchEvent(
|
||||
event
|
||||
);
|
||||
}}
|
||||
>
|
||||
{deviceMap[device].icon}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</ButtonGroup>
|
||||
)}
|
||||
{!this.props.tooltip && (
|
||||
<ButtonGroup>
|
||||
{Object.keys(deviceMap).map((device) => {
|
||||
return (
|
||||
<Button
|
||||
isTertiary
|
||||
className={
|
||||
(device === view
|
||||
? "active-device "
|
||||
: "") + device
|
||||
}
|
||||
onClick={() => {
|
||||
let event = new CustomEvent(
|
||||
"kadenceChangedRepsonsivePreview",
|
||||
{
|
||||
detail: device,
|
||||
}
|
||||
);
|
||||
document.dispatchEvent(
|
||||
event
|
||||
);
|
||||
}}
|
||||
>
|
||||
{deviceMap[device].icon}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</ButtonGroup>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="kadence-responsive-controls-content">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
changeViewType(device) {
|
||||
this.setState({ view: device });
|
||||
wp.customize.previewedDevice(device);
|
||||
this.props.onChange(device);
|
||||
}
|
||||
|
||||
linkResponsiveButtons() {
|
||||
let self = this;
|
||||
document.addEventListener(
|
||||
"kadenceChangedRepsonsivePreview",
|
||||
function (e) {
|
||||
self.changeViewType(e.detail);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ResponsiveControl.propTypes = {
|
||||
onChange: PropTypes.func,
|
||||
controlLabel: PropTypes.string,
|
||||
};
|
||||
ResponsiveControl.defaultProps = {
|
||||
tooltip: true,
|
||||
};
|
||||
|
||||
export default ResponsiveControl;
|
||||
@@ -0,0 +1,104 @@
|
||||
import PropTypes from "prop-types";
|
||||
import Icons from "./icons";
|
||||
import { __ } from "@wordpress/i18n";
|
||||
const { Component, Fragment } = wp.element;
|
||||
const { Button, Popover, Dashicon, ColorIndicator, Tooltip, Icon } =
|
||||
wp.components;
|
||||
// /**
|
||||
// * WordPress dependencies
|
||||
// */
|
||||
// import { site, Icon } from '@wordpress/icons';
|
||||
|
||||
export const SwatchesControl = ({
|
||||
colors,
|
||||
isPalette,
|
||||
onClick = () => {},
|
||||
circleSize,
|
||||
circleSpacing,
|
||||
}) => {
|
||||
const handleClick = (color, swatch) => {
|
||||
onClick(
|
||||
{
|
||||
hex: color,
|
||||
},
|
||||
swatch
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
paddingBottom: "15px",
|
||||
}}
|
||||
className="kadence-swatches-wrap"
|
||||
>
|
||||
{colors.map((colorObjOrString) => {
|
||||
const c =
|
||||
typeof colorObjOrString === "string"
|
||||
? { color: colorObjOrString }
|
||||
: colorObjOrString;
|
||||
const key = `${c.color}${c.slug || ""}`;
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
width: circleSize,
|
||||
height: circleSize,
|
||||
marginBottom: 0,
|
||||
transform: "scale(1)",
|
||||
transition: "100ms transform ease",
|
||||
}}
|
||||
className="kadence-swatche-item-wrap"
|
||||
>
|
||||
<Button
|
||||
className={`kadence-swatch-item ${
|
||||
isPalette === c.slug
|
||||
? "swatch-active"
|
||||
: "swatch-inactive"
|
||||
}`}
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
border: "1px solid rgb(218, 218, 218)",
|
||||
borderRadius: "50%",
|
||||
color:
|
||||
c.slug === "palette10"
|
||||
? "var(--global-palette10)"
|
||||
: `${c.color}`,
|
||||
boxShadow: `inset 0 0 0 ${circleSize / 2}px`,
|
||||
transition: "100ms box-shadow ease",
|
||||
}}
|
||||
onClick={() => handleClick(c.color, c.slug)}
|
||||
tabIndex={0}
|
||||
>
|
||||
{/* <Icon
|
||||
className="dashicon"
|
||||
icon={ site }
|
||||
/> */}
|
||||
<Icon className="dashicon" icon={Icons.globe} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
SwatchesControl.defaultProps = {
|
||||
circleSize: 26,
|
||||
circleSpacing: 15,
|
||||
};
|
||||
|
||||
SwatchesControl.propTypes = {
|
||||
colors: PropTypes.arrayOf(
|
||||
PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.shape({
|
||||
color: PropTypes.string,
|
||||
slug: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
}),
|
||||
])
|
||||
).isRequired,
|
||||
isPalette: PropTypes.string,
|
||||
};
|
||||
|
||||
export default SwatchesControl;
|
||||
Reference in New Issue
Block a user