Add support for Inspector tabs

assets/components/render-controls/index.js

@@ -129,12 +129,18 @@ export default class RenderControls extends Component {
 	 * Render controls
 	 *
 	 * @param {string}         placement  - controls placement [inspector, content]
+	 * @param {string}         group      - control group [default, styles, advanced]
 	 * @param {string|boolean} childOf    - parent control name.
 	 * @param {number|boolean} childIndex - child index in parent.
 	 *
 	 * @return {Array} react blocks with controls.
 	 */
-	renderControls(placement, childOf = '', childIndex = false) {
+	renderControls(
+		placement,
+		group = 'default',
+		childOf = '',
+		childIndex = false
+	) {
 		let result = [];
 		const controls = this.getControls(childOf);
 
@@ -146,7 +152,8 @@ export default class RenderControls extends Component {
 				control,
 				placement,
 				k,
-				childIndex
+				childIndex,
+				group
 			);
 
 			if (renderedControl) {
@@ -162,6 +169,7 @@ export default class RenderControls extends Component {
 		// filter render result.
 		result = applyFilters('lzb.editor.controls.render', result, {
 			placement,
+			group,
 			childOf,
 			childIndex,
 			getControls: this.getControls,
@@ -178,10 +186,17 @@ export default class RenderControls extends Component {
 	 * @param {string}         placement   - placement
 	 * @param {string}         uniqueId    - unique control ID
 	 * @param {number|boolean} childIndex  - child index in parent.
+	 * @param {string}         group       - group control
 	 *
 	 * @return {object|boolean} react control.
 	 */
-	renderControl(controlData, placement, uniqueId, childIndex = false) {
+	renderControl(
+		controlData,
+		placement,
+		uniqueId,
+		childIndex = false,
+		group = 'default'
+	) {
 		const {
 			lazyBlockData,
 			isLazyBlockSelected,
@@ -196,10 +211,15 @@ export default class RenderControls extends Component {
 			controlData.placement !== 'nowhere' &&
 			(controlData.placement === 'both' ||
 				controlData.placement === placement);
-		let { label } = controlData;
 
+		let { label } = controlData;
 		const controlTypeData = getControlTypeData(controlData.type);
 
+		// Group check.
+		if (placement !== 'content') {
+			placementCheck = placementCheck && controlData.group === group;
+		}
+
 		// restrictions.
 		if (controlTypeData && controlTypeData.restrictions) {
 			// Restrict placement.
@@ -342,6 +362,6 @@ export default class RenderControls extends Component {
 	}
 
 	render() {
-		return this.renderControls(this.props.placement);
+		return this.renderControls(this.props.placement, this.props.group);
 	}
 }

assets/editor-constructor/boxes/selected-control-settings/settings-rows/group.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, BaseControl, SelectControl } from '@wordpress/components';
+
+export default function GroupRow(props) {
+	const { updateData, data } = props;
+
+	return (
+		<PanelBody>
+			<BaseControl
+				id="lazyblocks-settings-group"
+				label={__('Group', 'lazy-blocks')}
+			>
+				<SelectControl
+					id="lazyblocks-settings-row-group"
+					value={data.group}
+					options={[
+						{ label: 'Default', value: 'default' },
+						{ label: 'Styles', value: 'styles' },
+						{ label: 'Advanced', value: 'advanced' },
+					]}
+					onChange={(value) =>
+						updateData({
+							group: value,
+						})
+					}
+				/>
+			</BaseControl>
+		</PanelBody>
+	);
+}

assets/editor-constructor/boxes/selected-control-settings/settings-rows/index.js

@@ -21,6 +21,7 @@ import WidthRow from './width';
 import HideIfNotSelectedRow from './hide-if-not-selected';
 import TranslateRow from './translate';
 import SaveInMetaRow from './save-in-meta';
+import GroupRow from './group';
 
 export default function settingsRows(props) {
 	const { data, id } = props;
@@ -37,6 +38,7 @@ export default function settingsRows(props) {
 			default: DefaultRow,
 			help: HelpRow,
 			placement: PlacementRow,
+			group: GroupRow,
 			width: WidthRow,
 			required: RequiredRow,
 			hide_if_not_selected: HideIfNotSelectedRow,
@@ -73,6 +75,12 @@ export default function settingsRows(props) {
 					data.placement === 'content' ||
 					data.placement === 'both';
 				break;
+			case 'group':
+				allow =
+					!data.placement ||
+					data.placement === 'inspector' ||
+					data.placement === 'both';
+				break;
 			// no default
 		}
 

assets/editor/blocks/main/edit.js

@@ -237,6 +237,12 @@ export default function BlockEdit(props) {
 	);
 
 	const attsForRender = {};
+	const controlsHasGroup = {
+		// Default group is always available to show error notices.
+		default: true,
+		styles: false,
+		advanced: false,
+	};
 
 	// prepare data for preview.
 	Object.keys(lazyBlockData.controls).forEach((k) => {
@@ -248,6 +254,19 @@ export default function BlockEdit(props) {
 				lazyBlockData.controls[k]
 			);
 		}
+		if (lazyBlockData.controls[k].placement !== 'content') {
+			switch (lazyBlockData.controls[k].group) {
+				case 'default':
+					controlsHasGroup.default = true;
+					break;
+				case 'styles':
+					controlsHasGroup.styles = true;
+					break;
+				case 'advanced':
+					controlsHasGroup.advanced = true;
+					break;
+			}
+		}
 	});
 
 	// reserved attributes.
@@ -295,39 +314,50 @@ export default function BlockEdit(props) {
 
 				<h6>{lazyBlockData.title}</h6>
 			</div>
-			<InspectorControls>
-				<div
-					className="lzb-inspector-controls"
-					data-lazyblocks-block-name={props.name}
-				>
-					{allowErrorNotice && invalidControlsCount > 0 && (
-						<div className="lzb-invalid-notice">
-							{sprintf(
-								// translators: %d: number of child controls.
-								_n(
-									'Validation failed. %d control require attention.',
-									'Validation failed. %d controls require attention.',
-									invalidControlsCount,
-									'lazy-blocks'
-								),
-								invalidControlsCount
-							)}
+			{Object.keys(controlsHasGroup).map((group) => {
+				if (!controlsHasGroup[group]) {
+					return null;
+				}
+
+				return (
+					<InspectorControls key={`inspector-${group}`} group={group}>
+						<div
+							className={`lzb-inspector-controls lzb-inspector-controls-${group}`}
+							data-lazyblocks-block-name={props.name}
+						>
+							{'default' === group &&
+								allowErrorNotice &&
+								invalidControlsCount > 0 && (
+									<div className="lzb-invalid-notice">
+										{sprintf(
+											// translators: %d: number of child controls.
+											_n(
+												'Validation failed. %d control require attention.',
+												'Validation failed. %d controls require attention.',
+												invalidControlsCount,
+												'lazy-blocks'
+											),
+											invalidControlsCount
+										)}
+									</div>
+								)}
+							<RenderControls
+								placement="inspector"
+								group={group}
+								isLazyBlockSelected={isLazyBlockSelected}
+								allowErrorNotice={allowErrorNotice}
+								meta={meta}
+								setMeta={(...args) => {
+									if (postType) {
+										setMeta(...args);
+									}
+								}}
+								{...props}
+							/>
 						</div>
-					)}
-					<RenderControls
-						placement="inspector"
-						isLazyBlockSelected={isLazyBlockSelected}
-						allowErrorNotice={allowErrorNotice}
-						meta={meta}
-						setMeta={(...args) => {
-							if (postType) {
-								setMeta(...args);
-							}
-						}}
-						{...props}
-					/>
-				</div>
-			</InspectorControls>
+					</InspectorControls>
+				);
+			})}
 			{lazyBlockData.edit_url ? (
 				<BlockControls group="other">
 					<ToolbarButton

assets/editor/index.scss

@@ -790,3 +790,6 @@
 		margin-bottom: 24px;
 	}
 }
+.lzb-inspector-controls-advanced > .components-panel__body {
+	margin: -16px;
+}

build/editor-constructor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '83dcb1f64c63b18059bd');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => 'b4d87d5d0f42afff605b');

build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '9f677d2f0c7202b8673c');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '37a5b8942a9df01b9dc3');

classes/class-tools.php

@@ -109,6 +109,7 @@ public function clean_block_to_export( $block ) {
 							'label',
 							'default',
 							'placement',
+							'group',
 							'width',
 							'required',
 							'hide_if_not_selected',
@@ -138,6 +139,7 @@ public function clean_block_to_export( $block ) {
 							'placeholder'          => '',
 							'characters_limit'     => '',
 							'width'                => '100',
+							'group'                => 'default',
 							'hide_if_not_selected' => 'false',
 							'required'             => 'false',
 							'translate'            => 'false',
@@ -568,6 +570,7 @@ public function import_block( $data ) {
 			'help'                 => '',
 			'child_of'             => '',
 			'placement'            => 'content',
+			'group'                => 'default',
 			'width'                => '100',
 			'hide_if_not_selected' => 'false',
 			'required'             => 'false',

controls/_base/index.php

@@ -66,6 +66,7 @@ class LazyBlocks_Control {
 		'default_settings'              => true,
 		'help_settings'                 => true,
 		'placement_settings'            => array( 'content', 'inspector' /* , 'content-fallback', 'inspector-fallback' */ ),
+		'group_settings'                => true,
 		'width_settings'                => true,
 		'required_settings'             => true,
 		'hide_if_not_selected_settings' => true,
@@ -93,6 +94,7 @@ class LazyBlocks_Control {
 		'help'                 => '',
 		'child_of'             => '',
 		'placement'            => 'content',
+		'group'                => 'default',
 		'width'                => '100',
 		'hide_if_not_selected' => 'false',
 		'required'             => 'false',