Dry the color code, explain how values are set

mu-plugins/blocks/modal/index.php

@@ -20,3 +20,43 @@
 function init() {
 	register_block_type( __DIR__ . '/build' );
 }
+
+/**
+ * Get the style declaration for a color attribute.
+ *
+ * The base color attribute (e.g. `backgroundColor`) is the preset color name,
+ * and needs to be converted into a CSS variable.
+ * The custom* color attribute (e.g. `customBackgroundColor`) is a hex value.
+ *
+ * In most cases, the base color attribute has a default value (see block.json),
+ * so there will always be a value for that attribute. This means we can pick
+ * up the custom* color attribute first, and fall back to the preset color if
+ * it's not found. Also, when picked in the color picker, the custom color
+ * will be prefilled with the hex value of the preset color.
+ *
+ * The overlayColor is a special case, it sets a default on `customOverlayColor`.
+ * If only `overlayColor` is set, the custom default will be used. If coding a
+ * modal by hand, make sure to set both `overlayColor` and `customColorOverlay`
+ * when needed (or only `customColorOverlay`).
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $name       The name of the base attribute.
+ *
+ * @return string The style declaration (or empty if no colors set).
+ */
+function get_style_decl_from_attr( $attributes, $name ) {
+	$value = false;
+	if ( ! empty( $attributes[ 'custom' . ucfirst( $name ) ] ) ) {
+		$value = $attributes[ 'custom' . ucfirst( $name ) ];
+	} elseif ( ! empty( $attributes[ $name ] ) ) {
+		$value = "var(--wp--preset--color--{$attributes[$name]})";
+	}
+
+	if ( $value ) {
+		// Get the custom property name.
+		$slug = _wp_to_kebab_case( str_replace( 'Color', '', $name ) );
+		return "--wp--custom--wporg-modal--color--{$slug}: {$value};";
+	}
+
+	return '';
+}

mu-plugins/blocks/modal/render.php

@@ -3,26 +3,15 @@
  * Render the modal.
  */
 
-$attributes['label'] = $attributes['label'] ?: __( 'Open modal', 'wporg' );
+use function WordPressdotorg\MU_Plugins\Modal\get_style_decl_from_attr;
 
-$background_color = ! empty( $attributes['customBackgroundColor'] ) ? $attributes['customBackgroundColor'] : "var(--wp--preset--color--{$attributes['backgroundColor']})";
-$text_color = ! empty( $attributes['customTextColor'] ) ? $attributes['customTextColor'] : "var(--wp--preset--color--{$attributes['textColor']})";
-$overlay_color = ! empty( $attributes['customOverlayColor'] ) ? $attributes['customOverlayColor'] : "var(--wp--preset--color--{$attributes['overlayColor']})";
-$close_button_color = ! empty( $attributes['customCloseButtonColor'] ) ? $attributes['customCloseButtonColor'] : "var(--wp--preset--color--{$attributes['closeButtonColor']})";
+$attributes['label'] = $attributes['label'] ?: __( 'Open modal', 'wporg' );
 
 $style = '';
-if ( $background_color ) {
-	$style .= "--wp--custom--wporg-modal--color--background: {$background_color};";
-}
-if ( $text_color ) {
-	$style .= "--wp--custom--wporg-modal--color--text: {$text_color};";
-}
-if ( $overlay_color ) {
-	$style .= "--wp--custom--wporg-modal--color--overlay: {$overlay_color};";
-}
-if ( $close_button_color ) {
-	$style .= "--wp--custom--wporg-modal--color--close-button: {$close_button_color};";
-}
+$style .= get_style_decl_from_attr( $attributes, 'backgroundColor' );
+$style .= get_style_decl_from_attr( $attributes, 'textColor' );
+$style .= get_style_decl_from_attr( $attributes, 'overlayColor' );
+$style .= get_style_decl_from_attr( $attributes, 'closeButtonColor' );
 
 // Initial state to pass to Interactivity API.
 $init_state = [

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

@@ -1,3 +1,10 @@
+:where(.wp-block-wporg-modal) {
+	--wp--custom--wporg-modal--color--background: var(--wp--preset--color--white);
+	--wp--custom--wporg-modal--color--text: var(--wp--preset--color--charcoal-1);
+	--wp--custom--wporg-modal--color--overlay: #1e1e1ecc;
+	--wp--custom--wporg-modal--color--close-button: var(--wp--preset--color--charcoal-1);
+}
+
 .wp-block-wporg-modal {
 	position: relative;