From f42cb5ab84f8d392850b101d248bc67f06e63363 Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Fri, 20 Sep 2024 09:32:10 +0100 Subject: [PATCH 1/5] feat: builds component for variation styling --- src/editor/components/Styles.js | 4 + src/editor/components/StylesVariations.js | 107 ++++++++++++++++++++++ 2 files changed, 111 insertions(+) create mode 100644 src/editor/components/StylesVariations.js diff --git a/src/editor/components/Styles.js b/src/editor/components/Styles.js index c3af865e..392dd27e 100644 --- a/src/editor/components/Styles.js +++ b/src/editor/components/Styles.js @@ -7,6 +7,7 @@ import Dimensions from './StylesDimensions'; import Outline from './StylesOutline'; import Shadow from './StylesShadow'; import CustomCSS from './StylesCustomCSS'; +import StylesVariations from './StylesVariations'; /** * Styles component @@ -53,6 +54,9 @@ const Styles = ( { selector } ) => {
+
+ +
); }; diff --git a/src/editor/components/StylesVariations.js b/src/editor/components/StylesVariations.js new file mode 100644 index 00000000..db6c8495 --- /dev/null +++ b/src/editor/components/StylesVariations.js @@ -0,0 +1,107 @@ +import { __ } from '@wordpress/i18n'; +import { useContext } from '@wordpress/element'; +import { TabPanel, PanelBody } from '@wordpress/components'; + +import Border from './StylesBorder'; +import Color from './StylesColor'; +import Typography from './StylesTypography'; +import Filter from './StylesFilter'; +import Spacing from './StylesSpacing'; +import Dimensions from './StylesDimensions'; +import Outline from './StylesOutline'; +import Shadow from './StylesShadow'; +import CustomCSS from './StylesCustomCSS'; + +import getThemeOption from '../../utils/get-theme-option'; +import EditorContext from '../context/EditorContext'; + +/** + * Block Variation component + * + * This component will render the block variations for the given selector. + * + * @param {Object} props Component props + * @param {string} props.selector Selector for styles object within theme config + */ +const StylesVariations = ( { selector } ) => { + const { themeConfig } = useContext( EditorContext ); + + if ( ! selector ) { + return; + } + + const blockStyles = getThemeOption( selector, themeConfig ) || {}; + + const tabs = Object.entries( blockStyles ).map( ( [ name ] ) => { + return { + name, + title: name.charAt( 0 ).toUpperCase() + name.slice( 1 ), + className: name, + }; + } ); + + return ( + <> + + { __( 'Variations', 'themer' ) } + + + { ( tab ) => ( + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + ) } + + + ); +}; + +export default StylesVariations; From f233e9254d031fe9b8231b65718b0dfce7d7d0d6 Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Fri, 20 Sep 2024 09:54:51 +0100 Subject: [PATCH 2/5] feat: adds check that object exists before rendering component --- src/editor/components/StylesVariations.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/editor/components/StylesVariations.js b/src/editor/components/StylesVariations.js index db6c8495..ed5a4782 100644 --- a/src/editor/components/StylesVariations.js +++ b/src/editor/components/StylesVariations.js @@ -1,3 +1,4 @@ +import { isEmpty } from 'lodash'; import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; import { TabPanel, PanelBody } from '@wordpress/components'; @@ -30,9 +31,13 @@ const StylesVariations = ( { selector } ) => { return; } - const blockStyles = getThemeOption( selector, themeConfig ) || {}; + const blockVariation = getThemeOption( selector, themeConfig ) || {}; - const tabs = Object.entries( blockStyles ).map( ( [ name ] ) => { + if ( isEmpty( blockVariation ) ) { + return null; + } + + const tabs = Object.entries( blockVariation ).map( ( [ name ] ) => { return { name, title: name.charAt( 0 ).toUpperCase() + name.slice( 1 ), From 599c93eb2948263b1d415ffe0a75259dd7d42b8a Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Mon, 23 Sep 2024 15:41:28 +0100 Subject: [PATCH 3/5] feat: implements variation component to sidebar --- src/editor/components/CodeView.js | 11 -- src/editor/components/NavBlockList.js | 35 ++++++- src/editor/components/NavVariationList.js | 50 +++++++++ src/editor/components/Styles.js | 4 - src/editor/components/StylesPanel.js | 12 ++- src/editor/components/StylesVariations.js | 112 --------------------- src/editor/styles/components/nav-list.scss | 4 + 7 files changed, 95 insertions(+), 133 deletions(-) create mode 100644 src/editor/components/NavVariationList.js delete mode 100644 src/editor/components/StylesVariations.js diff --git a/src/editor/components/CodeView.js b/src/editor/components/CodeView.js index ff76a7f9..e3a429e1 100644 --- a/src/editor/components/CodeView.js +++ b/src/editor/components/CodeView.js @@ -44,17 +44,6 @@ const CodeView = ( { themeConfig } ) => { return part.replace( /%2F/g, '/' ); } ); - /** - * Elements nested under blocks are stored in the styles object - * as `blocks.blockName.elements.elementName`. This code ensures - * that the correct path is used in these cases. - * - * e.g. `/blocks/core%2Fbutton/link` -> `blocks.['core/button'].elements.link` - */ - if ( pathParts[ 0 ] === 'blocks' && pathParts.length >= 3 ) { - pathParts.splice( 2, 0, 'elements' ); - } - /** * Traverse the theme config object to find the code section * that relates to the current navigator location. diff --git a/src/editor/components/NavBlockList.js b/src/editor/components/NavBlockList.js index 5beb3b34..1a0184e4 100644 --- a/src/editor/components/NavBlockList.js +++ b/src/editor/components/NavBlockList.js @@ -1,4 +1,5 @@ import { useContext } from '@wordpress/element'; +import { html, styles } from '@wordpress/icons'; import EditorContext from '../context/EditorContext'; @@ -7,6 +8,7 @@ import getThemeOption from '../../utils/get-theme-option'; import NavListItem from './NavListItem'; import NavElementList from './NavElementList'; +import NavVariationList from './NavVariationList'; /** * Nav Block list @@ -34,8 +36,17 @@ const NavBlockList = () => { const hasBlockStyles = Object.keys( rest ).length > 0; const route = '/blocks/' + encodeURIComponent( block.name ); + const elementRoute = + '/blocks/' + + encodeURIComponent( block.name ) + + '/elements'; const elementsSelector = `blocks.${ block.name }.elements`; + const varRoute = + '/blocks/' + + encodeURIComponent( block.name ) + + '/variations'; + return ( { route={ route } hasStyles={ hasBlockStyles } > - + + + + + + ); } ) } diff --git a/src/editor/components/NavVariationList.js b/src/editor/components/NavVariationList.js new file mode 100644 index 00000000..d360bfb9 --- /dev/null +++ b/src/editor/components/NavVariationList.js @@ -0,0 +1,50 @@ +import { useContext } from '@wordpress/element'; +import { handle } from '@wordpress/icons'; + +import EditorContext from '../context/EditorContext'; +import getThemeOption from '../../utils/get-theme-option'; + +import NavListItem from './NavListItem'; + +/** + * Nav Variation list + * + * Renders the variations list in the navigation panel + * + * @param {Object} props Component props + * @param {string} props.selector Selector to locate these variations in the schema + * @param {string} props.route Base route to use when navigating to child elements + */ +const NavVariationList = ( { selector, route } ) => { + const { themeConfig } = useContext( EditorContext ); + + // get styles for all variations at this selector + const themeVarStyles = + getThemeOption( `styles.${ selector }`, themeConfig ) || {}; + + const varStyles = Object.entries( themeVarStyles ).map( ( tab ) => { + return { + name: tab[ 0 ], + }; + } ); + + return ( + <> +
    + { varStyles.map( ( variation ) => { + const varRoute = `${ route }/${ variation.name }`; + return ( + + ); + } ) } +
+ + ); +}; + +export default NavVariationList; diff --git a/src/editor/components/Styles.js b/src/editor/components/Styles.js index 392dd27e..c3af865e 100644 --- a/src/editor/components/Styles.js +++ b/src/editor/components/Styles.js @@ -7,7 +7,6 @@ import Dimensions from './StylesDimensions'; import Outline from './StylesOutline'; import Shadow from './StylesShadow'; import CustomCSS from './StylesCustomCSS'; -import StylesVariations from './StylesVariations'; /** * Styles component @@ -54,9 +53,6 @@ const Styles = ( { selector } ) => {
-
- -
); }; diff --git a/src/editor/components/StylesPanel.js b/src/editor/components/StylesPanel.js index 9efa7d53..cecd956a 100644 --- a/src/editor/components/StylesPanel.js +++ b/src/editor/components/StylesPanel.js @@ -36,7 +36,7 @@ const StylesPanel = () => { { /* block/element screen */ } - + { { /* block/element/psuedo screen */ } - + + { /* block/variation screen */ } + + + + { /* element screen */ } { - const { themeConfig } = useContext( EditorContext ); - - if ( ! selector ) { - return; - } - - const blockVariation = getThemeOption( selector, themeConfig ) || {}; - - if ( isEmpty( blockVariation ) ) { - return null; - } - - const tabs = Object.entries( blockVariation ).map( ( [ name ] ) => { - return { - name, - title: name.charAt( 0 ).toUpperCase() + name.slice( 1 ), - className: name, - }; - } ); - - return ( - <> - - { __( 'Variations', 'themer' ) } - - - { ( tab ) => ( - -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - ) } - - - ); -}; - -export default StylesVariations; diff --git a/src/editor/styles/components/nav-list.scss b/src/editor/styles/components/nav-list.scss index abf0a8ed..9ac0d307 100644 --- a/src/editor/styles/components/nav-list.scss +++ b/src/editor/styles/components/nav-list.scss @@ -82,6 +82,10 @@ padding-left: calc(var(--themer-nav-list-indent) + 4px); } +.themer-nav-list__item__children { + padding-left: calc(var(--themer-nav-list-indent) / 4) +} + .components-button.has-icon.themer-nav-list__item__toggle { padding: 4px; min-width: 0; From c6e8d4d874f7dec48fbee923d9162c4d5d670c25 Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Mon, 23 Sep 2024 16:03:01 +0100 Subject: [PATCH 4/5] feat: adds/amends hasStyles attribute for populated sections --- src/editor/components/NavBlockList.js | 3 +++ src/editor/components/NavVariationList.js | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/src/editor/components/NavBlockList.js b/src/editor/components/NavBlockList.js index 1a0184e4..0c62807e 100644 --- a/src/editor/components/NavBlockList.js +++ b/src/editor/components/NavBlockList.js @@ -34,6 +34,7 @@ const NavBlockList = () => { // check if the block has any styles that aren't elements const { elements, ...rest } = blockStyles; const hasBlockStyles = Object.keys( rest ).length > 0; + const varHasStyles = rest?.variations; const route = '/blocks/' + encodeURIComponent( block.name ); const elementRoute = @@ -59,6 +60,7 @@ const NavBlockList = () => { key={ 'elements' } label={ 'Elements' } icon={ html } + hasStyles={ elements } > { key={ 'variations' } label={ 'Variations' } icon={ styles } + hasStyles={ varHasStyles } > { label={ variation.name } route={ varRoute } icon={ handle } + hasStyles={ + ! isEmpty( themeVarStyles[ variation.name ] ) + } /> ); } ) } From 4378972609e446df0f198831d1b766f89bdd6a1b Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Wed, 25 Sep 2024 08:21:45 +0100 Subject: [PATCH 5/5] feat: translation on strings --- src/editor/components/NavBlockList.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/editor/components/NavBlockList.js b/src/editor/components/NavBlockList.js index 0c62807e..52c3d0b6 100644 --- a/src/editor/components/NavBlockList.js +++ b/src/editor/components/NavBlockList.js @@ -1,5 +1,6 @@ import { useContext } from '@wordpress/element'; import { html, styles } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; import EditorContext from '../context/EditorContext'; @@ -58,7 +59,7 @@ const NavBlockList = () => { > @@ -69,7 +70,7 @@ const NavBlockList = () => {