diff --git a/classes/class-classic-editor.php b/classes/class-classic-editor.php index c0eb927..11abccc 100644 --- a/classes/class-classic-editor.php +++ b/classes/class-classic-editor.php @@ -153,7 +153,7 @@ public function admin_footer() {

- +

- +

@@ -172,7 +172,7 @@ public function admin_footer() {

- +

- +

diff --git a/src/admin/components/header/index.js b/src/admin/components/header/index.js index 8fa8e84..481ae72 100644 --- a/src/admin/components/header/index.js +++ b/src/admin/components/header/index.js @@ -2,6 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { + Icon, + __experimentalHeading as Heading, + __experimentalHStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; /** * Internal dependencies @@ -14,18 +20,16 @@ export default function Header() { return (
-

- { BlockIcon } - { __( 'Custom HTML Block Extension', 'custom-html-block-extension' ) } -

- + + + + { __( 'Custom HTML Block Extension', 'custom-html-block-extension' ) } + + + + + +
); diff --git a/src/admin/components/header/style.scss b/src/admin/components/header/style.scss index 9c5089c..f5e0340 100644 --- a/src/admin/components/header/style.scss +++ b/src/admin/components/header/style.scss @@ -1,29 +1,11 @@ .chbe-admin-header { - padding: $grid-unit-20 0 $grid-unit-10; + padding: $grid-unit-20 0; background-color: $white; - .chbe-admin-header__title { - display: flex; - gap: $grid-unit-20; - align-items: center; - justify-content: center; - margin: 0 0 $grid-unit-10; - line-height: 1; - - @media screen and (max-width: 782px) { - font-size: 20px; - } - - svg { - width: $grid-unit-40; - } - } - .chbe-admin-header__info { position: absolute; top: 0; - right: $grid-unit-20; - margin: 0; + right: $grid-unit-20 + $grid-unit-05; @media screen and (max-width: 782px) { position: static; diff --git a/src/admin/components/shortcut/index.js b/src/admin/components/shortcut/index.js index 2bad9c5..71788f5 100644 --- a/src/admin/components/shortcut/index.js +++ b/src/admin/components/shortcut/index.js @@ -4,7 +4,13 @@ import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { info } from '@wordpress/icons'; -import { Button, ExternalLink, Modal } from '@wordpress/components'; +import { + Button, + ExternalLink, + Modal, + __experimentalText as Text, + __experimentalVStack as VStack, +} from '@wordpress/components'; export default function Shortcut() { const [ isModalOpen, setIsModalOpen ] = useState( false ); @@ -12,7 +18,6 @@ export default function Shortcut() { return ( <> - -
  • - -
    • - + + + + { isModalOpen && ( { diff --git a/src/admin/editor-config/components/controls/style.scss b/src/admin/editor-config/components/controls/style.scss deleted file mode 100644 index 14727d2..0000000 --- a/src/admin/editor-config/components/controls/style.scss +++ /dev/null @@ -1,14 +0,0 @@ -.chbe-admin-editor-config-controls { - display: flex; - justify-content: space-between; - margin: 0; - - .chbe-admin-editor-config-controls__item { - margin: 0; - } - - .chbe-admin-editor-config-controls__submit { - padding-right: $grid-unit-50; - padding-left: $grid-unit-50; - } -} diff --git a/src/admin/editor-config/components/editor-preview/index.js b/src/admin/editor-config/components/editor-preview/index.js index ccd1e26..dd8c01b 100644 --- a/src/admin/editor-config/components/editor-preview/index.js +++ b/src/admin/editor-config/components/editor-preview/index.js @@ -44,9 +44,7 @@ export default function EditorPreview( { isEditorDisabled, setFontWeights } ) {
    { ! isEditorDisabled && ( { - setEditorMode( mode ); - }; - const debouncedOnChangeSearchQuery = useDebounce( ( value ) => { setSearchQuery( value ); }, 100 ); @@ -34,31 +36,34 @@ export default function Filter( { editorMode, setEditorMode, searchQuery, setSea }, [ searchQueryState ] ); return ( -
    - - { MODES.map( ( mode, index ) => ( - - ) ) } - - -
    + + + + { MODES.map( ( mode ) => ( + + ) ) } + + + + + + ); } diff --git a/src/admin/editor-config/components/filter/style.scss b/src/admin/editor-config/components/filter/style.scss index 02072b7..203e222 100644 --- a/src/admin/editor-config/components/filter/style.scss +++ b/src/admin/editor-config/components/filter/style.scss @@ -1,26 +1,6 @@ .chbe-admin-editor-config-filter { - display: flex; - gap: $grid-unit-20; - .chbe-admin-editor-config-filter__mode { - display: flex; - flex: 1; - - .components-button { - flex: 1; - justify-content: center; - - &.is-secondary { - background: $white; - } - } - } - - .chbe-admin-editor-config-filter__search { - flex: 1; - - .components-input-control__container { - background: $white; - } + .components-input-control__container { + background: $white; } } diff --git a/src/admin/editor-config/components/item-help/index.js b/src/admin/editor-config/components/item-help/index.js index 5db9e08..a98e76a 100644 --- a/src/admin/editor-config/components/item-help/index.js +++ b/src/admin/editor-config/components/item-help/index.js @@ -4,7 +4,14 @@ import { __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { info } from '@wordpress/icons'; -import { Button, Modal, ToggleControl } from '@wordpress/components'; +import { + Button, + Modal, + ToggleControl, + __experimentalText as Text, + __experimentalHeading as Heading, + __experimentalVStack as VStack, +} from '@wordpress/components'; export default function ItemHelp( { title, @@ -19,8 +26,6 @@ export default function ItemHelp( { } ) { const [ isModalOpen, setIsModalOpen ] = useState( false ); - const DescriptionTag = typeof description === 'object' ? 'div' : 'p'; - return ( <> { isModalOpen && ( @@ -29,26 +34,29 @@ export default function ItemHelp( { className="chbe-admin-editor-config-item-help-modal" onRequestClose={ () => setIsModalOpen( false ) } > -
    + { description && ( - + { description } - + ) } { isToggle && ( -

    + { defaultToggle ? __( 'Defaults to enable.', 'custom-html-block-extension' ) : __( 'Defaults to disable.', 'custom-html-block-extension' ) } -

    + ) } { items.length > 0 && (
    { items.map( ( item, index ) => ( -
    -

    + + { item.isDefault ? sprintf( /* translators: %s is replaced with the setting label. */ @@ -56,7 +64,7 @@ export default function ItemHelp( { item.label ) : item.label } -

    + - { item.description &&

    { item.description }

    } -
    + { item.description && { item.description } } + ) ) }
    ) } @@ -84,21 +91,25 @@ export default function ItemHelp( { ) } { isToggle && ( { onChange( newValue ); setIsModalOpen( false ); } } + label={ title } /> ) } -
    + ) } - ) ) } - - + + + { items.map( ( item ) => ( + + ) ) } + -
    + ); } diff --git a/src/admin/editor-config/editor-options/minimap/size.js b/src/admin/editor-config/editor-options/minimap/size.js index 32b5b92..6b9225c 100644 --- a/src/admin/editor-config/editor-options/minimap/size.js +++ b/src/admin/editor-config/editor-options/minimap/size.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -65,8 +65,9 @@ export default function MinimapSize() { }; return ( -
    + { @@ -81,6 +82,6 @@ export default function MinimapSize() { colCount="3" value={ editorOptions.minimap.size } /> -
    + ); } diff --git a/src/admin/editor-config/editor-options/mouse-wheel-scroll-sensitivity.js b/src/admin/editor-config/editor-options/mouse-wheel-scroll-sensitivity.js index 21399aa..a871078 100644 --- a/src/admin/editor-config/editor-options/mouse-wheel-scroll-sensitivity.js +++ b/src/admin/editor-config/editor-options/mouse-wheel-scroll-sensitivity.js @@ -31,15 +31,14 @@ export default function MouseWheelScrollSensitivity() { }; return ( -
    - -
    + ); } diff --git a/src/admin/editor-config/editor-options/mouse-wheel-zoom.js b/src/admin/editor-config/editor-options/mouse-wheel-zoom.js index 38b5afe..bec42bd 100644 --- a/src/admin/editor-config/editor-options/mouse-wheel-zoom.js +++ b/src/admin/editor-config/editor-options/mouse-wheel-zoom.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function MouseWheelZoom() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/multi-cursor-modifier.js b/src/admin/editor-config/editor-options/multi-cursor-modifier.js index d5094e0..17a0419 100644 --- a/src/admin/editor-config/editor-options/multi-cursor-modifier.js +++ b/src/admin/editor-config/editor-options/multi-cursor-modifier.js @@ -3,7 +3,12 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { BaseControl, ButtonGroup, Button } from '@wordpress/components'; +import { + __experimentalHStack as HStack, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; +import { isAppleOS } from '@wordpress/keycodes'; /** * Internal dependencies @@ -25,13 +30,15 @@ export default function MultiCursorModifier() { const items = [ { - label: __( 'Alt (Option)', 'custom-html-block-extension' ), - image: 'editor-options/multi-cursor-paste_1.gif', + label: isAppleOS() + ? __( 'Option', 'custom-html-block-extension' ) + : __( 'Alt', 'custom-html-block-extension' ), value: 'alt', }, { - label: __( 'Ctrl (Command)', 'custom-html-block-extension' ), - image: 'editor-options/multi-cursor-paste_2.gif', + label: isAppleOS() + ? __( 'Command', 'custom-html-block-extension' ) + : __( 'Ctrl', 'custom-html-block-extension' ), value: 'ctrlCmd', isDefault: true, }, @@ -45,22 +52,19 @@ export default function MultiCursorModifier() { }; return ( -
    - - { title } - - { items.map( ( item, index ) => ( - - ) ) } - - + + + { items.map( ( item ) => ( + + ) ) } + -
    + ); } diff --git a/src/admin/editor-config/editor-options/multi-cursor-paste.js b/src/admin/editor-config/editor-options/multi-cursor-paste.js index f77c531..ff214ae 100644 --- a/src/admin/editor-config/editor-options/multi-cursor-paste.js +++ b/src/admin/editor-config/editor-options/multi-cursor-paste.js @@ -3,7 +3,11 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { BaseControl, ButtonGroup, Button } from '@wordpress/components'; +import { + __experimentalHStack as HStack, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; /** * Internal dependencies @@ -17,7 +21,7 @@ export default function MultiCursorPaste() { const { searchQuery } = useContext( EditorConfigContext ); const title = __( - 'Behaviour when pasting a text with the line count equal to the cursor count', + 'Behavior when pasting text with matching line and cursor counts', 'custom-html-block-extension' ); const isMatch = searchQuery && title.toLowerCase().includes( searchQuery.toLowerCase() ); @@ -48,28 +52,25 @@ export default function MultiCursorPaste() { }; return ( -
    - - { title } - - { items.map( ( item, index ) => ( - - ) ) } - - + + + { items.map( ( item ) => ( + + ) ) } + -
    + ); } diff --git a/src/admin/editor-config/editor-options/occurrences-highlight.js b/src/admin/editor-config/editor-options/occurrences-highlight.js index 08a1429..2ca26e4 100644 --- a/src/admin/editor-config/editor-options/occurrences-highlight.js +++ b/src/admin/editor-config/editor-options/occurrences-highlight.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function OccurrencesHighlight() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/overview-ruler-border.js b/src/admin/editor-config/editor-options/overview-ruler-border.js index 493979a..21dee4c 100644 --- a/src/admin/editor-config/editor-options/overview-ruler-border.js +++ b/src/admin/editor-config/editor-options/overview-ruler-border.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function OverviewRulerBorder() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/padding/bottom.js b/src/admin/editor-config/editor-options/padding/bottom.js index d000c0d..0cbe452 100644 --- a/src/admin/editor-config/editor-options/padding/bottom.js +++ b/src/admin/editor-config/editor-options/padding/bottom.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -36,8 +36,10 @@ export default function PaddingBottom() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/padding/top.js b/src/admin/editor-config/editor-options/padding/top.js index 957623a..359f2f9 100644 --- a/src/admin/editor-config/editor-options/padding/top.js +++ b/src/admin/editor-config/editor-options/padding/top.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -36,8 +36,10 @@ export default function PaddingTop() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/quick-suggestions-delay.js b/src/admin/editor-config/editor-options/quick-suggestions-delay.js index 13db456..c541027 100644 --- a/src/admin/editor-config/editor-options/quick-suggestions-delay.js +++ b/src/admin/editor-config/editor-options/quick-suggestions-delay.js @@ -3,7 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -32,8 +32,9 @@ export default function QuickSuggestionsDelay() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/quick-suggestions.js b/src/admin/editor-config/editor-options/quick-suggestions.js index 21832e6..4c1aca2 100644 --- a/src/admin/editor-config/editor-options/quick-suggestions.js +++ b/src/admin/editor-config/editor-options/quick-suggestions.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -32,8 +32,9 @@ export default function QuickSuggestions() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/render-control-characters.js b/src/admin/editor-config/editor-options/render-control-characters.js index 036afd6..07909e2 100644 --- a/src/admin/editor-config/editor-options/render-control-characters.js +++ b/src/admin/editor-config/editor-options/render-control-characters.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function RenderControlCharacters() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/render-final-newline.js b/src/admin/editor-config/editor-options/render-final-newline.js index 7696d8c..5208cdd 100644 --- a/src/admin/editor-config/editor-options/render-final-newline.js +++ b/src/admin/editor-config/editor-options/render-final-newline.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -34,8 +34,9 @@ export default function RenderFinalNewline() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/render-indent-guides.js b/src/admin/editor-config/editor-options/render-indent-guides.js index 6ca4efe..02dda84 100644 --- a/src/admin/editor-config/editor-options/render-indent-guides.js +++ b/src/admin/editor-config/editor-options/render-indent-guides.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function RenderIndentGuides() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/render-line-highlight-only-when-focus.js b/src/admin/editor-config/editor-options/render-line-highlight-only-when-focus.js index 7ad6007..508e619 100644 --- a/src/admin/editor-config/editor-options/render-line-highlight-only-when-focus.js +++ b/src/admin/editor-config/editor-options/render-line-highlight-only-when-focus.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -34,8 +34,9 @@ export default function RenderLineHighlightOnlyWhenFocus() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/render-line-highlight.js b/src/admin/editor-config/editor-options/render-line-highlight.js index 4a4134c..4e1d544 100644 --- a/src/admin/editor-config/editor-options/render-line-highlight.js +++ b/src/admin/editor-config/editor-options/render-line-highlight.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -55,8 +55,9 @@ export default function RenderLineHighlight() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/render-whitespace.js b/src/admin/editor-config/editor-options/render-whitespace.js index 7d24ef0..8a0901b 100644 --- a/src/admin/editor-config/editor-options/render-whitespace.js +++ b/src/admin/editor-config/editor-options/render-whitespace.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -63,8 +63,9 @@ export default function RenderWhitespace() { }; return ( -
    + { @@ -78,6 +79,6 @@ export default function RenderWhitespace() { items={ items } value={ editorOptions.renderWhitespace } /> -
    + ); } diff --git a/src/admin/editor-config/editor-options/rounded-selection.js b/src/admin/editor-config/editor-options/rounded-selection.js index 1625cd2..71175ab 100644 --- a/src/admin/editor-config/editor-options/rounded-selection.js +++ b/src/admin/editor-config/editor-options/rounded-selection.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function RoundedSelection() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/rulers.js b/src/admin/editor-config/editor-options/rulers.js index 823362f..a1a5475 100644 --- a/src/admin/editor-config/editor-options/rulers.js +++ b/src/admin/editor-config/editor-options/rulers.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -32,8 +32,9 @@ export default function Rulers() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/scroll-beyond-last-column.js b/src/admin/editor-config/editor-options/scroll-beyond-last-column.js index b244159..f7aa457 100644 --- a/src/admin/editor-config/editor-options/scroll-beyond-last-column.js +++ b/src/admin/editor-config/editor-options/scroll-beyond-last-column.js @@ -3,7 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -35,8 +35,9 @@ export default function ScrollBeyondLastColumn() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/scroll-beyond-last-line.js b/src/admin/editor-config/editor-options/scroll-beyond-last-line.js index 81ba441..705be72 100644 --- a/src/admin/editor-config/editor-options/scroll-beyond-last-line.js +++ b/src/admin/editor-config/editor-options/scroll-beyond-last-line.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function ScrollBeyondLastLine() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/always-consume-mouse-wheel.js b/src/admin/editor-config/editor-options/scrollbar/always-consume-mouse-wheel.js index ad8d64c..fc95e0d 100644 --- a/src/admin/editor-config/editor-options/scrollbar/always-consume-mouse-wheel.js +++ b/src/admin/editor-config/editor-options/scrollbar/always-consume-mouse-wheel.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -35,8 +35,10 @@ export default function ScrollbarAlwaysConsumeMouseWheel() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/arrow-size.js b/src/admin/editor-config/editor-options/scrollbar/arrow-size.js index b7f3e7d..f953ce7 100644 --- a/src/admin/editor-config/editor-options/scrollbar/arrow-size.js +++ b/src/admin/editor-config/editor-options/scrollbar/arrow-size.js @@ -3,7 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useContext, useEffect, useState } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; import { useDebounce } from '@wordpress/compose'; /** @@ -51,8 +51,10 @@ export default function ScrollbarArrowSize() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/horizontal-has-arrows.js b/src/admin/editor-config/editor-options/scrollbar/horizontal-has-arrows.js index 14cfd5d..b1a28f5 100644 --- a/src/admin/editor-config/editor-options/scrollbar/horizontal-has-arrows.js +++ b/src/admin/editor-config/editor-options/scrollbar/horizontal-has-arrows.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -35,8 +35,10 @@ export default function ScrollbarHorizontalHasArrows() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/horizontal-scrollbar-size.js b/src/admin/editor-config/editor-options/scrollbar/horizontal-scrollbar-size.js index 7b20348..25192c6 100644 --- a/src/admin/editor-config/editor-options/scrollbar/horizontal-scrollbar-size.js +++ b/src/admin/editor-config/editor-options/scrollbar/horizontal-scrollbar-size.js @@ -3,7 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useContext, useEffect, useState } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; import { useDebounce } from '@wordpress/compose'; /** @@ -51,8 +51,10 @@ export default function ScrollbarHorizontalScrollbarSize() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/horizontal.js b/src/admin/editor-config/editor-options/scrollbar/horizontal.js index 723ecb6..1c6a519 100644 --- a/src/admin/editor-config/editor-options/scrollbar/horizontal.js +++ b/src/admin/editor-config/editor-options/scrollbar/horizontal.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -54,8 +54,10 @@ export default function ScrollbarHorizontal() { }; return ( -
    + + { ' ' } { @@ -70,6 +72,6 @@ export default function ScrollbarHorizontal() { colCount="3" value={ editorOptions.scrollbar.horizontal } /> -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/scroll-by-page.js b/src/admin/editor-config/editor-options/scrollbar/scroll-by-page.js index 2a7339a..0d156ab 100644 --- a/src/admin/editor-config/editor-options/scrollbar/scroll-by-page.js +++ b/src/admin/editor-config/editor-options/scrollbar/scroll-by-page.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -35,8 +35,10 @@ export default function ScrollbarScrollByPage() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/use-shadows.js b/src/admin/editor-config/editor-options/scrollbar/use-shadows.js index dc423e5..e99c0ae 100644 --- a/src/admin/editor-config/editor-options/scrollbar/use-shadows.js +++ b/src/admin/editor-config/editor-options/scrollbar/use-shadows.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -34,8 +34,10 @@ export default function ScrollbarUseShadows() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/vertical-has-arrows.js b/src/admin/editor-config/editor-options/scrollbar/vertical-has-arrows.js index 5ecfd41..da9eee6 100644 --- a/src/admin/editor-config/editor-options/scrollbar/vertical-has-arrows.js +++ b/src/admin/editor-config/editor-options/scrollbar/vertical-has-arrows.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -35,8 +35,10 @@ export default function ScrollbarVerticalHasArrows() { }; return ( -
    + + { ' ' } -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/vertical-scrollbar-size.js b/src/admin/editor-config/editor-options/scrollbar/vertical-scrollbar-size.js index a42496e..528c3fc 100644 --- a/src/admin/editor-config/editor-options/scrollbar/vertical-scrollbar-size.js +++ b/src/admin/editor-config/editor-options/scrollbar/vertical-scrollbar-size.js @@ -3,7 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useContext, useEffect, useState } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; import { useDebounce } from '@wordpress/compose'; /** @@ -51,8 +51,9 @@ export default function ScrollbarVerticalScrollbarSize() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/scrollbar/vertical.js b/src/admin/editor-config/editor-options/scrollbar/vertical.js index 60f7fcd..96fef6e 100644 --- a/src/admin/editor-config/editor-options/scrollbar/vertical.js +++ b/src/admin/editor-config/editor-options/scrollbar/vertical.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -54,8 +54,9 @@ export default function ScrollbarVertical() { }; return ( -
    + { @@ -70,6 +71,6 @@ export default function ScrollbarVertical() { colCount="3" value={ editorOptions.scrollbar.vertical } /> -
    + ); } diff --git a/src/admin/editor-config/editor-options/select-on-line-numbers.js b/src/admin/editor-config/editor-options/select-on-line-numbers.js index 185a3c2..60f061c 100644 --- a/src/admin/editor-config/editor-options/select-on-line-numbers.js +++ b/src/admin/editor-config/editor-options/select-on-line-numbers.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -34,8 +34,9 @@ export default function SelectOnLineNumbers() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/selection-highlight.js b/src/admin/editor-config/editor-options/selection-highlight.js index b28d88b..d820d62 100644 --- a/src/admin/editor-config/editor-options/selection-highlight.js +++ b/src/admin/editor-config/editor-options/selection-highlight.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function SelectionHighlight() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/show-folding-controls.js b/src/admin/editor-config/editor-options/show-folding-controls.js index c59d677..2411d61 100644 --- a/src/admin/editor-config/editor-options/show-folding-controls.js +++ b/src/admin/editor-config/editor-options/show-folding-controls.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -45,8 +45,9 @@ export default function ShowFoldingControls() { }; return ( -
    + { @@ -60,6 +61,6 @@ export default function ShowFoldingControls() { items={ items } value={ editorOptions.showFoldingControls } /> -
    + ); } diff --git a/src/admin/editor-config/editor-options/smooth-scrolling.js b/src/admin/editor-config/editor-options/smooth-scrolling.js index 3ac08e2..5a44562 100644 --- a/src/admin/editor-config/editor-options/smooth-scrolling.js +++ b/src/admin/editor-config/editor-options/smooth-scrolling.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function SmoothScrolling() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/sticky-tab-stops.js b/src/admin/editor-config/editor-options/sticky-tab-stops.js index 5a0af55..1ba3870 100644 --- a/src/admin/editor-config/editor-options/sticky-tab-stops.js +++ b/src/admin/editor-config/editor-options/sticky-tab-stops.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function StickyTabStops() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/suggest-font-size.js b/src/admin/editor-config/editor-options/suggest-font-size.js index a29d5f9..bbb0509 100644 --- a/src/admin/editor-config/editor-options/suggest-font-size.js +++ b/src/admin/editor-config/editor-options/suggest-font-size.js @@ -3,7 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -32,8 +32,9 @@ export default function SuggestFontSize() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/suggest-line-height.js b/src/admin/editor-config/editor-options/suggest-line-height.js index 6d888dc..42c5a9d 100644 --- a/src/admin/editor-config/editor-options/suggest-line-height.js +++ b/src/admin/editor-config/editor-options/suggest-line-height.js @@ -3,7 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -32,8 +32,9 @@ export default function SuggestLineHeight() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/suggest/show-icons.js b/src/admin/editor-config/editor-options/suggest/show-icons.js index 178406b..68bcba3 100644 --- a/src/admin/editor-config/editor-options/suggest/show-icons.js +++ b/src/admin/editor-config/editor-options/suggest/show-icons.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -34,32 +34,31 @@ export default function SuggestShowIcons() { }; return ( - <> -
    - - -
    - + + + + ); } diff --git a/src/admin/editor-config/editor-options/unfold-on-click-after-end-of-line.js b/src/admin/editor-config/editor-options/unfold-on-click-after-end-of-line.js index 725c375..c8f239f 100644 --- a/src/admin/editor-config/editor-options/unfold-on-click-after-end-of-line.js +++ b/src/admin/editor-config/editor-options/unfold-on-click-after-end-of-line.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -34,8 +34,9 @@ export default function UnfoldOnClickAfterEndOfLine() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/use-tab-stops.js b/src/admin/editor-config/editor-options/use-tab-stops.js index c1a0ad3..6c22c64 100644 --- a/src/admin/editor-config/editor-options/use-tab-stops.js +++ b/src/admin/editor-config/editor-options/use-tab-stops.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -34,8 +34,13 @@ export default function UseTabStops() { }; return ( -
    - + + -
    + ); } diff --git a/src/admin/editor-config/editor-options/word-wrap-column.js b/src/admin/editor-config/editor-options/word-wrap-column.js index ad14ec8..649e800 100644 --- a/src/admin/editor-config/editor-options/word-wrap-column.js +++ b/src/admin/editor-config/editor-options/word-wrap-column.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -32,8 +32,9 @@ export default function WordWrapColumn() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/editor-options/word-wrap.js b/src/admin/editor-config/editor-options/word-wrap.js index 9ab94ed..97fcb6f 100644 --- a/src/admin/editor-config/editor-options/word-wrap.js +++ b/src/admin/editor-config/editor-options/word-wrap.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -65,8 +65,9 @@ export default function WordWrap() { }; return ( -
    + { @@ -80,6 +81,6 @@ export default function WordWrap() { items={ items } value={ editorOptions.wordWrap } /> -
    + ); } diff --git a/src/admin/editor-config/editor-options/wrapping-indent.js b/src/admin/editor-config/editor-options/wrapping-indent.js index ae1a524..49d36a8 100644 --- a/src/admin/editor-config/editor-options/wrapping-indent.js +++ b/src/admin/editor-config/editor-options/wrapping-indent.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -55,8 +55,9 @@ export default function WrappingIndent() { }; return ( -
    + { @@ -70,6 +71,6 @@ export default function WrappingIndent() { items={ items } value={ editorOptions.wrappingIndent } /> -
    + ); } diff --git a/src/admin/editor-config/editor-settings/emmet.js b/src/admin/editor-config/editor-settings/emmet.js index 00daa3a..f39df80 100644 --- a/src/admin/editor-config/editor-settings/emmet.js +++ b/src/admin/editor-config/editor-settings/emmet.js @@ -3,7 +3,13 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { ExternalLink, Notice, ToggleControl } from '@wordpress/components'; +import { + ExternalLink, + Notice, + ToggleControl, + __experimentalText as Text, + __experimentalHStack as HStack, +} from '@wordpress/components'; /** * Internal dependencies @@ -31,20 +37,25 @@ export default function Emmet() { }; return ( -
    - + + -

    + { __( 'Emmet is a function for the editor that allow for high-speed coding via content assist.', 'custom-html-block-extension' ) } -

    -

    + + { __( 'Only valid for HTML tags and does not support inline CSS in the block and classic editor.', 'custom-html-block-extension' @@ -54,12 +65,12 @@ export default function Emmet() { 'You can use Emmet if the file extension is html, php, sass, scss, css, or less in the theme/plugin editor.', 'custom-html-block-extension' ) } -

    -

    + + { __( 'Check cheat sheet', 'custom-html-block-extension' ) } -

    + { __( 'Save and reload the browser to reflect this settings in the preview editor area.', @@ -73,6 +84,6 @@ export default function Emmet() { image="editor-settings/emmet.gif" value={ editorSettings.emmet } /> -
    + ); } diff --git a/src/admin/editor-config/editor-settings/insert-spaces.js b/src/admin/editor-config/editor-settings/insert-spaces.js index 8c13703..54d1d93 100644 --- a/src/admin/editor-config/editor-settings/insert-spaces.js +++ b/src/admin/editor-config/editor-settings/insert-spaces.js @@ -3,7 +3,11 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { BaseControl, ButtonGroup, Button } from '@wordpress/components'; +import { + __experimentalHStack as HStack, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; /** * Internal dependencies @@ -43,22 +47,19 @@ export default function InsertSpaces() { }; return ( -
    - - { title } - - { items.map( ( item, index ) => ( - - ) ) } - - -
    + + + { items.map( ( item ) => ( + + ) ) } + + ); } diff --git a/src/admin/editor-config/editor-settings/tab-size.js b/src/admin/editor-config/editor-settings/tab-size.js index 1083197..7eb1ef8 100644 --- a/src/admin/editor-config/editor-settings/tab-size.js +++ b/src/admin/editor-config/editor-settings/tab-size.js @@ -31,15 +31,14 @@ export default function TabSize() { }; return ( -
    - -
    + ); } diff --git a/src/admin/editor-config/editor-settings/theme.js b/src/admin/editor-config/editor-settings/theme.js index 6b3c2e6..dd79112 100644 --- a/src/admin/editor-config/editor-settings/theme.js +++ b/src/admin/editor-config/editor-settings/theme.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -31,8 +31,9 @@ export default function Theme() { }; return ( -
    + -
    + ); } diff --git a/src/admin/editor-config/index.js b/src/admin/editor-config/index.js index 4d83308..4eb460a 100644 --- a/src/admin/editor-config/index.js +++ b/src/admin/editor-config/index.js @@ -4,7 +4,13 @@ import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { createContext, useContext, useState } from '@wordpress/element'; -import { PanelBody, Disabled } from '@wordpress/components'; +import { + PanelBody, + Disabled, + __experimentalHeading as Heading, + __experimentalHStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; /** * Internal dependencies @@ -89,31 +95,38 @@ export default function EditorConfig() { }; return ( -
    -
    -

    + + + { __( 'Preview', 'custom-html-block-extension' ) } -

    + -
    -
    + + -
    { 'basic' === editorMode && ! searchQuery && ( @@ -140,294 +153,324 @@ export default function EditorConfig() { initialOpen={ searchQuery } scrollAfterOpen={ ! searchQuery } > - - - - - - - - + + + + + + + + + + - - - - - - + + + + + + + + - - { 'on' === editorOptions.wordWrap || 'off' === editorOptions.wordWrap ? ( - + + + { 'on' === editorOptions.wordWrap || 'off' === editorOptions.wordWrap ? ( + + + + ) : ( - - ) : ( - - ) } - { 'off' === editorOptions.wordWrap ? ( - + ) } + { 'off' === editorOptions.wordWrap ? ( + + + + ) : ( - - ) : ( - - ) } + ) } + - - { ! editorOptions.minimap.enabled ? ( - - - - - - - - - ) : ( - <> - - - - - - - - ) } + + + { ! editorOptions.minimap.enabled ? ( + + + + + + + + + ) : ( + <> + + + + + + + + ) } + - - { 'line' !== editorOptions.cursorStyle ? ( - + + + { 'line' !== editorOptions.cursorStyle ? ( + + + + ) : ( - - ) : ( - - ) } - - - - + ) } + + + + + - - { ! editorOptions.folding ? ( - - - - - - - - ) : ( - <> - - - - - - - ) } + + + { ! editorOptions.folding ? ( + + + + + + + + ) : ( + <> + + + + + + + ) } + - - { 'off' === editorOptions.lineNumbers ? ( - - - - - - ) : ( - <> - - - - - ) } + + + { 'off' === editorOptions.lineNumbers ? ( + + + + + + ) : ( + <> + + + + + ) } + - - { ! editorOptions.quickSuggestions ? ( - - - - - - - - ) : ( - <> - - - - - - - ) } + + + { ! editorOptions.quickSuggestions ? ( + + + + + + + + ) : ( + <> + + + + + + + ) } + - - - - - + + + + + + + - - - - - - - - - - + + + + + + + + + + + + - - - - - - - + + + + + + + + + - - - - - { 'none' === editorOptions.renderLineHighlight ? ( - + + + + + + { 'none' === editorOptions.renderLineHighlight ? ( + + + + ) : ( - - ) : ( - - ) } - - { ! editorOptions.renderIndentGuides ? ( - + ) } + + { ! editorOptions.renderIndentGuides ? ( + + + + ) : ( - - ) : ( - - ) } - - + ) } + + + - - - + + + + + - - - - - - { 'hidden' === editorOptions.scrollbar.horizontal ? ( - - - - - ) : ( - <> - - - - ) } - - { 'hidden' === editorOptions.scrollbar.vertical ? ( - - - - - ) : ( - <> - - - - ) } - { ( ! editorOptions.scrollbar.horizontalHasArrows && - ! editorOptions.scrollbar.verticalHasArrows ) || - ( 'hidden' === editorOptions.scrollbar.horizontal && - 'hidden' === editorOptions.scrollbar.vertical ) ? ( - + + + + + + + { 'hidden' === editorOptions.scrollbar.horizontal ? ( + + + + + ) : ( + <> + + + + ) } + + { 'hidden' === editorOptions.scrollbar.vertical ? ( + + + + + ) : ( + <> + + + + ) } + { ( ! editorOptions.scrollbar.horizontalHasArrows && + ! editorOptions.scrollbar.verticalHasArrows ) || + ( 'hidden' === editorOptions.scrollbar.horizontal && + 'hidden' === editorOptions.scrollbar.vertical ) ? ( + + + + ) : ( - - ) : ( - - ) } + ) } + - - - + + + + + ) } -
    -
    -
    + + + ); } diff --git a/src/admin/editor-config/style.scss b/src/admin/editor-config/style.scss index cc574d9..6c69340 100644 --- a/src/admin/editor-config/style.scss +++ b/src/admin/editor-config/style.scss @@ -1,73 +1,37 @@ -@import "./components/controls/style"; @import "./components/editor-preview/style"; @import "./components/item-help/style"; @import "./components/filter/style"; .chbe-admin-editor-config { - display: flex; - flex-flow: row-reverse; - gap: $grid-unit-40; - @media screen and (max-width: 782px) { - flex-flow: column; + .components-select-control { + min-width: 200px; } .components-range-control { - flex: 1; + width: 100%; max-width: 300px; } .chbe-admin-editor-config__settings { - display: flex; flex: 1; - flex-flow: column; - gap: $grid-unit-40; } .chbe-admin-editor-config__basic-settings { - display: flex; - flex-flow: column; - gap: $grid-unit-20; padding: $grid-unit-30; background: $white; - border: $border-width solid $gray-300; - } - - .chbe-admin-editor-config__advanced-settings { - display: flex; - flex-flow: column; - gap: $grid-unit-10; - } - - .chbe-admin-editor-config__item { - display: flex; - flex-wrap: wrap; - gap: $grid-unit-10; - align-items: flex-start; - justify-content: flex-start; - min-height: auto; - - .components-select-control .components-flex-item { - max-width: 100%; - } + border-top: $border-width solid $gray-300; + border-bottom: $border-width solid $gray-300; } .chbe-admin-editor-config__preview { position: sticky; top: $grid-unit-50; - display: flex; - flex-flow: column; - gap: $grid-unit-40; width: 50%; - height: 100%; @media screen and (max-width: 782px) { position: static; width: 100%; } } - - .chbe-admin-editor-config__preview-title { - margin: 0; - } } diff --git a/src/admin/options/components/permission-editor/index.js b/src/admin/options/components/permission-editor/index.js index 70e9bde..19e358b 100644 --- a/src/admin/options/components/permission-editor/index.js +++ b/src/admin/options/components/permission-editor/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { PanelBody, ToggleControl } from '@wordpress/components'; +import { PanelBody, ToggleControl, __experimentalVStack as VStack } from '@wordpress/components'; /** * Internal dependencies @@ -38,21 +38,26 @@ export default function PermissionEditor() { - - - + + + + + ); } diff --git a/src/admin/options/components/permission-user-role/index.js b/src/admin/options/components/permission-user-role/index.js index 970a842..cc3eac4 100644 --- a/src/admin/options/components/permission-user-role/index.js +++ b/src/admin/options/components/permission-user-role/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; -import { PanelBody, ToggleControl } from '@wordpress/components'; +import { PanelBody, ToggleControl, __experimentalVStack as VStack } from '@wordpress/components'; /** * Internal dependencies @@ -32,14 +32,17 @@ export default function PermissionUserRole() { - { userRoles.map( ( role, index ) => ( - onChange( role.value ) } - /> - ) ) } + + { userRoles.map( ( role, index ) => ( + onChange( role.value ) } + /> + ) ) } + ); } diff --git a/src/admin/options/index.js b/src/admin/options/index.js index 3d7c78c..ca30ab3 100644 --- a/src/admin/options/index.js +++ b/src/admin/options/index.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { createContext, useContext } from '@wordpress/element'; -import { Button } from '@wordpress/components'; +import { Button, Flex, __experimentalVStack as VStack } from '@wordpress/components'; /** * Internal dependencies @@ -39,12 +39,14 @@ export default function Options() { }; return ( -
    + - -
    + + + + ); } diff --git a/src/admin/options/style.scss b/src/admin/options/style.scss deleted file mode 100644 index 5bedd03..0000000 --- a/src/admin/options/style.scss +++ /dev/null @@ -1,9 +0,0 @@ -.chbe-admin-options { - display: flex; - flex-flow: column; - gap: $grid-unit-30; - - > .components-button { - align-self: flex-start; - } -} diff --git a/src/admin/style.scss b/src/admin/style.scss index 6bccceb..4ae09dd 100644 --- a/src/admin/style.scss +++ b/src/admin/style.scss @@ -10,10 +10,10 @@ @import "./components/shortcut/style"; @import "./components/welcome-guide/style"; -// Page +// Monaco Editor common styles +@import "../components/monaco-editor/style"; + @import "./editor-config/style"; -@import "./tools/style"; -@import "./options/style"; @include wordpress-admin-schemes(); @@ -24,35 +24,27 @@ #custom-html-block-extension-admin { - // Common classes + // Container class .chbe-admin-container { position: relative; max-width: 1200px; - padding: 0 $grid-unit-20; + padding: 0 $grid-unit-20 + $grid-unit-05; margin: 0 auto; } // React notification component styles .rnc__base { - top: 32px; - left: 160px; - margin-left: -80px; - - @media only screen and (max-width: 960px) { - left: 36px; - margin-left: -18px; - } + bottom: 0; + right: 0; + } - @media screen and (max-width: 782px) { - top: 46px; - left: 0; - margin-left: 0; - } + .rnc__notification-item { + margin-bottom: $grid-unit-20; + } - .rnc__notification-container--top-center { - left: 50%; - transform: translateX(-50%); - } + .rnc__notification-container--bottom-right { + bottom: 0; + right: $grid-unit-20; } // Gutenberg component styles @@ -60,96 +52,8 @@ opacity: 0.3; } - .components-base-control { - margin-bottom: 0; - - .components-base-control__label { - display: block; - font-size: 13px; - font-weight: normal; - text-transform: initial; - } - - .components-base-control__field { - margin-bottom: 0; - } - } - - .components-select-control { - - .components-flex-item { - max-width: 100%; - } - - .components-input-control__label { - display: block; - font-size: 13px; - font-weight: normal; - text-transform: initial; - } - - .components-select-control__input { - line-height: initial; - } - } - .components-panel__body { background: $white; - border: $border-width solid $gray-300; - - &.is-opened { - padding-top: 0; - - > .components-panel__body-title { - margin: 0 ($grid-unit-20 * -1) ($grid-unit-20 * -1 - 1); - - + * { - margin-top: $grid-unit-40 + 1; - } - } - } - - &:not(.is-opened) { - border-bottom: none; - } - - > * { - margin: 0; - } - - > * + * { - margin-top: $grid-unit-20; - } - - .components-panel__body-toggle.components-button { - padding-top: $grid-unit-20; - padding-bottom: $grid-unit-20; - font-size: 16px; - font-weight: bold; - } - - .components-panel__body-toggle { - border-bottom: $border-width solid $gray-300; - } - - .components-disabled { - - &:empty { - display: none; - - + * { - margin-top: $grid-unit-40 + 1; - } - } - - > * { - margin: 0; - } - - > * + * { - margin-top: $grid-unit-20; - } - } } } diff --git a/src/admin/tools/components/export-tool/index.js b/src/admin/tools/components/export-tool/index.js index d12d7fb..15f7a86 100644 --- a/src/admin/tools/components/export-tool/index.js +++ b/src/admin/tools/components/export-tool/index.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { useContext } from '@wordpress/element'; -import { Button, PanelBody } from '@wordpress/components'; +import { Button, PanelBody, __experimentalText as Text } from '@wordpress/components'; /** * Internal dependencies @@ -45,16 +45,13 @@ export default function ExportTool() { }; return ( - -

    + + { __( 'Use the download button to export the editor settings. You can restore the editor config by importing the exported file on another WordPress site.', 'custom-html-block-extension' ) } -

    + diff --git a/src/admin/tools/components/import-tool/index.js b/src/admin/tools/components/import-tool/index.js index 44c7b74..cba15c5 100644 --- a/src/admin/tools/components/import-tool/index.js +++ b/src/admin/tools/components/import-tool/index.js @@ -4,7 +4,14 @@ import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { useContext, useState } from '@wordpress/element'; -import { Button, FormFileUpload, PanelBody } from '@wordpress/components'; +import { + Button, + FormFileUpload, + PanelBody, + __experimentalText as Text, + __experimentalHStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; /** * Internal dependencies @@ -79,39 +86,36 @@ export default function ImportTool() { }; return ( - -

    + + { __( 'Select the Custom HTML Block Extension JSON file you would like to import and click the import button below.', 'custom-html-block-extension' ) } -

    -
    - ( - - ) } - /> - { importFile && ( -

    { importFile.name }

    - ) } -
    - + + + + ( + + ) } + /> + { importFile && { importFile.name } } + + +     ); } diff --git a/src/admin/tools/components/import-tool/style.scss b/src/admin/tools/components/import-tool/style.scss deleted file mode 100644 index c3317e3..0000000 --- a/src/admin/tools/components/import-tool/style.scss +++ /dev/null @@ -1,13 +0,0 @@ -.chbe-admin-tools-import-tool { - - .chbe-admin-tools-import-tool__upload { - display: flex; - flex-wrap: wrap; - gap: $grid-unit-20; - align-items: center; - } - - .chbe-admin-tools-import-tool__filename { - margin: 0; - } -} diff --git a/src/admin/tools/index.js b/src/admin/tools/index.js index f7c1b75..887cd69 100644 --- a/src/admin/tools/index.js +++ b/src/admin/tools/index.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { __experimentalVStack as VStack } from '@wordpress/components'; + /** * Internal dependencies */ @@ -6,9 +11,9 @@ import ImportTool from './components/import-tool'; export default function Tools() { return ( -
    + -
    + ); } diff --git a/src/admin/tools/style.scss b/src/admin/tools/style.scss deleted file mode 100644 index 52dbdd9..0000000 --- a/src/admin/tools/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "./components/import-tool/style"; - -.chbe-admin-tools { - display: flex; - flex-flow: column; - gap: $grid-unit-30; -} diff --git a/src/block-editor/edit.js b/src/block-editor/edit.js index 33ad5b4..29d98da 100644 --- a/src/block-editor/edit.js +++ b/src/block-editor/edit.js @@ -11,16 +11,18 @@ import { Disabled, SandBox, ToolbarGroup, - Icon, - BaseControl, - ButtonGroup, Button, TextControl, Dropdown, Modal, Notice, + __experimentalHeading as Heading, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components'; -import { fullscreen, arrowRight, replace } from '@wordpress/icons'; +import { fullscreen, replace } from '@wordpress/icons'; /** * Internal dependencies @@ -183,46 +185,40 @@ export default function HTMLEdit( { attributes, isSelected, setAttributes, toggl ); } } renderContent={ ( { onClose } ) => ( -
    -

    + + { __( 'Change indentation', 'custom-html-block-extension' ) } -

    -
    -
    -

    + + + + { __( 'Current indent', 'custom-html-block-extension' ) } -

    - - - { __( 'Current indent type', 'custom-html-block-extension' ) } - - - { INDENT_TYPES.map( ( indentType, index ) => ( - - ) ) } - - + + { + setReplaceSetting( { + ...replaceSetting, + beforeInsertSpaces: value, + } ); + } } + isBlock + > + { INDENT_TYPES.map( ( indentType ) => ( + + ) ) } + { replaceSetting.beforeInsertSpaces && ( ) } -
    - -
    -

    + + + { __( 'New indent', 'custom-html-block-extension' ) } -

    - - - { __( 'New indent type', 'custom-html-block-extension' ) } - - - { INDENT_TYPES.map( ( indentType, index ) => ( - - ) ) } - - + + { + setReplaceSetting( { + ...replaceSetting, + afterInsertSpaces: value, + } ); + } } + isBlock + > + { INDENT_TYPES.map( ( indentType ) => ( + + ) ) } + { replaceSetting.afterInsertSpaces && ( ) } -
    -
    -
    + + + -
    -
    + + ) } /> ) } - - { __( 'HTML', 'custom-html-block-extension' ) } + + { __( 'HTML', 'custom-html-block-extension' ) } - - { __( 'Preview', 'custom-html-block-extension' ) } + + { __( 'Preview', 'custom-html-block-extension' ) } @@ -335,7 +316,7 @@ export default function HTMLEdit( { attributes, isSelected, setAttributes, toggl { ! isSelected &&
    } ) : ( - <> + { errorMessage && { errorMessage } } - + ) } @@ -380,9 +359,7 @@ export default function HTMLEdit( { attributes, isSelected, setAttributes, toggl onRequestClose={ () => setIsModalEditorOpen( false ) } > section { - background-color: rgba(0, 0, 0, 0.1); - } - } - - .components-notice { - margin: 0 0 $grid-unit-10; - - .components-button { - min-width: $button-size-small; - height: $button-size-small; - padding: 0; - - svg { - width: $grid-unit-20; - } - } - } - - .components-notice__content { - margin: 0; - } - - &.is-selected .components-resizable-box__container { - background-color: rgba(0, 0, 0, 0.1); - } - - .chbe-editor-wrapper { - height: 100%; - } -} +// Monaco Editor styles +@import "../components/monaco-editor/style"; // Change indentation popover .chbe-popover { @@ -48,57 +11,18 @@ padding: $grid-unit-20; } - .chbe-popover__inner { - display: flex; - flex-flow: column; - gap: $grid-unit-20; - align-items: center; - white-space: nowrap; - } - - .components-base-control__label { - display: block; - } - - .chbe-popover__title { - margin: 0; - text-align: center; - } - .chbe-popover__subtitle { padding: $grid-unit-05 $grid-unit-10; margin: 0 ($grid-unit-20 * -1); - font-size: 1em; color: $white; text-align: center; background: var(--wp-admin-theme-color); } - .chbe-popover__row { - display: flex; - gap: $grid-unit-10; - } - .chbe-popover__col { - display: flex; - flex-flow: column; - gap: $grid-unit-20; padding: 0 $grid-unit-20 $grid-unit-20; border: $border-width solid var(--wp-admin-theme-color); } - - .chbe-popover__arrow { - align-self: center; - - svg { - display: block; - } - } - - .chbe-popover__buttons { - display: flex; - gap: $grid-unit-20; - } } @@ -113,54 +37,4 @@ .components-modal__header + div { flex: 1; } - - .chbe-editor-wrapper { - height: 100%; - } -} - -// Monaco Editor -.chbe-editor-wrapper { - - .monaco-editor { - - .find-widget { - - .button { - color: inherit; - background: none; - border: none; - - &:focus { - box-shadow: none; - } - - &.disabled { - color: inherit !important; - background: none !important; - } - } - - textarea:focus { - box-shadow: none; - } - } - - .inputarea { - padding: 0; - color: inherit; - box-shadow: none; - } - - .monaco-icon-label-container > .monaco-icon-name-container > .label-name { - text-decoration: none; - } - - .monaco-highlighted-label .highlight { - display: inline; - padding: 0; - margin: 0; - background: transparent; - } - } } diff --git a/src/classic-editor/index.js b/src/classic-editor/index.js index dc81da7..8e6c361 100644 --- a/src/classic-editor/index.js +++ b/src/classic-editor/index.js @@ -38,7 +38,7 @@ initLoader().then( ( monaco ) => { // Generate an element to apply the monaco editor. const monacoEditorContainer = document.createElement( 'div' ); - monacoEditorContainer.setAttribute( 'id', 'monaco-editor-container' ); + monacoEditorContainer.setAttribute( 'id', 'monaco-editor' ); editorContainer.appendChild( monacoEditorContainer ); // Monaco editor properties. @@ -143,7 +143,7 @@ initLoader().then( ( monaco ) => { const toolbarPosition = window.getComputedStyle( toolbar ).position; const marginTop = 'fixed' === toolbarPosition || 'absolute' === toolbarPosition ? toolbar.clientHeight + 1 : 0; - document.getElementById( 'monaco-editor-container' ).style.marginTop = `${ marginTop }px`; + document.getElementById( 'monaco-editor' ).style.marginTop = `${ marginTop }px`; }; // Window resize event. @@ -273,7 +273,7 @@ initLoader().then( ( monaco ) => { const toVisual = () => { if ( isMonacoEditorEnabled ) { monaco.editor.getModels().forEach( ( model ) => model.dispose() ); - document.getElementById( 'monaco-editor-container' ).remove(); + document.getElementById( 'monaco-editor' ).remove(); tabHtml.onclick = toHtml; syncTriggers.forEach( ( button ) => { button.removeEventListener( 'mouseup', syncTextareaToEditor ); diff --git a/src/classic-editor/style.scss b/src/classic-editor/style.scss index 119dd9d..18cf917 100644 --- a/src/classic-editor/style.scss +++ b/src/classic-editor/style.scss @@ -1,41 +1,12 @@ // WordPress base styles @import "node_modules/@wordpress/base-styles/variables"; +// Monaco Editor common styles +@import "../components/monaco-editor/style"; + // Monaco Editor -#monaco-editor-container { +#monaco-editor { min-height: 300px; - - .monaco-editor { - - .find-widget { - - .button { - color: inherit; - background: none; - border: none; - - &:focus { - box-shadow: none; - } - } - - textarea:focus { - box-shadow: none; - } - } - - .inputarea { - box-shadow: none; - } - - .monaco-icon-label-container > .monaco-icon-name-container > .label-name { - text-decoration: none; - } - - .monaco-highlighted-label .highlight { - background: transparent; - } - } } // Toolbar diff --git a/src/components/monaco-editor.js b/src/components/monaco-editor/index.js similarity index 96% rename from src/components/monaco-editor.js rename to src/components/monaco-editor/index.js index c9992fb..6dd94a0 100644 --- a/src/components/monaco-editor.js +++ b/src/components/monaco-editor/index.js @@ -13,14 +13,15 @@ import { emmetHTML } from 'emmet-monaco-es'; /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { useState, useEffect, useRef } from '@wordpress/element'; import { useResizeObserver } from '@wordpress/compose'; /** * Internal dependencies */ -import themes from '../lib/themes'; -import initLoader from '../lib/loader'; +import themes from '../../lib/themes'; +import initLoader from '../../lib/loader'; const wrapperStyles = { position: 'relative', @@ -46,7 +47,6 @@ const loadingStyles = { export default function MonacoEditor( { className, language = 'html', - loading = '', theme = 'vs-dark', options = {}, value = '', @@ -291,8 +291,10 @@ export default function MonacoEditor( { return (
    { resizeListener } - { ! isEditorReady &&
    { loading }
    } -
    + { ! isEditorReady && ( +
    { __( 'Loading…', 'custom-html-block-extension' ) }
    + ) } +
    ); } diff --git a/src/components/monaco-editor/style.scss b/src/components/monaco-editor/style.scss new file mode 100644 index 0000000..d9150c4 --- /dev/null +++ b/src/components/monaco-editor/style.scss @@ -0,0 +1,80 @@ +#monaco-editor { + height: 100%; + + .find-widget { + + .button { + color: inherit; + background: none; + background-color: transparent !important; + min-height: auto; + box-sizing: border-box; + + &:not(.toggle) { + width: 22px; + height: 22px; + } + + &:not(:focus) { + border: none; + } + + &:focus { + box-shadow: none; + border: 1px solid; + } + + &.disabled { + color: inherit !important; + background: none !important; + } + } + + textarea { + min-height: initial; + font-family: inherit; + font-size: inherit; + border: none; + + &:focus { + box-shadow: none; + } + } + } + + .find-part { + margin-top: 4px; + } + + .inputarea { + padding: 0; + color: inherit; + box-shadow: none; + + &.monaco-mouse-cursor-text { + min-height: auto; + background: transparent; + border: none; + } + } + + .monaco-custom-toggle:focus { + border-color: inherit; + outline: none; + } + + .monaco-findInput > .controls { + top: 2px; + } + + .monaco-icon-label-container > .monaco-icon-name-container > .label-name { + text-decoration: none; + } + + .monaco-highlighted-label .highlight { + display: inline; + padding: 0; + margin: 0; + background: transparent; + } +} diff --git a/src/lib/helper.js b/src/lib/helper.js index a923587..fb75427 100644 --- a/src/lib/helper.js +++ b/src/lib/helper.js @@ -8,9 +8,8 @@ export const addNotification = ( message, type, duration = 200000 ) => { Store.addNotification( { message, type, - animation: 'bounce-in', insert: 'bottom', - container: 'top-center', + container: 'bottom-right', isMobile: true, dismiss: { duration, diff --git a/src/theme-plugin-editor/index.js b/src/theme-plugin-editor/index.js index 7b907ff..e93022b 100644 --- a/src/theme-plugin-editor/index.js +++ b/src/theme-plugin-editor/index.js @@ -19,7 +19,7 @@ initLoader().then( ( monaco ) => { // Generate an element to apply the monaco editor. const monacoEditorContainer = document.createElement( 'div' ); - monacoEditorContainer.setAttribute( 'id', 'monaco-editor-container' ); + monacoEditorContainer.setAttribute( 'id', 'monaco-editor' ); textarea.parentNode.insertBefore( monacoEditorContainer, textarea.nextElementSibling ); // Monaco editor properties. diff --git a/src/theme-plugin-editor/style.scss b/src/theme-plugin-editor/style.scss index 5f29a90..9c706d7 100644 --- a/src/theme-plugin-editor/style.scss +++ b/src/theme-plugin-editor/style.scss @@ -1,5 +1,8 @@ +// Monaco Editor common styles +@import "../components/monaco-editor/style"; + // Monaco Editor -#monaco-editor-container { +#monaco-editor { height: calc(100vh - 295px); min-height: 60vh; margin-right: 4em; @@ -7,55 +10,6 @@ @media screen and (max-width: 782px) { margin-right: 0; } - - .monaco-editor { - - .find-widget { - - .button { - color: inherit; - background: none; - border: none; - - &:focus { - box-shadow: none; - } - - &.disabled { - color: inherit !important; - background: none !important; - } - } - - textarea { - min-height: initial; - font-family: inherit; - font-size: inherit; - border: none; - - &:focus { - box-shadow: none; - } - } - } - - .inputarea { - box-shadow: none; - - &.monaco-mouse-cursor-text { - min-height: auto; - background: transparent; - border: none; - } - } - - .monaco-highlighted-label .highlight { - display: inline; - padding: 0; - margin: 0; - background: transparent; - } - } } // Original editor textarea diff --git a/test/e2e/test.spec.js b/test/e2e/test.spec.js index 32e197a..07f98e8 100644 --- a/test/e2e/test.spec.js +++ b/test/e2e/test.spec.js @@ -20,7 +20,7 @@ test.describe( 'Custom HTML Block Extension', () => { await admin.visitAdminPage( 'post-new.php' ); await page.click( '#content-tmce' ); await page.click( '#content-html' ); - await page.click( '#monaco-editor-container .monaco-editor' ); + await page.click( '#monaco-editor .monaco-editor' ); await page.keyboard.type( 'p.selector' ); await page.keyboard.down( 'Tab' ); await page.click( '#publish' ); @@ -37,7 +37,7 @@ test.describe( 'Custom HTML Block Extension', () => { pageUtils, } ) => { await admin.visitAdminPage( 'theme-editor.php' ); - await page.click( '#monaco-editor-container .monaco-editor' ); + await page.click( '#monaco-editor .monaco-editor' ); await pageUtils.pressKeys( 'primary+a' ); await page.keyboard.press( 'Delete' ); await page.keyboard.type( '.selector{fz100', { delay: 50 } );