From b1dc0f2de5b806f627a72e841eff47cd538829d9 Mon Sep 17 00:00:00 2001 From: Brady Vercher Date: Thu, 2 Aug 2018 11:55:52 -0700 Subject: [PATCH] Allow the highlight color to be customized. --- README.md | 2 + blocks/code/data.js | 45 +++++++++++++++++-- .../themes/_codemirror-line-highlight.scss | 12 +++++ .../scss/themes/atom-one-dark/_colors.scss | 2 +- .../scss/themes/atom-one-dark/codemirror.scss | 5 +-- .../code/scss/themes/atom-one-dark/prism.scss | 4 ++ .../themes/atom-one-light/codemirror.scss | 5 +-- blocks/code/sidebar.js | 32 +++++++++---- php/BlockType/Code.php | 6 +++ php/Provider/Settings.php | 14 +++++- 10 files changed, 106 insertions(+), 21 deletions(-) create mode 100644 blocks/code/scss/themes/_codemirror-line-highlight.scss diff --git a/README.md b/README.md index 74227e6..b66710a 100644 --- a/README.md +++ b/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 diff --git a/blocks/code/data.js b/blocks/code/data.js index 4813b7e..8e2c349 100644 --- a/blocks/code/data.js +++ b/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 ); - } + }, } } ); diff --git a/blocks/code/scss/themes/_codemirror-line-highlight.scss b/blocks/code/scss/themes/_codemirror-line-highlight.scss new file mode 100644 index 0000000..f3b2349 --- /dev/null +++ b/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; + } +} diff --git a/blocks/code/scss/themes/atom-one-dark/_colors.scss b/blocks/code/scss/themes/atom-one-dark/_colors.scss index 8d94bf7..a23278f 100644 --- a/blocks/code/scss/themes/atom-one-dark/_colors.scss +++ b/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; diff --git a/blocks/code/scss/themes/atom-one-dark/codemirror.scss b/blocks/code/scss/themes/atom-one-dark/codemirror.scss index c7c1d4d..b71624e 100644 --- a/blocks/code/scss/themes/atom-one-dark/codemirror.scss +++ b/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% ); - } } } diff --git a/blocks/code/scss/themes/atom-one-dark/prism.scss b/blocks/code/scss/themes/atom-one-dark/prism.scss index f7f0d9c..4baafa1 100644 --- a/blocks/code/scss/themes/atom-one-dark/prism.scss +++ b/blocks/code/scss/themes/atom-one-dark/prism.scss @@ -192,3 +192,7 @@ code { } } } + +.line-highlight { + background: $syntax-highlight; +} diff --git a/blocks/code/scss/themes/atom-one-light/codemirror.scss b/blocks/code/scss/themes/atom-one-light/codemirror.scss index 2ffeb70..04ac8ce 100644 --- a/blocks/code/scss/themes/atom-one-light/codemirror.scss +++ b/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% ); - } } } diff --git a/blocks/code/sidebar.js b/blocks/code/sidebar.js index aa9973e..f113692 100644 --- a/blocks/code/sidebar.js +++ b/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 ( @@ -39,6 +40,20 @@ class Sidebar extends Component { onChange={ value => dispatch( 'cedaro/code' ).updateTheme( value ) } /> + + dispatch( 'cedaro/code' ).updateHighlightColor( value ) } + /> + + ); @@ -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 ), diff --git a/php/BlockType/Code.php b/php/BlockType/Code.php index 7eec829..d46ba64 100644 --- a/php/BlockType/Code.php +++ b/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 ); + } } /** diff --git a/php/Provider/Settings.php b/php/Provider/Settings.php index 15c367f..769fe19 100644 --- a/php/Provider/Settings.php +++ b/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',