Allow the highlight color to be customized.

README.md

@@ -9,6 +9,8 @@ A Gutenberg block for editing and displaying code with syntax highlighting.
 * Choose a language for each code block
 * Toggle whether or not line numbers should display
 * Multiple syntax highlighting themes available
+* Highlight specific lines to draw attention to them
+* Choose a custom highlight color
 * Easily transform to/from core Code blocks
 * Code is saved as plain text, allowing it to be displayed in feeds and other contexts
 

blocks/code/data.js

@@ -3,6 +3,7 @@ import { apiRequest, data } from 'wp';
 const { registerStore, dispatch } = data;
 
 const DEFAULT_STATE = {
+	highlightColor: '',
 	theme: ''
 };
 
@@ -15,15 +16,48 @@ registerStore( 'cedaro/code', {
 			}
 		}
 
+		if ( action.type === 'SET_HIGHLIGHT_COLOR' ) {
+			return {
+				...state,
+				highlightColor: action.highlightColor
+			}
+		}
+
 		return state;
 	},
 	selectors: {
+		getHighlightColor( state ) {
+			const { highlightColor } = state;
+			return highlightColor;
+		},
 		getTheme( state ) {
 			const { theme } = state;
 			return theme;
-		}
+		},
 	},
 	actions: {
+		setHighlightColor( color ) {
+			return {
+				type: 'SET_HIGHLIGHT_COLOR',
+				highlightColor: color
+			};
+		},
+		updateHighlightColor( color ) {
+			apiRequest( {
+				path: '/wp/v2/settings',
+				method: 'POST',
+				data: {
+					cedaro_code_highlight_color: color || ''
+				}
+			} ).then( response => {
+				dispatch( 'cedaro/code' ).setHighlightColor( response.cedaro_code_highlight_color );
+			} );
+
+			return {
+				type: 'SET_HIGHLIGHT_COLOR',
+				highlightColor: color
+			};
+		},
 		setTheme( theme ) {
 			return {
 				type: 'SET_THEME',
@@ -45,13 +79,18 @@ registerStore( 'cedaro/code', {
 				type: 'SET_THEME',
 				theme: theme
 			};
-		}
+		},
 	},
 	resolvers: {
+		async getHighlightColor() {
+			const settings = await apiRequest( { path: '/wp/v2/settings' } );
+			const { cedaro_code_highlight_color } = settings;
+			dispatch( 'cedaro/code' ).setHighlightColor( cedaro_code_highlight_color );
+		},
 		async getTheme() {
 			const settings = await apiRequest( { path: '/wp/v2/settings' } );
 			const { cedaro_code_theme } = settings;
 			dispatch( 'cedaro/code' ).setTheme( cedaro_code_theme );
-		}
+		},
 	}
 } );

blocks/code/scss/themes/_codemirror-line-highlight.scss

@@ -0,0 +1,12 @@
+.CodeMirror-linebackground-highlight {
+	&.CodeMirror-activeline-background:after {
+		background: rgba( 0, 0, 0, 0.05 );
+		content: "";
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+}

blocks/code/scss/themes/atom-one-dark/_colors.scss

@@ -31,4 +31,4 @@ $syntax-bg:        hsl( $syntax-hue, $syntax-saturation, $syntax-brightness );
 $syntax-gutter:    darken( $syntax-fg, 26% );
 $syntax-guide:     fade-out( $syntax-fg, 0.85 );
 $syntax-accent:    hsl( $syntax-hue, 100%, 66%  );
-$syntax-highlight: #fffbdd;
+$syntax-highlight: #3e4f7f;

blocks/code/scss/themes/atom-one-dark/codemirror.scss

@@ -1,4 +1,5 @@
 @import './colors';
+@import '../codemirror-line-highlight';
 
 .cm-s-atom-one-dark {
 	background: $syntax-bg;
@@ -46,9 +47,5 @@
 
 	.CodeMirror-linebackground-highlight {
 		background-color: $syntax-highlight;
-
-		&.CodeMirror-activeline-background {
-			background-color: darken( $syntax-highlight, 5% );
-		}
 	}
 }

blocks/code/scss/themes/atom-one-dark/prism.scss

@@ -192,3 +192,7 @@ code {
 		}
 	}
 }
+
+.line-highlight {
+	background: $syntax-highlight;
+}

blocks/code/scss/themes/atom-one-light/codemirror.scss

@@ -1,4 +1,5 @@
 @import './colors';
+@import '../codemirror-line-highlight';
 
 .cm-s-atom-one-light {
 	background: hsl( $syntax-hue, $syntax-saturation, $syntax-brightness );
@@ -45,9 +46,5 @@
 
 	.CodeMirror-linebackground-highlight {
 		background-color: $syntax-highlight;
-
-		&.CodeMirror-activeline-background {
-			background-color: darken( $syntax-highlight, 5% );
-		}
 	}
 }

blocks/code/sidebar.js

@@ -1,7 +1,7 @@
 import { components, data, editPost, element, i18n, plugins } from 'wp';
 import { themeChoices } from './settings';
 
-const { PanelBody, SelectControl } = components;
+const { ColorPalette, PanelBody, PanelColor, SelectControl } = components;
 const { Component, Fragment } = element;
 const { dispatch, select, withSelect } = data;
 const { PluginSidebar, PluginSidebarMoreMenuItem } = editPost;
@@ -11,16 +11,17 @@ const { registerPlugin } = plugins;
 class Sidebar extends Component {
 	constructor() {
 		super( ...arguments );
-
-		this.onChangeTheme = this.onChangeTheme.bind( this );
-	}
-
-	onChangeTheme( value ) {
-		dispatch( 'cedaro/code' ).updateTheme( value )
 	}
 
 	render() {
-		const { theme } = this.props;
+		const { highlightColor, theme } = this.props;
+
+		const highlightColors = [
+			{
+				name: __( 'Light Yellow' ),
+				color: '#fffbdd',
+			}
+		];
 
 		return (
 			<Fragment>
@@ -39,6 +40,20 @@ class Sidebar extends Component {
 							onChange={ value => dispatch( 'cedaro/code' ).updateTheme( value ) }
 						/>
 					</PanelBody>
+					<PanelColor title={ __( 'Highlight Color' ) } colorValue={ highlightColor } >
+						<ColorPalette
+							colors={ highlightColors }
+							value={ highlightColor }
+							onChange={ value => dispatch( 'cedaro/code' ).updateHighlightColor( value ) }
+						/>
+					</PanelColor>
+					<style>
+					{
+						`.CodeMirror .CodeMirror-linebackground-highlight {
+							background-color: ${highlightColor};
+						}`
+					}
+					</style>
 				</PluginSidebar>
 			</Fragment>
 		);
@@ -49,6 +64,7 @@ registerPlugin( 'plugin-name', {
 	icon: 'editor-code',
 	render: withSelect( function( select ) {
 		return {
+			highlightColor: select( 'cedaro/code' ).getHighlightColor(),
 			theme: select( 'cedaro/code' ).getTheme()
 		};
 	} )( Sidebar ),

php/BlockType/Code.php

@@ -99,6 +99,12 @@ protected function enqueue_assets() {
 		if ( wp_style_is( $handle, 'registered' ) ) {
 			wp_enqueue_style( $handle );
 		}
+
+		$highlight_color = get_option( 'cedaro_code_highlight_color' );
+		if ( ! empty( $highlight_color ) && wp_style_is( $handle, 'registered' ) ) {
+			$css = ".line-highlight { background: {$highlight_color};}";
+			wp_add_inline_style( $handle, $css );
+		}
 	}
 
 	/**

php/Provider/Settings.php

@@ -33,7 +33,19 @@ public function register_hooks() {
 	 */
 	protected function register_settings() {
 		register_setting(
-			'cedaro_code_theme',
+			'cedaro_code',
+			'cedaro_code_highlight_color',
+			[
+				'type'              => 'string',
+				'description'       => esc_html__( 'Color for highlighted lines.', 'shiny-code' ),
+				'sanitize_callback' => 'sanitize_hex_color',
+				'show_in_rest'      => true,
+				'default'           => '',
+			]
+		);
+
+		register_setting(
+			'cedaro_code',
 			'cedaro_code_theme',
 			[
 				'type'              => 'string',