feat: granular plugin setting

src/block/card/variations.js

@@ -11,6 +11,7 @@ import ImageFaded from './images/faded.svg'
  * External dependencies
  */
 import { i18n, isPro } from 'stackable'
+import { substituteIfDisabled } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -105,7 +106,7 @@ const variations = applyFilters(
 							bottom: 0,
 							left: 0,
 						},
-					}, [
+					}, [ substituteIfDisabled( [ 'stackable/button-group|social-buttons', 'stackable/button-group|icon-button' ],
 						[ 'stackable/button-group', {
 							columnSpacing: {
 								top: 0,
@@ -132,6 +133,15 @@ const variations = applyFilters(
 								className: 'is-style-plain',
 							} ],
 						] ],
+						[ 'core/social-links',
+							{
+								align: 'right',
+							},
+							[
+								[ 'core/social-link', { service: 'facebook' } ],
+								[ 'core/social-link', { service: 'twitter' } ],
+							],
+						] ),
 					] ],
 				] ],
 			],

src/block/icon-box/edit.js

@@ -33,6 +33,7 @@ import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
 } from '~stackable/higher-order'
+import { substituteCoreIfDisabled } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -49,9 +50,9 @@ export const TEMPLATE = [
 			text: __( 'Icon Box', i18n ), hasP: true, textTag: 'h4',
 		} ],
 	] ],
-	[ 'stackable/text', {
+	substituteCoreIfDisabled( 'stackable/text', {
 		text: 'Description for this block. Use this space for describing your block.',
-	} ],
+	} ),
 ]
 
 const Edit = props => {

src/block/notification/variations.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { i18n, isPro } from 'stackable'
+import { removeChildIfDisabled } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -37,7 +38,7 @@ const variations = applyFilters(
 			pickerTitle: __( 'Default', i18n ),
 			pickerIcon: ImageDefault,
 			isActive: [ 'className' ],
-			innerBlocks: [
+			innerBlocks: removeChildIfDisabled( 'stackable/icon', [
 				[ 'stackable/icon', {
 					icon: '<svg data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>',
 					iconColor1: '#FFFFFF',
@@ -62,7 +63,7 @@ const variations = applyFilters(
 						},
 					} ],
 				] ],
-			],
+			] ),
 			scope: [ 'block' ],
 		},
 		{
@@ -83,7 +84,7 @@ const variations = applyFilters(
 			pickerTitle: __( 'Plain', i18n ),
 			pickerIcon: ImagePlain,
 			isActive: [ 'className' ],
-			innerBlocks: [
+			innerBlocks: removeChildIfDisabled( 'stackable/icon', [
 				[ 'stackable/icon', {
 					icon: '<svg data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>',
 					iconColor1: 'var(--stk-container-background-color, #40ba7b)',
@@ -111,7 +112,7 @@ const variations = applyFilters(
 						},
 					} ],
 				] ],
-			],
+			] ),
 			scope: [ 'block' ],
 		},
 		{

src/block/team-member/variations.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { i18n, isPro } from 'stackable'
+import { substituteIfDisabled } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -53,6 +54,14 @@ import ImageCover from './images/cover.svg'
 	],
 ]
 
+const socialLinksInnerBlocks = [
+	[ 'core/social-link', { service: 'facebook' } ],
+	[ 'core/social-link', { service: 'twitter' } ],
+	[ 'core/social-link', { service: 'instagram' } ],
+	[ 'core/social-link', { service: 'youtube' } ],
+	[ 'core/social-link', { service: 'linkedin' } ],
+]
+
 const variations = applyFilters(
 	'stackable.team-member.variations',
 	[
@@ -77,7 +86,10 @@ const variations = applyFilters(
 					text: __( 'Position', i18n ),
 				} ],
 				[ 'stackable/text', { text: _x( 'Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.', 'Content placeholder', i18n ) } ],
-				[ 'stackable/button-group', {}, buttonGroupInnerBlocks ],
+				substituteIfDisabled( [ 'stackable/button-group|social-buttons', 'stackable/button-group|icon-button' ],
+					[ 'stackable/button-group', {}, buttonGroupInnerBlocks ],
+					[ 'core/social-links', { align: 'center' }, socialLinksInnerBlocks ],
+				),
 			],
 			scope: [ 'block' ],
 		},
@@ -98,7 +110,10 @@ const variations = applyFilters(
 				[ 'stackable/subtitle', {
 					text: __( 'Position', i18n ),
 				} ],
-				[ 'stackable/button-group', {}, buttonGroupInnerBlocks ],
+				substituteIfDisabled( [ 'stackable/button-group|social-buttons', 'stackable/button-group|icon-button' ],
+					[ 'stackable/button-group', {}, buttonGroupInnerBlocks ],
+					[ 'core/social-links', { align: 'center' }, socialLinksInnerBlocks ],
+				),
 			],
 			scope: [ 'block' ],
 		},

src/block/timeline/edit.js

@@ -42,6 +42,7 @@ import {
 	withQueryLoopContext,
 } from '~stackable/higher-order'
 import { range } from 'lodash'
+import { substituteCoreIfDisabled } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -68,9 +69,9 @@ const TEMPLATE = [
 			left: 0,
 		},
 	}, [
-		[ 'stackable/text', {
+		substituteCoreIfDisabled( 'stackable/text', {
 			text: _x( 'Description for this block. Use this space for describing your block. Any text will do.', 'Content placeholder', i18n ),
-		} ],
+		} ),
 	] ],
 ]
 

src/blocks.js

@@ -13,7 +13,10 @@ import './disabled-blocks'
  * External dependencies
  */
 import { i18n } from 'stackable'
-import { addStackableBlockCategory, registerBlockType } from '~stackable/util'
+import {
+	addStackableBlockCategory,
+	registerBlockType,
+} from '~stackable/util'
 import { withVisualGuideContext } from '~stackable/higher-order'
 
 /**
@@ -45,7 +48,7 @@ const importAllAndRegister = r => {
 			settings.keywords = settings.keywords.map( keyword => __( keyword, i18n ) ) // eslint-disable-line @wordpress/i18n-no-variables
 		}
 
-		// Register the block.
+		// Register the block if it's not already registered and not disabled.
 		if ( ! getBlockType( name ) ) {
 			registerBlockType( name, settings )
 		}

src/components/admin-base-setting/index.js

@@ -5,11 +5,14 @@ let i = 1
 
 const AdminBaseSetting = props => {
 	const [ uid ] = useState( `ugb-admin-setting-${ i++ }` )
+	const isSearched = props.searchTerm && props.label.toLowerCase().includes( props.searchTerm )
 	const mainClasses = classnames( [
 		'ugb-admin-setting',
 		props.className,
 	], {
 		[ `ugb-admin-setting--${ props.size }` ]: props.size,
+		'ugb-admin-setting--highlight': isSearched,
+		'ugb-admin-setting--not-highlight': props.searchTerm && ! isSearched,
 	} )
 
 	return (

src/components/admin-toolbar-setting/editor.scss

@@ -0,0 +1,14 @@
+.ugb-admin-toolbar-setting__wrapper {
+	display: flex;
+	a {
+		margin-right: 10px;
+		width: 80px;
+	}
+	.ugb-admin-toolbar-setting {
+		display: flex;
+		.ugb-button-component {
+			padding: 14px;
+			width: 100%;
+		}
+	}
+}

src/components/admin-toolbar-setting/index.js

@@ -0,0 +1,74 @@
+import AdminBaseSetting from '../admin-base-setting'
+import Button from '../button'
+import { ButtonGroup } from '@wordpress/components'
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+
+const AdminToolbarSetting = props => {
+	return (
+		<AdminBaseSetting { ...props }>
+			<div className="ugb-admin-toolbar-setting__wrapper">
+				<a
+					href={ props.demoLink }
+					target="_blank"
+					rel="noopener noreferrer"
+					onClick={ ev => ev.stopPropagation() }
+				>
+					{ __( 'view demo', i18n ) }
+				</a>
+				<ButtonGroup
+					children={
+						props.controls.map( option => {
+							const isSelected = props.value ? props.value === option.value : props.placeholder === option.value
+							const tabindex = isSelected ? '0' : '-1'
+
+							return <Button
+								style={ option.selectedColor && isSelected ? { backgroundColor: option.selectedColor } : {} }
+								isPrimary={ ! option.selectedColor && isSelected }
+								key={ option.value }
+								label={ option.title || props.label }
+								tabIndex={ tabindex }
+								aria-pressed={ isSelected }
+								isSmall={ props.isSmall }
+								onClick={ () => {
+									if ( option.value === props.value ) {
+										return
+									}
+									props.onChange( option.value )
+								} }
+								onKeyDown={ e => {
+									const el = e.target
+									if ( el ) {
+										// On right, select the next value or loop to first.
+										if ( e.keyCode === 39 ) {
+											const nextEl = el.nextElementSibling || el.parentElement.firstElementChild
+											nextEl.focus()
+											nextEl.click()
+
+										// Trigger click on the previous option or loop to last.
+										} else if ( e.keyCode === 37 ) {
+											const prevEl = el.previousElementSibling || el.parentElement.lastElementChild
+											prevEl.focus()
+											prevEl.click()
+										}
+									}
+								} }
+								children={ <span className="ugb-admin-toolbar-setting__option">{ option.title }</span> }
+							/>
+						} )
+					}
+					className="ugb-admin-toolbar-setting"
+				/>
+			</div>
+		</AdminBaseSetting>
+	)
+}
+
+AdminToolbarSetting.defaultProps = {
+	controls: [],
+	label: '',
+	value: '',
+	onChange: () => {},
+}
+
+export default AdminToolbarSetting