[BBT-98] Adds support for variation styling

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.

src/editor/components/NavBlockList.js

@@ -1,4 +1,6 @@
 import { useContext } from '@wordpress/element';
+import { html, styles } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 import EditorContext from '../context/EditorContext';
 
@@ -7,6 +9,7 @@ import getThemeOption from '../../utils/get-theme-option';
 
 import NavListItem from './NavListItem';
 import NavElementList from './NavElementList';
+import NavVariationList from './NavVariationList';
 
 /**
  * Nav Block list
@@ -32,10 +35,20 @@ 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 =
+						'/blocks/' +
+						encodeURIComponent( block.name ) +
+						'/elements';
 					const elementsSelector = `blocks.${ block.name }.elements`;
 
+					const varRoute =
+						'/blocks/' +
+						encodeURIComponent( block.name ) +
+						'/variations';
+
 					return (
 						<NavListItem
 							key={ block.name }
@@ -44,10 +57,28 @@ const NavBlockList = () => {
 							route={ route }
 							hasStyles={ hasBlockStyles }
 						>
-							<NavElementList
-								selector={ elementsSelector }
-								route={ route }
-							/>
+							<NavListItem
+								key={ 'elements' }
+								label={ __( 'Elements', 'themer' ) }
+								icon={ html }
+								hasStyles={ elements }
+							>
+								<NavElementList
+									selector={ elementsSelector }
+									route={ elementRoute }
+								/>
+							</NavListItem>
+							<NavListItem
+								key={ 'variations' }
+								label={ __( 'Variations', 'themer' ) }
+								icon={ styles }
+								hasStyles={ varHasStyles }
+							>
+								<NavVariationList
+									selector={ `blocks.${ block.name }.variations` }
+									route={ varRoute }
+								/>
+							</NavListItem>
 						</NavListItem>
 					);
 				} ) }

src/editor/components/NavVariationList.js

@@ -0,0 +1,55 @@
+import { isEmpty } from 'lodash';
+
+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 (
+		<>
+			<ul className="themer-nav-list">
+				{ varStyles.map( ( variation ) => {
+					const varRoute = `${ route }/${ variation.name }`;
+					return (
+						<NavListItem
+							key={ varRoute }
+							label={ variation.name }
+							route={ varRoute }
+							icon={ handle }
+							hasStyles={
+								! isEmpty( themeVarStyles[ variation.name ] )
+							}
+						/>
+					);
+				} ) }
+			</ul>
+		</>
+	);
+};
+
+export default NavVariationList;

src/editor/components/StylesPanel.js

@@ -36,21 +36,29 @@ const StylesPanel = () => {
 			</NavigatorScreen>
 
 			{ /* block/element screen */ }
-			<NavigatorScreen path="/blocks/:blockName/:elementName">
+			<NavigatorScreen path="/blocks/:blockName/elements/:elementName">
 				<ElementItem
 					name={ params.elementName }
 					selector={ `blocks.${ params.blockName }.elements.${ params.elementName }` }
 				/>
 			</NavigatorScreen>
 
 			{ /* block/element/psuedo screen */ }
-			<NavigatorScreen path="/blocks/:blockName/:elementName/:pseudoName">
+			<NavigatorScreen path="/blocks/:blockName/elements/:elementName/:pseudoName">
 				<PseudoItem
 					name={ params.pseudoName }
 					selector={ `blocks.${ params.blockName }.elements.${ params.elementName }.${ params.pseudoName }` }
 				/>
 			</NavigatorScreen>
 
+			{ /* block/variation screen */ }
+			<NavigatorScreen path="/blocks/:blockName/variations/:varName">
+				<PseudoItem
+					name={ params.varName }
+					selector={ `blocks.${ params.blockName }.variations.${ params.varName }` }
+				/>
+			</NavigatorScreen>
+
 			{ /* element screen */ }
 			<NavigatorScreen path="/elements/:elementName">
 				<ElementItem

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;