Skip to content

Commit

Permalink
Move themes panel
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinBatdorf committed Nov 12, 2023
2 parents 671aa09 + 94bad7d commit b489f4e
Show file tree
Hide file tree
Showing 9 changed files with 138 additions and 91 deletions.
2 changes: 2 additions & 0 deletions code-block-pro.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
* @package kevinbatdorf
*/

defined('ABSPATH') or die;

add_action('init', function () {
register_block_type(__DIR__ . '/build');
wp_set_script_translations('kevinbatdorf/code-block-pro', 'code-block-pro');
Expand Down
10 changes: 5 additions & 5 deletions cypress/e2e/themes.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ context('Theme checks', () => {
});

it('Themes can be disabled and hidden from view', () => {
cy.openSideBarPanel('Themes');
cy.openSideBarPanel('Theme');
cy.get('div[aria-label="Editor settings"] button')
.contains('Themes')
.contains('Theme')
.parents('.interface-interface-skeleton__sidebar')
.scrollTo('bottom');
cy.get('#code-block-pro-theme-nord').should('exist');
Expand All @@ -59,15 +59,15 @@ context('Theme checks', () => {
});

it('Themes can be filtered via search', () => {
cy.openSideBarPanel('Themes');
cy.openSideBarPanel('Theme');
cy.get('#code-block-pro-theme-monokai').should('exist');
cy.get('#code-block-pro-search-themes').type('monokai');
cy.get('#code-block-pro-theme-monokai').should('exist');
cy.get('#code-block-pro-theme-dracula').should('not.exist');
});

it('Themes CTA shows twice in panel and once in modal', () => {
cy.openSideBarPanel('Themes');
cy.openSideBarPanel('Theme');
cy.get(`[href^="${MORE_THEMES_URL}"]`).should('have.length', 2);
cy.get('[data-cy="manage-themes"]').should('exist').click();
cy.get(`[href^="${MORE_THEMES_URL}"]`).should('exist');
Expand All @@ -81,7 +81,7 @@ context('Theme checks', () => {
'testing-testing',
() => ({ nord: { name: 'Nord', priority: true } }),
);
cy.openSideBarPanel('Themes');
cy.openSideBarPanel('Theme');
cy.get(`[href^="${MORE_THEMES_URL}"]`).should('not.exist');
cy.get('[data-cy="manage-themes"]').should('exist').click();
cy.get(`[href^="${MORE_THEMES_URL}"]`).should('not.exist');
Expand Down
6 changes: 3 additions & 3 deletions cypress/support/features/theme.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
export const setTheme = (theme) => {
cy.openBlockSettingsSideBar();
cy.openSideBarPanel('Themes');
cy.openSideBarPanel('Theme');
cy.get('div[aria-label="Editor settings"] button')
.contains('Themes')
.contains('Theme')
.parents('.interface-interface-skeleton__sidebar')
.scrollTo('bottom', {
duration: 300,
});
cy.get(`#code-block-pro-theme-${theme}`).should('exist');
cy.get('div[aria-label="Editor settings"] button')
.contains('Themes')
.contains('Theme')
.parents('.interface-interface-skeleton__sidebar')
.scrollTo('top', {
duration: 300,
Expand Down
5 changes: 4 additions & 1 deletion readme.txt
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
=== Code Block Pro - Beautiful Syntax Highlighting ===
Contributors: kbat82, dcooney
Tags: block, code, syntax, snippet, highlighter, JavaScript, php, js, vs code
Tested up to: 6.3
Tested up to: 6.4
Stable tag: 1.24.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Expand Down Expand Up @@ -311,6 +311,9 @@ Themes are rendered inside the editor as you type or make changes, so the code b
== Changelog ==

- Feature: Added two new programming fonts, Cozette and Deja Vu
- Feature: Add pluggable sidebar slots to allow others to add functionality
- Tweak: Renamed Themes to Theme and moved it to the top
- Legal: Added (open source) license files for all fonts

= 1.24.1 - 2023-10-11 =
- Tweak: Line numbers width is now calculated based on the longest line number * font width
Expand Down
42 changes: 6 additions & 36 deletions src/editor/Edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import {
useLayoutEffect,
useRef,
} from '@wordpress/element';
import { escapeHTML } from '@wordpress/escape-html';
import { applyFilters } from '@wordpress/hooks';
import { decodeEntities } from '@wordpress/html-entities';
import { sprintf, __ } from '@wordpress/i18n';
import Editor from 'react-simple-code-editor';
import { useCanEditHTML } from '../hooks/useCanEditHTML';
Expand All @@ -16,6 +14,7 @@ import { useTheme } from '../hooks/useTheme';
import { useLanguageStore } from '../state/language';
import { AttributesPropsAndSetter, Lang } from '../types';
import { parseJSONArrayWithRanges } from '../util/arrayHelpers';
import { decode, encode } from '../util/code';
import { computeLineHighlightColor } from '../util/colors';
import { getTextWidth } from '../util/fonts';
import { getEditorLanguage } from '../util/languages';
Expand Down Expand Up @@ -54,7 +53,7 @@ export const Edit = ({
const [editorLeftPadding, setEditorLeftPadding] = useState(0);
const codeAreaRef = useRef<HTMLDivElement>(null);
const handleChange = (code: string) =>
setAttributes({ code: encode(code) });
setAttributes({ code: encode(code, attributes) });
const { previousLanguage } = useLanguageStore();
const { highlighter, error, loading } = useTheme({
theme,
Expand All @@ -63,35 +62,6 @@ export const Edit = ({
const hasFooter = footerType && footerType !== 'none';
useDefaults({ attributes, setAttributes });

const decode = useCallback(
(code: string) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return decodeURIComponent(code);
} catch (e) {
return code;
}
}
return decodeEntities(code);
},
[useDecodeURI],
);
const encode = useCallback(
(code: string) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return encodeURIComponent(code);
} catch (e) {
return code;
}
}
return escapeHTML(code);
},
[useDecodeURI],
);

const getHighlights = useCallback(() => {
if (!enableHighlighting) return [];
return parseJSONArrayWithRanges(lineHighlights, startingLineNumber).map(
Expand Down Expand Up @@ -123,7 +93,7 @@ export const Edit = ({
if (!highlighter) return;
const l = (language ?? previousLanguage) as Lang | 'ansi';
const lang = getEditorLanguage(l);
const c = decode(code);
const c = decode(code, { useDecodeURI });
const lineOptions = [
...getHighlights(),
...getBlurs(),
Expand Down Expand Up @@ -164,7 +134,7 @@ export const Edit = ({
lineBlurs,
getBlurs,
getHighlights,
decode,
useDecodeURI,
]);

useLayoutEffect(() => {
Expand Down Expand Up @@ -241,7 +211,7 @@ export const Edit = ({
</div>
)}
<Editor
value={decode(code)}
value={decode(code, { useDecodeURI })}
onValueChange={handleChange}
// eslint-disable-next-line jsx-a11y/no-autofocus -- Only autofocus in the unintended case that there is no code (e.g. on initial insert)
autoFocus={!code}
Expand Down Expand Up @@ -272,7 +242,7 @@ export const Edit = ({
}
highlight={(code: string) =>
highlighter
?.codeToHtml(decode(code), {
?.codeToHtml(decode(code, { useDecodeURI }), {
lang: getEditorLanguage(
language ?? previousLanguage,
),
Expand Down
29 changes: 29 additions & 0 deletions src/editor/components/SlotFactory.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { createSlotFill } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { AttributesPropsAndSetter } from '../../types';
import { decode, encode } from '../../util/code';
import { languages } from '../../util/languages';

export const SlotFactory = ({
name,
attributes,
setAttributes,
}: AttributesPropsAndSetter & { name: string }) => {
const { Slot } = useMemo(() => {
return createSlotFill(name);
}, [name]);
return (
<Slot
fillProps={{
attributes,
setAttributes,
languages,
getCode: () => decode(attributes.code, attributes),
setCode: (code: string) =>
setAttributes({
code: encode(code, attributes),
}),
}}
/>
);
};
2 changes: 1 addition & 1 deletion src/editor/components/ThemesPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const ThemesPanel = ({
const ready = useSettingsStoreReady();
return (
<PanelBody
title={__('Themes', 'code-block-pro')}
title={__('Theme', 'code-block-pro')}
initialOpen={bringAttentionToThemes ?? false}>
{ready && <ThemeFilter search={search} setSearch={setSearch} />}
{ready && (
Expand Down
106 changes: 61 additions & 45 deletions src/editor/controls/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
import { FooterSelect } from '../components/FooterSelect';
import { HeaderSelect } from '../components/HeaderSelect';
import { HeightPanel } from '../components/HeightPanel';
import { SlotFactory } from '../components/SlotFactory';
import { ThemesPanel } from '../components/ThemesPanel';
import { MissingPermissionsTip } from '../components/misc/MissingPermissions';
import { BlurControl } from './BlurControl';
Expand Down Expand Up @@ -79,6 +80,16 @@ export const SidebarControls = ({

return (
<InspectorControls>
<SlotFactory
name="CodeBlockPro.Sidebar.Start"
attributes={attributes}
setAttributes={setAttributes}
/>
<ThemesPanel
bringAttentionToThemes={bringAttention === 'theme-select'}
attributes={attributes}
setAttributes={setAttributes}
/>
<PanelBody
title={__('Language', 'code-block-pro')}
initialOpen={bringAttention === 'language-select'}>
Expand Down Expand Up @@ -128,49 +139,6 @@ export const SidebarControls = ({
</BaseControl>
</div>
</PanelBody>
<PanelBody
title={__('Line Settings', 'code-block-pro')}
initialOpen={false}>
<div className="code-block-pro-editor">
<BaseControl id="code-block-pro-show-line-numbers">
<CheckboxControl
data-cy="show-line-numbers"
label={__('Line numbers', 'code-block-pro')}
help={__(
'Enable line numbers and set a starting number.',
'code-block-pro',
)}
checked={attributes.lineNumbers}
onChange={(lineNumbers) => {
setAttributes({ lineNumbers });
updateThemeHistory({ lineNumbers });
}}
/>
{attributes.lineNumbers && (
<BaseControl id="code-block-pro-line-number-start">
<TextControl
id="code-block-pro-line-number-start"
spellCheck={false}
autoComplete="off"
label={__('Start from', 'code-block-pro')}
onChange={(startingLineNumber) => {
setAttributes({ startingLineNumber });
}}
value={attributes.startingLineNumber}
/>
</BaseControl>
)}
</BaseControl>
<HighlightingControl
attributes={attributes}
setAttributes={setAttributes}
/>
<BlurControl
attributes={attributes}
setAttributes={setAttributes}
/>
</div>
</PanelBody>
<PanelBody
title={__('Header Type', 'code-block-pro')}
initialOpen={false}>
Expand Down Expand Up @@ -256,8 +224,51 @@ export const SidebarControls = ({
}}
/>
</PanelBody>
<ThemesPanel
bringAttentionToThemes={bringAttention === 'theme-select'}
<PanelBody
title={__('Line Settings', 'code-block-pro')}
initialOpen={false}>
<div className="code-block-pro-editor">
<BaseControl id="code-block-pro-show-line-numbers">
<CheckboxControl
data-cy="show-line-numbers"
label={__('Line numbers', 'code-block-pro')}
help={__(
'Enable line numbers and set a starting number.',
'code-block-pro',
)}
checked={attributes.lineNumbers}
onChange={(lineNumbers) => {
setAttributes({ lineNumbers });
updateThemeHistory({ lineNumbers });
}}
/>
{attributes.lineNumbers && (
<BaseControl id="code-block-pro-line-number-start">
<TextControl
id="code-block-pro-line-number-start"
spellCheck={false}
autoComplete="off"
label={__('Start from', 'code-block-pro')}
onChange={(startingLineNumber) => {
setAttributes({ startingLineNumber });
}}
value={attributes.startingLineNumber}
/>
</BaseControl>
)}
</BaseControl>
<HighlightingControl
attributes={attributes}
setAttributes={setAttributes}
/>
<BlurControl
attributes={attributes}
setAttributes={setAttributes}
/>
</div>
</PanelBody>
<SlotFactory
name="CodeBlockPro.Sidebar.Middle"
attributes={attributes}
setAttributes={setAttributes}
/>
Expand Down Expand Up @@ -395,6 +406,11 @@ export const SidebarControls = ({
/>
</BaseControl>
</PanelBody>
<SlotFactory
name="CodeBlockPro.Sidebar.End"
attributes={attributes}
setAttributes={setAttributes}
/>
</InspectorControls>
);
};
27 changes: 27 additions & 0 deletions src/util/code.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { escapeHTML } from '@wordpress/escape-html';
import { decodeEntities } from '@wordpress/html-entities';
import { Attributes } from '../types';

export const encode = (code: string, { useDecodeURI }: Partial<Attributes>) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return encodeURIComponent(code);
} catch (e) {
return code;
}
}
return escapeHTML(code);
};

export const decode = (code: string, { useDecodeURI }: Partial<Attributes>) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return decodeURIComponent(code);
} catch (e) {
return code;
}
}
return decodeEntities(code);
};

0 comments on commit b489f4e

Please sign in to comment.