feat: granular plugin setting (#3319)

* feat: allow enabling, disabling and hiding of blocks

* feat: add enable settings to toolbar features

* feat: add settings store for tracking changes

* feat: settings content organizaiont

* feat: style for sidenav

* feat: sidenav, organization, disabling blocks, and save changes

* fix: change blockstate from 0-2 to 1-3 to avoid nfalsy 0

* feat: add min height to sidenav

* feat: remove template since we will use react instead

* feat: use react approach for cleaner and more efficient code

* feat: admin notice when settings are saved

* feat: integrate pro-related settings

* fix: conditional lazy loading of pro settings

* feat: integrate missing settings such as icon, pro notice, tooltip

* feat: add stackable global settings

* fix: indentation from merge conflict

* feat: apply global settings by conditional registering

* feat: search functionality integration

* feat: application of search highlight through conditional classes

* feat: search highlight style

* feat: admin toolbar setting

* feat: util function for substituting to disabled blocks

* fix: disabling and hiding block variations

* feat: disable/enable confirmation, disable/enable/hide all blocks

* feat: removeChildIfDisabled

* feat: first batch of core substitution and removal integration

* fix: blockname typo

* Revert "feat: first batch of core substitution and removal integration"

This reverts commit 56551e1.

* feat: piggyback on the filter instead of manual change in variations, finish all integrations

* feat: special integration for blocks with no variation/neet to remove

* feat: integrate card default-2 with social-links

* fix: styles and media queries, spinner on saved

* adjusted styling, removed javascript for fixed position

* fade out the non-highlighted tabs

* additional settings tweaking

* fix: grayed out button when there are unsaved changes

* chore: remove emojis fom headings

* fix: line separator only between settings group

* feat: resturcture with settings group, created a centralized search tree for single check (remaining heading fix)

* feat: migration from from disabled blocks array to block states object

* fix: run the migration script, old disabled block represents hidden

* fix: typo on accessing search tree

* fix: typo on setting name

* feat: integrate v2 settings to new settings

* feat: change block name to title in dialog

* fix: disallow disabling of columns block

* feat: add popup on unsaved changes

* style tweaks

* Fixed issue where blocks do not appear in the editor

* enhanced styling of block toggle

* simplified modal

* updated text and buttons

* tweaked subtitles

* inverted box shadows

* tweaked wording

* fix: restucture block dependencies, storing them on individual block.json

* fix: restructure substitition whitelist to individual blocks

* fix: added additional blocks to substitute

* fix: remove substituteIfDisabledFunction

* fix: change content of save button after saving

* feat: if no settings in current tab, display message

* fix: only show dependent children/parents when needed

* chore: rename block dependecies to stk-required-blocks

* fix: restructure block dependency

* chore: rename to required blocks

* fix: move disabling of block outside the registration

* moved deprecated code to new file in deprecated folder

* added missing file

* fix: if a block cannot be disabled, default to hidden when disabling all

* feat: restructured substitute transform to separate files per block

* fix: import substitution rules and apply

* fix: access substitutionRules directly for blocks that uses TEMPLATE

* fix: ensure there are default blocks if not disabled

* fix: remove removeIfDisabled, make icon required for notification

* feat: allow substitution of core blocks, console error for blocks with no substitution

* fix: add alignment attribute to heading, text substitute

* fix: UI changes

* fix: FontAwesome notice alignment in free version

* feat: warn what disabled blocks are needed in design library

* align the font awesome notice with the field label

* fix: use stk-available-states instead, if cannot be change into a state, retain previous value

* fixed alignment of custom fields and role manager settings

* updated font awesome field styles

* added price and icon label substitution

* disallow disabling of design library block

* substitute divider with separator + allow no transform function

* updated some substitutions

* added fix for blocks undefined when inserting new design library entry

* added more substitutions

* added accordion and cta

* added card substitute

* added substitutions

* added more substitutions

* fix old design library entries will encounter an error when being added if the color string value is undefined

* fix: cascade by repeatedly checking if disabled

* fix: refactor, fix some substitutions

* fix: do a preorder traversal to ensure parent is processed first

* feat: add alert when substitution has been made

* fix: substitute from the root, fixes CTA and feature design

* fix: refactor, add oldAttributes to mimic previous design (batch 1)

* substitute: hero, icon, imageBox, pricingBox

* substitute: spacer, toc, testimonial, videoPopup

* substitute: icon-box, transform to column then let it cascade

* substitute: icon-list, generic for now since issue with the design

* fix: change dummy text for iconlist

* substitute(non-design): separator, tabs, timeline

* fix old issue with migrating old colors

* after saving, the substituted image blocks encounter an error

---------

Co-authored-by: [email protected] <>

Author: Arukuen

plugin.php

@@ -278,6 +278,7 @@ function is_frontend() {
 }
 
 // Deprecated.
+require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/editor-settings.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/native-global-colors.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/navigation-panel-pre-enabled.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/font-awesome-version.php' );

src/block/accordion/block.json

@@ -11,5 +11,13 @@
 	],
 	"textdomain": "stackable-ultimate-gutenberg-blocks",
 	"stk-type": "special",
-	"stk-demo": "https://wpstackable.com/accordion-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink"
+	"stk-demo": "https://wpstackable.com/accordion-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink",
+	"stk-required-blocks": [
+		"stackable/icon-label",
+		"stackable/heading",
+		"stackable/icon"
+	],
+	"stk-substitution-blocks": [
+		"stackable/text"
+	]
 }

src/block/accordion/index.js

@@ -17,6 +17,7 @@ import metadata from './block.json'
 import variations from './variations'
 import example from './example'
 import deprecated from './deprecated'
+import substitute from './substitute'
 
 /**
  * WordPress dependencies
@@ -39,4 +40,5 @@ export const settings = {
 	variations,
 	edit,
 	save,
+	substitute,
 }

src/block/accordion/substitute.js

@@ -0,0 +1,19 @@
+export const substitute = {
+	from: 'stackable/accordion',
+	transform: ( oldAttributes, innerBlocks ) => {
+		// Get the heading
+		const heading = innerBlocks[ 0 ][ 2 ][ 0 ][ 2 ][ 0 ][ 1 ].text
+		const insideBlocks = innerBlocks[ 1 ][ 2 ]
+
+		return [
+			'core/details',
+			{
+				open: false,
+				summary: heading,
+			},
+			insideBlocks,
+		]
+	},
+}
+
+export default substitute

src/block/blockquote/block.json

@@ -7,5 +7,11 @@
 	"usesContext": [ "postId", "postType", "queryId" , "stackable/innerBlockOrientation" ],
 	"textdomain": "stackable-ultimate-gutenberg-blocks",
 	"stk-type": "section",
-	"stk-demo": "https://wpstackable.com/blockquote-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink"
+	"stk-demo": "https://wpstackable.com/blockquote-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink",
+	"stk-required-blocks": [
+		"stackable/icon"
+	],
+	"stk-substitution-blocks": [
+		"stackable/text"
+	]
 }

src/block/blockquote/index.js

@@ -11,6 +11,7 @@ import save from './save'
 import schema from './schema'
 import example from './example'
 import deprecated from './deprecated'
+import substitute from './substitute'
 
 /**
  * External dependencies
@@ -40,4 +41,5 @@ export const settings = {
 	variations,
 	edit,
 	save,
+	substitute,
 }

src/block/blockquote/substitute.js

@@ -0,0 +1,14 @@
+export const substitute = {
+	from: 'stackable/blockquote',
+	transform: ( oldAttributes, innerBlocks ) => {
+		return [
+			'core/pullquote',
+			{
+				value: innerBlocks[ 1 ][ 1 ].text,
+				align: oldAttributes.contentAlign,
+			},
+		]
+	},
+}
+
+export default substitute

src/block/button-group/block.json

@@ -31,9 +31,13 @@
 			"description": "Add social buttons.",
 			"category": "stackable",
 			"stk-type": "special",
-			"stk-demo": "https://wpstackable.com/social-buttons-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink"
+			"stk-demo": "https://wpstackable.com/social-buttons-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink",
+			"stk-required-blocks": [
+				"stackable/button-group|icon-button"
+			]
 		}
 	],
 	"textdomain": "stackable-ultimate-gutenberg-blocks",
 	"stk-type": "hidden"
+
 }

src/block/button-group/index.js

@@ -16,6 +16,7 @@ import metadata from './block.json'
 import variations from './variations'
 import deprecated from './deprecated'
 import { buttonExample } from './example'
+import substitute from './substitute'
 
 /**
  * WordPress dependencies
@@ -40,4 +41,5 @@ export const settings = {
 	example: buttonExample,
 	edit,
 	save,
+	substitute,
 }

src/block/button-group/substitute.js

@@ -0,0 +1,27 @@
+import { BLOCK_STATE } from '~stackable/util'
+
+export const substitute = {
+	from: 'stackable/button-group',
+	variants: [ 'stackable/button-group|icon-button', 'stackable/button-group|button' ],
+	to: [ 'core/buttons', 'core/social-links' ],
+	transform: ( oldAttributes, innerBlocks, disabledBlocks ) => {
+		if ( 'stackable/button-group|icon-button' in disabledBlocks && disabledBlocks[ 'stackable/button-group|icon-button' ] === BLOCK_STATE.DISABLED && // eslint-disable-line camelcase
+			innerBlocks.length &&
+			innerBlocks[ 0 ][ 0 ] === 'stackable/icon-button'
+		) {
+			return [ 'core/social-links',
+				{ align: oldAttributes.contentAlign },
+				[
+					[ 'core/social-link', { service: 'facebook' } ],
+					[ 'core/social-link', { service: 'twitter' } ],
+				],
+			]
+		}
+		if ( 'stackable/button-group|button' in disabledBlocks && disabledBlocks[ 'stackable/button-group|button' ] === BLOCK_STATE.DISABLED ) { // eslint-disable-line camelcase
+			return [ 'core/buttons', {}, innerBlocks ]
+		}
+		return [ 'stackable/button-group', oldAttributes, innerBlocks ]
+	},
+}
+
+export default substitute