diff --git a/package-lock.json b/package-lock.json index bc47fc3..ebad81e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1703,6 +1703,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "cli-boxes": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz", diff --git a/package.json b/package.json index e38ce14..4bb1cd7 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "@wordpress/escape-html": "1.9.0", "cgb-scripts": "1.23.0", + "classnames": "2.2.6", "npm-force-resolutions": "0.0.3" }, "resolutions": { diff --git a/src/code-block/edit.js b/src/code-block/edit.js index f2fb7c5..e4d0d0e 100644 --- a/src/code-block/edit.js +++ b/src/code-block/edit.js @@ -14,7 +14,7 @@ export default function editSyntaxHighlighterBlock( { attributes, setAttributes, const editView =
setAttributes( { content: nextContent } ) } placeholder={ __( 'Tip: you can choose a code language from the block settings.', 'syntaxhighlighter' ) } diff --git a/src/code-block/editor.scss b/src/code-block/editor.scss index 78627a3..2a5215a 100644 --- a/src/code-block/editor.scss +++ b/src/code-block/editor.scss @@ -1,8 +1 @@ -.wp-block-syntaxhighlighter { - - &__language_toolbar { - .components-dropdown-menu__menu-item.is-active { - font-weight: bold; - } - } -} \ No newline at end of file +@import '../toolbar-dropdown/style' diff --git a/src/code-block/settings.js b/src/code-block/settings.js index 7f332d4..e46d3de 100644 --- a/src/code-block/settings.js +++ b/src/code-block/settings.js @@ -4,6 +4,7 @@ import { SelectControl, ToggleControl, TextControl, + ToolbarGroup, } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; @@ -39,7 +40,7 @@ export default ( { attributes, setAttributes } ) => { } blockSettings.push( - <PanelRow> + <PanelRow key="code-language"> <SelectControl label={ __( 'Code Language', 'syntaxhighlighter' ) } value={ language } @@ -55,7 +56,7 @@ export default ( { attributes, setAttributes } ) => { // Line numbers if ( settings.lineNumbers.supported ) { blockSettings.push( - <PanelRow> + <PanelRow key="show-line-numbers"> <ToggleControl label={ __( 'Show Line Numbers', 'syntaxhighlighter' ) } checked={ lineNumbers } @@ -68,7 +69,7 @@ export default ( { attributes, setAttributes } ) => { // First line number if ( lineNumbers && settings.firstLineNumber.supported ) { blockSettings.push( - <PanelRow> + <PanelRow key="first-line-number"> <TextControl label={ __( 'First Line Number', 'syntaxhighlighter' ) } type="number" @@ -84,7 +85,7 @@ export default ( { attributes, setAttributes } ) => { // Highlight line(s) if ( settings.highlightLines.supported ) { blockSettings.push( - <PanelRow> + <PanelRow key="highlight-lines"> <TextControl label={ __( 'Highlight Lines', 'syntaxhighlighter' ) } value={ highlightLines } @@ -98,7 +99,7 @@ export default ( { attributes, setAttributes } ) => { // Wrap long lines if ( settings.wrapLines.supported ) { blockSettings.push( - <PanelRow> + <PanelRow key="wrap-long-lines"> <ToggleControl label={ __( 'Wrap Long Lines', 'syntaxhighlighter' ) } checked={ wrapLines } @@ -111,7 +112,7 @@ export default ( { attributes, setAttributes } ) => { // Make URLs clickable if ( settings.makeURLsClickable.supported ) { blockSettings.push( - <PanelRow> + <PanelRow key="make-urls-clickable"> <ToggleControl label={ __( 'Make URLs Clickable', 'syntaxhighlighter' ) } checked={ makeURLsClickable } @@ -124,7 +125,7 @@ export default ( { attributes, setAttributes } ) => { // Quick code if ( settings.quickCode.supported ) { blockSettings.push( - <PanelRow> + <PanelRow key="edit-mode"> <ToggleControl label={ __( 'Enable edit mode on double click', 'syntaxhighlighter' ) } checked={ quickCode } @@ -136,7 +137,9 @@ export default ( { attributes, setAttributes } ) => { return <Fragment> <BlockControls> - { toolbar } + <ToolbarGroup> + { toolbar } + </ToolbarGroup> </BlockControls> <InspectorControls key="syntaxHighlighterInspectorControls"> <PanelBody title={ __( 'Settings', 'syntaxhighlighter' ) }> diff --git a/src/code-block/toolbar.language.js b/src/code-block/toolbar.language.js index a159f1d..2091873 100644 --- a/src/code-block/toolbar.language.js +++ b/src/code-block/toolbar.language.js @@ -1,27 +1,17 @@ -import { - ToolbarGroup, -} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import ToolbarDropdown from '../toolbar-dropdown'; + export default ( { attributes, setAttributes, options } ) => { const { language } = attributes; - const languageControl = ( { label, value } ) => ( { - title: label, - onClick: () => setAttributes( { language: value } ), - isActive: value === language, - } ); - - const selectedLanguage = options.find( o => o.value === language ); - - return <ToolbarGroup - isCollapsed={ true } - noIcons={ true } - label={ __( 'Code Language', 'syntaxhighlighter' ) } - icon={ null } - menuProps={ { className: 'wp-block-syntaxhighlighter__language_toolbar' } } - toggleProps={ { children: <b> { selectedLanguage.label } </b> } } - controls={ options.map( languageControl ) } - > - </ToolbarGroup>; + return ( + <ToolbarDropdown + key="code-language" + options={ options } + optionsLabel={ __( 'Code Language', 'syntaxhighlighter' ) } + value={ language } + onChange={ ( value ) => setAttributes( { language: value } ) } + /> + ); }; diff --git a/src/toolbar-dropdown/index.js b/src/toolbar-dropdown/index.js new file mode 100644 index 0000000..4718fde --- /dev/null +++ b/src/toolbar-dropdown/index.js @@ -0,0 +1,91 @@ +import classnames from 'classnames'; +import { + Button, + Dropdown, + MenuGroup, + MenuItem, + NavigableMenu, +} from '@wordpress/components'; + +/** + * @typedef {Object} DropdownOption + * + * @property {string} label Option label. + * @property {string} value Option value. + */ +/** + * Dropdown for the editor toolbar. + * + * @param {Object} props Component props. + * @param {DropdownOption[]} props.options Dropdown options. + * @param {string} [props.optionsLabel] Options label. + * @param {Object} [props.icon] Icon for the toolbar. + * @param {string} props.value Current dropdown value. + * @param {Function} props.onChange Dropdown change callback, which receive the new value as argument. + * + * @return {Object} React component. + */ +const ToolbarDropdown = ( { + options, + optionsLabel, + icon, + value, + onChange, + ...props +} ) => { + const selectedOption = options.find( ( option ) => value === option.value ); + + return ( + <Dropdown + className="syntaxhighlighter-toolbar-dropdown" + popoverProps={ { + isAlternate: true, + position: 'bottom right left', + focusOnMount: true, + className: classnames( + 'syntaxhighlighter-toolbar-dropdown__popover' + ), + } } + renderToggle={ ( { isOpen, onToggle } ) => ( + <Button + onClick={ onToggle } + icon={ icon } + aria-expanded={ isOpen } + aria-haspopup="true" + children={ + selectedOption ? selectedOption.label : '' + } + /> + ) } + renderContent={ ( { onClose } ) => ( + <NavigableMenu role="menu" stopNavigationEvents> + <MenuGroup label={ optionsLabel }> + { options.map( ( option ) => { + const isSelected = + option.value === selectedOption.value; + return ( + <MenuItem + key={ option.value } + role="menuitemradio" + isSelected={ isSelected } + className={ classnames( + 'syntaxhighlighter-toolbar-dropdown__option', + { 'is-selected': isSelected }, + ) } + onClick={ () => { + onChange( option.value ); + onClose(); + } } + children={ option.label } + /> + ); + } ) } + </MenuGroup> + </NavigableMenu> + ) } + { ...props } + /> + ); +}; + +export default ToolbarDropdown; diff --git a/src/toolbar-dropdown/style.scss b/src/toolbar-dropdown/style.scss new file mode 100644 index 0000000..37a03f1 --- /dev/null +++ b/src/toolbar-dropdown/style.scss @@ -0,0 +1,23 @@ +.syntaxhighlighter-toolbar-dropdown { + &__popover.components-popover[data-x-axis='right'] { + .components-popover__content { + margin-left: 0; + min-width: 300px; + } + } + + &__option { + text-align: left; + height: auto; + min-height: 32px; + border-radius: 2px; + + .components-menu-item__item { + white-space: normal; + } + + &.is-selected { + background-color: #f0f0f0; + } + } +}