Skip to content

Commit 54a18a4

Browse files
ryelleryelle
committed
Add color controls
1 parent 9b157b5 commit 54a18a4

File tree

5 files changed

+167
-13
lines changed

5 files changed

+167
-13
lines changed

‎mu-plugins/blocks/modal/render.php‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,25 @@
55

66
$attributes['label'] = $attributes['label'] ?: __( 'Open modal', 'wporg' );
77

8+
$background_color = ! empty( $attributes['customBackgroundColor'] ) ? $attributes['customBackgroundColor'] : "var(--wp--preset--color--{$attributes['backgroundColor']})";
9+
$text_color = ! empty( $attributes['customTextColor'] ) ? $attributes['customTextColor'] : "var(--wp--preset--color--{$attributes['textColor']})";
10+
$overlay_color = ! empty( $attributes['customOverlayColor'] ) ? $attributes['customOverlayColor'] : "var(--wp--preset--color--{$attributes['overlayColor']})";
11+
$close_button_color = ! empty( $attributes['customCloseButtonColor'] ) ? $attributes['customCloseButtonColor'] : "var(--wp--preset--color--{$attributes['closeButtonColor']})";
12+
13+
$style = '';
14+
if ( $background_color ) {
15+
$style .= "--wp--custom--wporg-modal--color--background: {$background_color};";
16+
}
17+
if ( $text_color ) {
18+
$style .= "--wp--custom--wporg-modal--color--text: {$text_color};";
19+
}
20+
if ( $overlay_color ) {
21+
$style .= "--wp--custom--wporg-modal--color--overlay: {$overlay_color};";
22+
}
23+
if ( $close_button_color ) {
24+
$style .= "--wp--custom--wporg-modal--color--close-button: {$close_button_color};";
25+
}
26+
827
// Initial state to pass to Interactivity API.
928
$init_state = [
1029
'isOpen' => false,
@@ -15,7 +34,7 @@
1534

1635
?>
1736
<div
18-
<?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>
37+
<?php echo get_block_wrapper_attributes( [ 'style' => $style ]); // phpcs:ignore ?>
1938
data-wp-interactive="wporg/modal"
2039
data-wp-watch="callbacks.init"
2140
data-wp-on--keydown="actions.handleKeydown"

‎mu-plugins/blocks/modal/src/block.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,34 @@
88
"description": "A modal dialog.",
99
"textdomain": "wporg",
1010
"attributes": {
11+
"backgroundColor": {
12+
"type": "string",
13+
"default": "white"
14+
},
15+
"customBackgroundColor": {
16+
"type": "string"
17+
},
18+
"textColor": {
19+
"type": "string",
20+
"default": "charcoal-1"
21+
},
22+
"customTextColor": {
23+
"type": "string"
24+
},
25+
"closeButtonColor": {
26+
"type": "string",
27+
"default": "charcoal-1"
28+
},
29+
"customCloseButtonColor": {
30+
"type": "string"
31+
},
32+
"overlayColor": {
33+
"type": "string"
34+
},
35+
"customOverlayColor": {
36+
"type": "string",
37+
"default": "#1e1e1ecc"
38+
},
1139
"href": {
1240
"type": "string"
1341
},
@@ -18,6 +46,7 @@
1846
},
1947
"supports": {
2048
"align": false,
49+
"layout": false,
2150
"interactivity": true
2251
},
2352
"editorScript": "file:./index.js",

‎mu-plugins/blocks/modal/src/editor.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,13 @@
1717
display: flex;
1818
align-items: center;
1919
justify-content: center;
20-
background: #1e1e1ecc;
20+
background: var(--wp--custom--wporg-modal--color--overlay);
2121
}
2222
}
2323

2424
.wporg-modal__modal {
2525
position: relative;
2626
width: 35rem;
27-
background: var(--wp--preset--color--white);
27+
background: var(--wp--custom--wporg-modal--color--background);
28+
color: var(--wp--custom--wporg-modal--color--text);
2829
}

‎mu-plugins/blocks/modal/src/index.js‎

Lines changed: 110 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@
22
* WordPress dependencies
33
*/
44
import { __ } from '@wordpress/i18n';
5-
import { InspectorControls, InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
5+
import {
6+
__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
7+
__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
8+
InspectorControls,
9+
InnerBlocks,
10+
RichText,
11+
useBlockProps,
12+
withColors,
13+
} from '@wordpress/block-editor';
614
import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
715
import { registerBlockType } from '@wordpress/blocks';
816
import { useState } from 'react';
@@ -11,18 +19,104 @@ import { useState } from 'react';
1119
* Internal dependencies
1220
*/
1321
import metadata from './block.json';
14-
import './editor.scss';
1522
import './style.scss';
1623

17-
function Edit( { attributes, setAttributes } ) {
24+
function Edit( {
25+
attributes,
26+
setAttributes,
27+
backgroundColor,
28+
setBackgroundColor,
29+
textColor,
30+
setTextColor,
31+
closeButtonColor,
32+
setCloseButtonColor,
33+
overlayColor,
34+
setOverlayColor,
35+
clientId,
36+
} ) {
1837
const [ isModalPreview, setIsModalPreview ] = useState( false );
38+
const { customBackgroundColor, customCloseButtonColor, customTextColor, customOverlayColor } = attributes;
39+
const colorGradientSettings = useMultipleOriginColorsAndGradients();
1940
const classes = [];
2041
if ( isModalPreview ) {
2142
classes.push( 'is-modal-open' );
2243
}
44+
45+
const style = {
46+
'--wp--custom--wporg-modal--color--background': backgroundColor.slug
47+
? `var( --wp--preset--color--${ backgroundColor.slug } )`
48+
: customBackgroundColor,
49+
'--wp--custom--wporg-modal--color--text': textColor.slug
50+
? `var( --wp--preset--color--${ textColor.slug } )`
51+
: customTextColor,
52+
'--wp--custom--wporg-modal--color--close-button': closeButtonColor.slug
53+
? `var( --wp--preset--color--${ closeButtonColor.slug } )`
54+
: customCloseButtonColor,
55+
'--wp--custom--wporg-modal--color--overlay': overlayColor.slug
56+
? `var( --wp--preset--color--${ overlayColor.slug } )`
57+
: customOverlayColor,
58+
};
59+
console.log( style );
60+
const blockProps = useBlockProps( {
61+
className: classes,
62+
style,
63+
} );
64+
2365
return (
2466
<>
25-
<InspectorControls key="modal-preview">
67+
<InspectorControls group="color">
68+
<ColorGradientSettingsDropdown
69+
settings={ [
70+
{
71+
label: __( 'Modal background', 'wporg' ),
72+
colorValue: backgroundColor.color || customBackgroundColor,
73+
onColorChange: ( value ) => {
74+
setBackgroundColor( value );
75+
setAttributes( {
76+
customBackgroundColor: value,
77+
} );
78+
},
79+
},
80+
{
81+
label: __( 'Modal text', 'wporg' ),
82+
colorValue: textColor.color || customTextColor,
83+
onColorChange: ( value ) => {
84+
setTextColor( value );
85+
setAttributes( {
86+
customTextColor: value,
87+
} );
88+
},
89+
},
90+
{
91+
label: __( 'Close button', 'wporg' ),
92+
colorValue: closeButtonColor.color || customCloseButtonColor,
93+
onColorChange: ( value ) => {
94+
setCloseButtonColor( value );
95+
setAttributes( {
96+
customCloseButtonColor: value,
97+
} );
98+
},
99+
},
100+
{
101+
label: __( 'Overlay', 'wporg' ),
102+
colorValue: overlayColor.color || customOverlayColor,
103+
onColorChange: ( value ) => {
104+
setOverlayColor( value );
105+
setAttributes( {
106+
customOverlayColor: value,
107+
} );
108+
},
109+
enableAlpha: true,
110+
},
111+
] }
112+
panelId={ clientId }
113+
hasColorsOrGradients={ false }
114+
disableCustomColors={ false }
115+
__experimentalIsRenderedInSidebar
116+
{ ...colorGradientSettings }
117+
/>
118+
</InspectorControls>
119+
<InspectorControls group="default">
26120
<PanelBody title={ __( 'Settings', 'wporg' ) } initialOpen={ true }>
27121
<ToggleControl
28122
__nextHasNoMarginBottom
@@ -46,7 +140,7 @@ function Edit( { attributes, setAttributes } ) {
46140
/>
47141
</PanelBody>
48142
</InspectorControls>
49-
<div { ...useBlockProps( { className: classes } ) }>
143+
<div { ...blockProps }>
50144
<div className="wp-block-buttons">
51145
<div className="wp-block-button">
52146
<RichText
@@ -60,6 +154,11 @@ function Edit( { attributes, setAttributes } ) {
60154
</div>
61155
<div className="wporg-modal__modal-backdrop" hidden={ ! isModalPreview }>
62156
<div className="wporg-modal__modal">
157+
<button
158+
className="wporg-modal__modal-close"
159+
onClick={ () => setIsModalPreview( false ) }
160+
aria-label={ __( 'Close modal', 'wporg' ) }
161+
></button>
63162
<InnerBlocks
64163
template={ [
65164
[
@@ -75,7 +174,6 @@ function Edit( { attributes, setAttributes } ) {
75174
},
76175
},
77176
},
78-
layout: { type: 'constrained' },
79177
},
80178
[ [ 'core/paragraph' ] ],
81179
],
@@ -89,7 +187,12 @@ function Edit( { attributes, setAttributes } ) {
89187
}
90188

91189
registerBlockType( metadata.name, {
92-
edit: Edit,
190+
edit: withColors( {
191+
backgroundColor: 'background-color',
192+
textColor: 'text-color',
193+
closeButtonColor: 'close-button-color',
194+
overlayColor: 'overlay-color',
195+
} )( Edit ),
93196
save: () => {
94197
return <InnerBlocks.Content />;
95198
},

‎mu-plugins/blocks/modal/src/style.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,16 @@
2121
display: flex;
2222
align-items: center;
2323
justify-content: center;
24-
background: #1e1e1ecc;
24+
background: var(--wp--custom--wporg-modal--color--overlay);
2525
}
2626
}
2727

2828
.wporg-modal__modal {
2929
display: none;
3030
position: relative;
3131
width: 35rem;
32-
background: var(--wp--preset--color--white);
32+
background: var(--wp--custom--wporg-modal--color--background);
33+
color: var(--wp--custom--wporg-modal--color--text);
3334
}
3435

3536
.wporg-modal__modal-close {
@@ -41,6 +42,7 @@
4142
height: 24px;
4243
border: none;
4344
background: transparent;
45+
color: var(--wp--custom--wporg-modal--color--close-button);
4446

4547
&::before {
4648
content: "";
@@ -51,7 +53,7 @@
5153
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'%3E%3Cpath d='m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z'%3E%3C/path%3E%3C/svg%3E");
5254
mask-repeat: no-repeat;
5355
mask-position: center;
54-
background-color: var(--wp--preset--color--white);
56+
background-color: currentcolor;
5557
}
5658
}
5759

0 commit comments

Comments
 (0)