(V2)
diff --git a/src/deprecated/v2/optimization-settings.php b/src/deprecated/v2/optimization-settings.php index 294f3be121..0a57a88c8a 100644 --- a/src/deprecated/v2/optimization-settings.php +++ b/src/deprecated/v2/optimization-settings.php @@ -35,7 +35,7 @@ function __construct() { } // Add the optimization setting. - add_action( 'stackable_settings_page_mid', array( $this, 'add_optimization_settings' ) ); + // add_action( 'stackable_settings_page_mid', array( $this, 'add_optimization_settings' ) ); } } diff --git a/src/deprecated/v2/welcome/admin.js b/src/deprecated/v2/welcome/admin.js index 42bf9822f7..fe4de05990 100644 --- a/src/deprecated/v2/welcome/admin.js +++ b/src/deprecated/v2/welcome/admin.js @@ -1,8 +1,3 @@ -/** - * Internal dependencies - */ -import blockData from './blocks' - /** * WordPress dependencies */ @@ -11,7 +6,6 @@ import { Component, useEffect, useState, Fragment, } from '@wordpress/element' import { send as ajaxSend } from '@wordpress/ajax' -import domReady from '@wordpress/dom-ready' import { Spinner } from '@wordpress/components' import { loadPromise, models } from '@wordpress/api' @@ -19,14 +13,12 @@ import { loadPromise, models } from '@wordpress/api' * External dependencies */ import { - v2disabledBlocks as disabledBlocks, i18n, v2nonce as nonce, } from 'stackable' import AdminToggleSetting from '~stackable/components/admin-toggle-setting' -import { createRoot } from '~stackable/util/element' -class BlockToggler extends Component { +export class BlockToggler extends Component { constructor() { super( ...arguments ) this.toggleBlock = this.toggleBlock.bind( this ) @@ -81,7 +73,7 @@ class BlockToggler extends Component { } render() { - const { blocks: blockData } = this.props + const { blocks: blockData, searchedSettings: searchedSettings } = this.props return (
@@ -105,6 +97,7 @@ class BlockToggler extends Component {
this.toggleBlock( blockName ) }
size="small"
@@ -119,7 +112,7 @@ class BlockToggler extends Component {
}
}
-const OptimizationSettings = () => {
+export const OptimizationSettings = ( { searchSettings } ) => {
const [ optimizeScriptLoad, setOptimizeScriptLoad ] = useState( false )
useEffect( () => {
@@ -140,6 +133,7 @@ const OptimizationSettings = () => {
return
{
/>
}
-
-// Load all the options into the UI.
-domReady( () => {
- if ( document.querySelector( '.s-settings-wrapper-v2' ) ) {
- createRoot( document.querySelector( '.s-settings-wrapper-v2' ) ).render(
-
+ { isDisabled
+ ?
+
+
+
+
+
+
+
+
+ )
+}
+
+// Side navigation with the save changes button and search on tabs
+const Sidenav = ( {
+ currentTab,
+ handleTabChange,
+ hasUnsavedChanges,
+ handleSettingsSave,
+ currentSearch,
+ filteredSearchTree,
+ isSaving,
+ isRecentlySaved,
+ hasV2Tab,
+} ) => {
+ const saveButtonClasses = classnames( [
+ 's-save-changes',
+ { 's-button-has-unsaved-changes': hasUnsavedChanges && ! isRecentlySaved },
+ ] )
return (
<>
- { BLOCK_CATEROGIES.map( ( {
- id, label, Icon,
- } ) => {
- const classes = classnames( [
- 's-box-block__title',
- `s-box-block__title--${ id }`,
- ] )
- return (
-
+
+ )
+}
+
+// Confirmation dialog when disabling a block that is dependent on another block.
+const ToggleBlockDialog = ( {
+ blockName,
+ blockList,
+ isDisabled,
+ onConfirm,
+ onCancel,
+} ) => {
+ const DERIVED_BLOCKS = getAllBlocks()
- const disableAllBlocks = type => () => {
- const newDisabledBlocks = [ ...disabledBlocks ]
- DERIVED_BLOCKS[ type ].forEach( block => {
- if ( ! newDisabledBlocks.includes( block.name ) ) {
- newDisabledBlocks.push( block.name )
+ const getBlockTitle = name => {
+ for ( const category in DERIVED_BLOCKS ) {
+ for ( const block of DERIVED_BLOCKS[ category ] ) {
+ if ( block.name === name ) {
+ return block.title
+ }
}
- } )
- setDisabledBlocks( newDisabledBlocks )
- save( newDisabledBlocks, type )
+ }
+ return name
}
- const toggleBlock = useCallback( ( name, type ) => {
- let newDisabledBlocks = null
- if ( disabledBlocks.includes( name ) ) {
- newDisabledBlocks = disabledBlocks.filter( block => block !== name )
- } else {
- newDisabledBlocks = [
- ...disabledBlocks,
- name,
- ]
- }
- setDisabledBlocks( newDisabledBlocks )
- save( newDisabledBlocks, type )
- }, [ setDisabledBlocks, disabledBlocks ] )
+ const blockTitle = getBlockTitle( blockName )
+
+ return (
+ { __( 'Error getting Stackable settings. We got the following error. Please contact your administrator.', i18n ) }
+ { error.responseJSON && +{ error.responseJSON.data.status } ({ error.responseJSON.code }). { error.responseJSON.message }
+ } +{ __( 'Disabling this block will also disable these blocks that require this block to function:', i18n ) }
// eslint-disable-line @wordpress/i18n-no-variables + :{ __( 'Enabling this block will also enable these blocks that are needed for this block to function:', i18n ) }
// eslint-disable-line @wordpress/i18n-no-variables + } +-
+ { blockList.map( ( block, i ) => (
+
- { getBlockTitle( block ) } + ) ) } +
-
- { Icon &&
- {
- setIsBusy( true )
- const model = new models.Settings( { stackable_enable_design_library: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- setSettings( {
- ...settings,
- stackable_enable_design_library: value, // eslint-disable-line camelcase
- } )
- } }
- help={ __( 'Adds a button on the top of the editor which gives access to a collection of pre-made block designs.', i18n ) }
+ {
- setIsBusy( true )
- const model = new models.Settings( { stackable_optimize_inline_css: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- setSettings( {
- ...settings,
- stackable_optimize_inline_css: value, // eslint-disable-line camelcase
- } )
- } }
- help={ __( 'Optimize inlined CSS styles. If this is enabled, similar selectors will be combined together, helpful if you changed Block Defaults.', i18n ) }
- />
- {
- setIsBusy( true )
- const model = new models.Settings( { stackable_auto_collapse_panels: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- setSettings( {
- ...settings,
- stackable_auto_collapse_panels: value, // eslint-disable-line camelcase
- } )
- } }
- help={ __( 'Collapse other inspector panels when opening another, keeping only one open at a time.', i18n ) }
- />
- {
- setIsBusy( true )
- const model = new models.Settings( { stackable_enable_block_linking: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- setSettings( {
- ...settings,
- stackable_enable_block_linking: value, // eslint-disable-line camelcase
- } )
- } }
- help={
+
+
+
+}
+
+const EditorSettings = props => {
+ const {
+ settings,
+ handleSettingsChange,
+ filteredSearchTree,
+ } = props
+
+ const groups = filteredSearchTree.find( tab => tab.id === 'editor-settings' ).groups
+ const blocks = groups.find( group => group.id === 'blocks' )
+ const editor = groups.find( group => group.id === 'editor' )
+ const toolbar = groups.find( group => group.id === 'toolbar' )
+ const inspector = groups.find( group => group.id === 'inspector' )
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
+
+ return (
+
-
- { Icon &&
-
- { isSaving === id &&
-
- { DERIVED_BLOCKS[ id ].map( ( block, i ) => {
- const isDisabled = disabledBlocks.includes( block.name )
-
- const demoLink = block[ 'stk-demo' ] && (
- ev.stopPropagation() }
- >
- { __( 'view demo', i18n ) }
-
- )
+
+
)
}
-// Implement pick without using lodash, because themes and plugins might remove
-// lodash from the admin.
-const pick = ( obj, keys ) => {
- return keys.reduce( ( acc, key ) => {
- if ( obj && obj.hasOwnProperty( key ) ) {
- acc[ key ] = obj[ key ]
- }
- return acc
- }, {} )
+const Searchbar = ( { currentSearch, handleSearchChange } ) => {
+ const handleSearch = e => {
+ handleSearchChange( e.target.value.toLowerCase() )
+ }
+ return (
+
+
+
+ )
}
-// Create an admin notice if there's an error fetching the settings.
-const SettingsNotice = () => {
- const [ error, setError ] = useState( null )
+// Main settings component
+const Settings = () => {
+ const [ settings, setSettings ] = useState( {} )
+ const [ unsavedChanges, setUnsavedChanges ] = useState( {} )
+ const [ currentTab, setCurrentTab ] = useState( 'editor-settings' )
+ const [ currentSearch, setCurrentSearch ] = useState( '' )
+ const [ isSaving, setIsSaving ] = useState( false )
+ const [ isRecentlySaved, setIsRecentlySaved ] = useState( false )
+ const [ hasV2Tab, setHasV2Tab ] = useState( false )
+
+ const hasV2Compatibility = currentSettings => {
+ return currentSettings.stackable_v2_frontend_compatibility === '1' ||
+ currentSettings.stackable_v2_editor_compatibility === '1' ||
+ currentSettings.stackable_v2_editor_compatibility_usage === '1'
+ }
+
+ const handleSettingsChange = useCallback( newSettings => {
+ setSettings( prev => ( { ...prev, ...newSettings } ) )
+ setUnsavedChanges( prev => ( { ...prev, ...newSettings } ) )
+ }, [] )
+
+ const handleSettingsSave = useCallback( () => {
+ if ( Object.keys( unsavedChanges ).length === 0 ) {
+ return
+ }
+ setIsSaving( true )
+ setIsRecentlySaved( true )
+ const model = new models.Settings( unsavedChanges )
+ model.save().then( () => {
+ // Add a little more time for the spinner for better feedback
+ setTimeout( () => {
+ setIsSaving( false )
+ }, 500 )
+ setTimeout( () => {
+ setIsRecentlySaved( false )
+ }, 1500 )
+ } )
+ setUnsavedChanges( {} )
+ }, [ unsavedChanges, settings ] )
useEffect( () => {
loadPromise.then( () => {
const settings = new models.Settings()
- settings.fetch().catch( error => {
- setError( error )
+ settings.fetch().then( response => {
+ setSettings( response )
+ // Should only be set initially since we have to reload after setting for it to work with the backend
+ setHasV2Tab( hasV2Compatibility( response ) )
} )
} )
}, [] )
- if ( ! error ) {
- return null
- }
+ // However, when disabling V2 blocks, update the settings page to disallow further configuration
+ useEffect( () => {
+ if ( ! hasV2Compatibility( settings ) ) {
+ setHasV2Tab( false )
+ }
+ }, [ settings ] )
- return (
-
-
- )
-}
+ }
-const EditorSettings = () => {
- const [ settings, setSettings ] = useState( {} )
- const [ isBusy, setIsBusy ] = useState( false )
- const [ saveTimeout, setSaveTimeout ] = useState( null )
+ window.addEventListener( 'beforeunload', handleBeforeUnload )
- useEffect( () => {
- loadPromise.then( () => {
- const settings = new models.Settings()
- settings.fetch().then( response => {
- setSettings( pick( response, [
- 'stackable_google_maps_api_key',
- 'stackable_enable_design_library',
- 'stackable_optimize_inline_css',
- 'stackable_block_default_width',
- 'stackable_block_wide_width',
- 'stackable_auto_collapse_panels',
- 'stackable_enable_block_linking',
- 'stackable_enable_carousel_lazy_loading',
- 'stackable_enable_text_default_block',
- ] ) )
+ return () => {
+ window.removeEventListener( 'beforeunload', handleBeforeUnload )
+ }
+ }, [ hasUnsavedChanges ] )
+
+ const filteredSearchTree = useMemo( () => {
+ if ( ! currentSearch ) {
+ return SEARCH_TREE
+ }
+ const loweredSearch = currentSearch.toLowerCase()
+
+ return SEARCH_TREE.map( tabs => {
+ const filtedGroups = tabs.groups.map( group => {
+ const filteredChildren = group.children.filter( child => {
+ return child.toLowerCase().includes( loweredSearch.toLowerCase() )
+ } )
+ return { ...group, children: filteredChildren }
} )
+ return { ...tabs, groups: filtedGroups }
} )
- }, [] )
+ }, [ currentSearch ] )
+
+ const props = {
+ settings,
+ handleSettingsChange,
+ filteredSearchTree,
+ currentTab,
+ }
return <>
- { __( 'Error getting Stackable settings. We got the following error. Please contact your administrator.', i18n ) }
- { error.responseJSON && -{ error.responseJSON.data.status } ({ error.responseJSON.code }). { error.responseJSON.message }
+ const hasUnsavedChanges = useMemo( () => Object.keys( unsavedChanges ).length > 0, [ unsavedChanges ] ) + + useEffect( () => { + const handleBeforeUnload = event => { + if ( hasUnsavedChanges ) { + event.preventDefault() + // Most browsers ignore the custom message, but returning a value triggers the dialog + // https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent/returnValue + event.returnValue = true } -
+ { groupLength <= 0 ? (
+ {
- clearTimeout( saveTimeout )
- setSettings( {
- ...settings,
- stackable_block_default_width: value, // eslint-disable-line camelcase
- } )
- setSaveTimeout( setTimeout( () => {
- setIsBusy( true )
- const model = new models.Settings( { stackable_block_default_width: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- }, 400 ) )
- } }
- help={ __( 'The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
- >
- {
- clearTimeout( saveTimeout )
- setSettings( {
- ...settings,
- stackable_block_wide_width: value, // eslint-disable-line camelcase
- } )
- setSaveTimeout( setTimeout( () => {
- setIsBusy( true )
- const model = new models.Settings( { stackable_block_wide_width: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- }, 400 ) )
- } }
- help={ __( 'The width used when a Columns block has its Content Width set to wide. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
- />
- {
- clearTimeout( saveTimeout )
- setSettings( {
- ...settings,
- stackable_google_maps_api_key: value, // eslint-disable-line camelcase
- } )
- setSaveTimeout(
- setTimeout( () => {
- setIsBusy( true )
- const model = new models.Settings( {
- stackable_google_maps_api_key: value, // eslint-disable-line camelcase
- } )
- model.save().then( () => setIsBusy( false ) )
- }, 400 )
- )
- } }
- help={
+ ) }
+
+ )
+}
+
+const Responsiveness = props => {
+ const {
+ settings,
+ handleSettingsChange,
+ filteredSearchTree,
+ } = props
+
+ const groups = filteredSearchTree.find( tab => tab.id === 'responsiveness' ).groups
+ const dynamicBreakpoints = groups.find( group => group.id === 'dynamic-breakpoints' )
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
+
+ return (
+ { __( 'No matching settings', i18n ) }
+ ) : ( <> - { __( 'Gives you the ability to link columns. Any changes you make on one column will automatically get applied on the other columns.', i18n ) } - - { __( 'Learn more', i18n ) } + { blocks.children.length > 0 && +
+ {
+ handleSettingsChange( { stackable_block_default_width: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_block_wide_width: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'The width used when a Columns block has its Content Width set to wide. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
+ />
+
+ }
+ { editor.children.length > 0 &&
+ { __( 'Block Widths', i18n ) }
+{ __( 'Adjust the width of Stackable blocks here.', i18n ) }
+
+ {
+ handleSettingsChange( { stackable_enable_text_default_block: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block.', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_design_library: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Adds a button on the top of the editor which gives access to a collection of pre-made block designs. Note: You can still access the Design Library by adding the Design Library block.', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_global_settings: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Adds a button on the top of the editor which gives access to Stackable settings. Note: You won\'t be able to access Stackable settings when this is disabled.', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_block_linking: value } ) // eslint-disable-line camelcase
+ } }
+ help={
+ <>
+ { __( 'Gives you the ability to link columns. Any changes you make on one column will automatically get applied on the other columns.', i18n ) }
+
+ { __( 'Learn more', i18n ) }
+
+ }
+ />
+
+ }
+ { toolbar.children.length > 0 &&
+ { __( 'Editor', i18n ) }
+{ __( 'You can customize some of the features and behavior of Stackable in the editor here.' ) }
+
+ {
+ handleSettingsChange( { stackable_enable_text_highlight: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Adds a toolbar button for highlighting text', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_dynamic_content: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Adds a toolbar button for inserting and modifying dynamic content', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_copy_paste_styles: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Adds a toolbar button for advanced copying and pasting block styles', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_reset_layout: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Adds a toolbar button for resetting the layout of a stackble block back to the original', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_save_as_default_block: value } ) // eslint-disable-line
+ } }
+ help={ __( 'Adds a toolbar button for saving a block as the default block', i18n ) }
+ />
+
+ }
+ { inspector.children.length > 0 &&
+ { __( 'Toolbar', i18n ) }
+{ __( 'You can disable some toolbar features here.', i18n ) }
+
+ {
+ handleSettingsChange( { stackable_help_tooltip_disabled: value ? '1' : '' } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Disables the help video tooltips that appear in the inspector.', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_auto_collapse_panels: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Collapse other inspector panels when opening another, keeping only one open at a time.', i18n ) }
+ />
+
+ }
- }
- />
- { __( 'Inspector', i18n ) }
+{ __( 'You can customize some of the features and behavior of Stackable in the inspector here.' ) }
+
+ { groupLength <= 0 ? (
+ {
- setIsBusy( true )
- const model = new models.Settings( { stackable_enable_carousel_lazy_loading: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- setSettings( {
- ...settings,
- stackable_enable_carousel_lazy_loading: value, // eslint-disable-line camelcase
- } )
- } }
- help={ __( 'Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading.', i18n ) }
- />
- {
- setIsBusy( true )
- const model = new models.Settings( { stackable_enable_text_default_block: value } ) // eslint-disable-line camelcase
- model.save().then( () => setIsBusy( false ) )
- setSettings( {
- ...settings,
- stackable_enable_text_default_block: value, // eslint-disable-line camelcase
- } )
- } }
- help={ __( 'If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block.', i18n ) }
- />
- { isBusy &&
-
+ )
}
-const DynamicBreakpointsSettings = () => {
- const [ tabletBreakpoint, setTabletBreakpoint ] = useState( '' )
- const [ mobileBreakpoint, setMobileBreakpoint ] = useState( '' )
- const [ isReady, setIsReady ] = useState( false )
- const [ isBusy, setIsBusy ] = useState( false )
+// Toggle the block states between enabled, disabled and hidden.
+// Enabled blocks are not stored in the settings object.
+const Blocks = props => {
+ const {
+ settings,
+ handleSettingsChange,
+ filteredSearchTree,
+ } = props
- useEffect( () => {
- setIsBusy( true )
- loadPromise.then( () => {
- const settings = new models.Settings()
- settings.fetch().then( response => {
- const breakpoints = response.stackable_dynamic_breakpoints
- if ( breakpoints ) {
- setTabletBreakpoint( breakpoints.tablet || '' )
- setMobileBreakpoint( breakpoints.mobile || '' )
+ const BLOCK_STATE_MAP = Object.freeze( {
+ enabled: BLOCK_STATE.ENABLED,
+ hidden: BLOCK_STATE.HIDDEN,
+ disabled: BLOCK_STATE.DISABLED,
+ } )
+ const DERIVED_BLOCKS = getAllBlocks()
+ const groups = filteredSearchTree.find( tab => tab.id === 'blocks' ).groups
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
+ const disabledBlocks = settings.stackable_block_states ?? {} // eslint-disable-line camelcase
+
+ const [ isDisabledDialogOpen, setIsDisabledDialogOpen ] = useState( false )
+ const [ isEnabledDialogOpen, setIsEnabledDialogOpen ] = useState( false )
+ const [ currentToggleBlock, setCurrentToggleBlock ] = useState( '' )
+ const [ currentToggleBlockList, setCurrentToggleBlockList ] = useState( [] )
+
+ // Map string states to integer block states
+ const mapStringStates = states => {
+ return states?.map(
+ state => BLOCK_STATE_MAP[ state.toLowerCase() ]
+ )
+ }
+
+ const enableAllBlocks = () => {
+ const newDisabledBlocks = {}
+ BLOCK_CATEROGIES.forEach( ( { id } ) => {
+ DERIVED_BLOCKS[ id ].forEach( block => {
+ const availableStates = mapStringStates( block[ 'stk-available-states' ] )
+ // Retain previous state if cannot be enabled
+ if ( availableStates && ! availableStates.includes( BLOCK_STATE.ENABLED ) && disabledBlocks[ block.name ] ) {
+ newDisabledBlocks[ block.name ] = disabledBlocks[ block.name ]
}
- setIsReady( true )
- setIsBusy( false )
} )
} )
- }, [] )
+ handleSettingsChange( { stackable_block_states: newDisabledBlocks } ) // eslint-disable-line camelcase
+ }
- useEffect( () => {
- if ( isReady ) {
- const t = setTimeout( () => {
- setIsBusy( true )
- const model = new models.Settings( {
- stackable_dynamic_breakpoints: { // eslint-disable-line camelcase
- tablet: tabletBreakpoint,
- mobile: mobileBreakpoint,
- },
- } )
- model.save().then( () => setIsBusy( false ) )
- }, 400 )
- return () => clearTimeout( t )
+ const disableAllBlocks = () => {
+ const newDisabledBlocks = {}
+ BLOCK_CATEROGIES.forEach( ( { id } ) => {
+ DERIVED_BLOCKS[ id ].forEach( block => {
+ const availableStates = mapStringStates( block[ 'stk-available-states' ] )
+ if ( ! availableStates || availableStates.includes( BLOCK_STATE.DISABLED ) ) {
+ newDisabledBlocks[ block.name ] = BLOCK_STATE.DISABLED
+ } else if ( availableStates.includes( BLOCK_STATE.HIDDEN ) ) { // If the block cannot be disabled, default to hidden.
+ newDisabledBlocks[ block.name ] = BLOCK_STATE.HIDDEN
+ } else if ( disabledBlocks[ block.name ] ) { // Retain previous state if cannot be disabled or hidden
+ newDisabledBlocks[ block.name ] = disabledBlocks[ block.name ]
+ }
+ } )
+ } )
+ handleSettingsChange( { stackable_block_states: newDisabledBlocks } ) // eslint-disable-line camelcase
+ }
+
+ const hideAllBlocks = () => {
+ const newDisabledBlocks = {}
+ BLOCK_CATEROGIES.forEach( ( { id } ) => {
+ DERIVED_BLOCKS[ id ].forEach( block => {
+ const availableStates = mapStringStates( block[ 'stk-available-states' ] )
+ if ( ! availableStates || availableStates.includes( BLOCK_STATE.HIDDEN ) ) {
+ newDisabledBlocks[ block.name ] = BLOCK_STATE.HIDDEN
+ } else if ( disabledBlocks[ block.name ] ) { // Retain previous state if cannot be hidden
+ newDisabledBlocks[ block.name ] = disabledBlocks[ block.name ]
+ }
+ } )
+ } )
+ handleSettingsChange( { stackable_block_states: newDisabledBlocks } ) // eslint-disable-line camelcase
+ }
+
+ const toggleBlock = ( name, value ) => {
+ const valueInt = Number( value )
+ let newDisabledBlocks = { ...disabledBlocks }
+
+ setCurrentToggleBlock( name )
+
+ // Check if a parent is being enabled
+ if ( valueInt === BLOCK_STATE.ENABLED ) {
+ // Get the parent's disabled/hidden children and confirm if they will also be enabled
+ const childrenBlocks = getChildrenBlocks( name ).filter( block => block in disabledBlocks )
+ if ( childrenBlocks.length > 0 ) {
+ setCurrentToggleBlockList( childrenBlocks )
+ setIsEnabledDialogOpen( true )
+ } else {
+ delete newDisabledBlocks[ name ]
+ }
+ } else if ( valueInt === BLOCK_STATE.DISABLED ) { // Check if a child is being disabled
+ // Get the child's enabled parents and confirm if they will also be disabled
+ const parentBlocks = getParentBlocks( name ).filter( block => ! ( block in disabledBlocks ) )
+ if ( parentBlocks.length > 0 ) {
+ setCurrentToggleBlockList( parentBlocks )
+ setIsDisabledDialogOpen( true )
+ } else {
+ newDisabledBlocks = { ...disabledBlocks, [ name ]: valueInt }
+ }
+ } else {
+ newDisabledBlocks = { ...disabledBlocks, [ name ]: valueInt }
}
- }, [ tabletBreakpoint, mobileBreakpoint, isReady ] )
-
- return { __( 'No matching settings', i18n ) }
+ ) : ( <> - { __( - 'Adding a Google API Key enables additional features of the Stackable Map Block.', - i18n - ) } - - { __( 'Learn more', i18n ) } + { dynamicBreakpoints.children.length > 0 && +
+ {
+ handleSettingsChange( {
+ stackable_dynamic_breakpoints: { // eslint-disable-line camelcase
+ tablet: value,
+ mobile: settings.stackable_dynamic_breakpoints.mobile || '', // eslint-disable-line camelcase
+ },
+ } )
+ } }
+ placeholder="1024"
+ > px
+ {
+ handleSettingsChange( {
+ stackable_dynamic_breakpoints: { // eslint-disable-line camelcase
+ tablet: settings.stackable_dynamic_breakpoints.tablet || '', // eslint-disable-line camelcase
+ mobile: value,
+ },
+ } )
+ } }
+ placeholder="768"
+ > px
+
+ }
- }
- />
- { __( 'Dynamic Breakpoints', i18n ) }
++ { __( 'Blocks can be styles differently for tablet and mobile screens, and some styles adjust to make them fit better in smaller screens. You can change the widths when tablet and mobile views are triggered. ', i18n ) } + + { __( 'Learn more', i18n ) } + +
+
-
- }
-
+ ) }
+
- setTabletBreakpoint( value ) }
- placeholder="1024"
- > px
- setMobileBreakpoint( value ) }
- placeholder="768"
- > px
-
- { isBusy &&
-
- {
+ setIsDisabledDialogOpen( false )
+ } }
+ />
+ ) }
+
+ { isEnabledDialogOpen && currentToggleBlockList && (
+ {
+ setIsEnabledDialogOpen( false )
+ } }
+ />
+ ) }
+
+
-
+const GlobalSettings = props => {
+ const groups = props.filteredSearchTree.find( tab => tab.id === 'global-settings' ).groups
+ const globalSettings = groups.find( group => group.id === 'global-settings' )
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
+
+ return (
+
-
+ { groupLength <= 0 ? (
+
- }
-
+
+ )
}
-const GlobalSettings = () => {
- const [ forceTypography, setForceTypography ] = useState( false )
+const Optimizations = props => {
+ const {
+ settings,
+ handleSettingsChange,
+ filteredSearchTree,
+ } = props
- useEffect( () => {
- loadPromise.then( () => {
- const settings = new models.Settings()
- settings.fetch().then( response => {
- setForceTypography( !! response.stackable_global_force_typography )
- } )
- } )
- }, [] )
+ const groups = filteredSearchTree.find( tab => tab.id === 'optimizations' ).groups
+ const optimizations = groups.find( group => group.id === 'optimizations' )
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
- const updateForceTypography = value => {
- const model = new models.Settings( { stackable_global_force_typography: value } ) // eslint-disable-line camelcase
- model.save()
- setForceTypography( value )
- }
+ return (
+ { __( 'No matching settings', i18n ) }
+ ) : ( +
+
+ ) }
{ __( 'Blocks', i18n ) }
+{ __( 'Here you can enable, hide and disable Stackable blocks. Hiding blocks will hide the block from the list of available blocks. Disabling blocks will prevent them from being registered at all. When using block variations or design library patterns, disabled blocks will be substituted with the relevant core blocks.', i18n ) }
+
+
+
+
+
+ { BLOCK_CATEROGIES.map( ( {
+ id, label, Icon,
+ } ) => {
+ const classes = classnames( [
+ 's-box-block__title',
+ `s-box-block__title--${ id }`,
+ ] )
+ const group = groups.find( group => group.id === id )
+ return group.children.length > 0 && (
+
+
+ { Icon &&
+
+ )
+ } ) }
+
+ { Icon &&
+
+ { DERIVED_BLOCKS[ id ].map( ( block, i ) => {
+ const blockState = disabledBlocks[ block.name ] ?? BLOCK_STATE.ENABLED
+ const availableStates = mapStringStates( block[ 'stk-available-states' ] )
+ // If there is only one state, do not render the block
+ if ( availableStates && availableStates.length <= 1 ) {
+ return null
+ }
+ return (
+ {
+ toggleBlock( block.name, value )
+ } }
+ isSmall={ true }
+ />
+ )
+ } ) }
+
+
+ { groupLength <= 0 ? (
+
+ )
+}
- return { __( 'No matching settings', i18n ) }
+ ) : ( + <> + { optimizations.children.length > 0 && +
+ {
+ handleSettingsChange( { stackable_optimize_inline_css: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Optimize inlined CSS styles. If this is enabled, similar selectors will be combined together, helpful if you changed Block Defaults.', i18n ) }
+ />
+ {
+ handleSettingsChange( { stackable_enable_carousel_lazy_loading: value } ) // eslint-disable-line camelcase
+ } }
+ help={ __( 'Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading.', i18n ) }
+ />
+
+ }
+
+ ) }
+ { __( 'Optimizations', i18n ) }
+{ __( 'Here you can adjust some optimization settings that are performed by Stackable.', i18n ) }
+
+ { groupLength <= 0 ? (
+
+ )
}
-const IconSettings = () => {
- const [ faVersion, setFaVersion ] = useState( '' )
+const EditorModeSettings = lazy( () => import( '../../pro__premium_only/src/welcome/editor-mode' ) )
- useEffect( () => {
- loadPromise.then( () => {
- const settings = new models.Settings()
- settings.fetch().then( response => {
- setFaVersion( response.stackable_icons_fa_free_version || '6.5.1' )
- } )
- } )
- }, [] )
+const RoleManager = props => {
+ const groups = props.filteredSearchTree.find( tab => tab.id === 'role-manager' ).groups
+ props.roleManager = groups.find( group => group.id === 'role-manager' )
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
- const updateFaVersion = value => {
- const model = new models.Settings( { stackable_icons_fa_free_version: value } ) // eslint-disable-line camelcase
- model.save()
- setFaVersion( value )
- }
+ return (
+ { __( 'No matching settings', i18n ) }
+ ) : ( + <> + { globalSettings.children.length > 0 && +
+ {
+ props.handleSettingsChange( { stackable_global_force_typography: value } ) // eslint-disable-line camelcase
+ } }
+ disabled={ __( 'Not forced', i18n ) }
+ enabled={ __( 'Force styles', i18n ) }
+ />
+
+ }
+
+ ) }
+ { __( 'Global Settings', i18n ) }
+{ __( 'Here you can tweak Global Settings that affect the styles across your entire site.', i18n ) }
+
+ { groupLength <= 0 ? (
+
+ )
+}
- return { __( 'No matching settings', i18n ) }
+ ) : ( + <> + { props.roleManager.children.length > 0 && +
+
+ }
+
+ ) }
+ { __( 'Role Manager', i18n ) }
++ { __( 'Lock the Block Editor\'s inspector for different user roles, and give clients edit access to only images and content. Content Editing Mode affects all blocks. ', i18n ) } + + { __( 'Learn more', i18n ) } + +
+ { isPro + ?
+
+
+ : + { __( 'This is only available in Stackable Premium. ', i18n ) } + + { __( 'Go Premium', i18n ) } + +
+ } +
-
+const CustomFieldsEnableSettings = lazy( () => import( '../../pro__premium_only/src/welcome/custom-fields-toggle' ) )
+const CustomFieldsManagerSettings = lazy( () => import( '../../pro__premium_only/src/welcome/custom-fields-roles' ) )
+
+const CustomFields = props => {
+ const groups = props.filteredSearchTree.find( tab => tab.id === 'custom-fields-settings' ).groups
+ props.customFields = groups.find( group => group.id === 'custom-fields-settings' )
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
+
+ return (
+
+ { groupLength <= 0 ? (
+
- { __( 'No matching settings', i18n ) }
+ ) : ( + <> + { props.customFields.children.length > 0 && +
+
+ }
+
+ ) }
+
+ { __( 'Custom Fields', i18n ) }
+ { isPro && +
+
+
+ }
+ + { __( 'Create Custom Fields that you can reference across your entire site. You can assign which roles can manage your Custom Fields. ', i18n ) } + + { __( 'Learn more', i18n ) } + +
+ { isPro + ?
+
+
+ : + { __( 'This is only available in Stackable Premium. ', i18n ) } + + { __( 'Go Premium', i18n ) } + +
+ } +
-
+ { groupLength <= 0 ? (
+
-
+ )
}
const AdditionalOptions = props => {
- const [ helpTooltipsDisabled, setHelpTooltipsDisabled ] = useState( false )
- const [ generateNativeGlobalColors, setGenerateNativeGlobalColors ] = useState( false )
- const [ v2EditorBackwardCompatibility, setV2EditorBackwardCompatibility ] = useState( false )
- const [ v2EditorBackwardCompatibilityUsage, setV2EditorBackwardCompatibilityUsage ] = useState( false )
- const [ v2FrontendBackwardCompatibility, setV2FrontendBackwardCompatibility ] = useState( false )
- const [ showPremiumNotices, setShowPremiumNotices ] = useState( false )
- const [ isBusy, setIsBusy ] = useState( false )
+ const {
+ settings,
+ handleSettingsChange,
+ filteredSearchTree,
+ } = props
- useEffect( () => {
- setIsBusy( true )
- loadPromise.then( () => {
- const settings = new models.Settings()
- settings.fetch().then( response => {
- setHelpTooltipsDisabled( response.stackable_help_tooltip_disabled === '1' )
- setGenerateNativeGlobalColors( !! response.stackable_global_colors_native_compatibility )
- setV2EditorBackwardCompatibility( response.stackable_v2_editor_compatibility === '1' )
- setV2EditorBackwardCompatibilityUsage( response.stackable_v2_editor_compatibility_usage === '1' )
- setV2FrontendBackwardCompatibility( response.stackable_v2_frontend_compatibility === '1' )
- setShowPremiumNotices( response.stackable_show_pro_notices === '1' )
- setIsBusy( false )
- } )
- } )
- }, [] )
+ const groups = filteredSearchTree.find( tab => tab.id === 'other-settings' ).groups
+ const miscellaneous = groups.find( group => group.id === 'miscellaneous' )
+ const migrationSettings = groups.find( group => group.id === 'migration-settings' )
+ const groupLength = groups.reduce( ( acc, curr ) => acc + curr.children.length, 0 )
- const updateSetting = settings => {
- setIsBusy( true )
- const model = new models.Settings( settings )
- model.save().then( () => setIsBusy( false ) )
+ const searchClassname = ( label, searchedSettings ) => {
+ return searchedSettings.children.includes( label ) ? '' : 'ugb-admin-setting--not-highlight'
}
return (
- { __( 'No matching settings', i18n ) }
+ ) : ( + <> + { props.integrations.children.length > 0 && +
+ {
+ handleSettingsChange( { stackable_google_maps_api_key: value } ) // eslint-disable-line camelcase
+ } }
+ help={
+ <>
+ { __(
+ 'Adding a Google API Key enables additional features of the Stackable Map Block.',
+ i18n
+ ) }
+
+ { __( 'Learn more', i18n ) }
+
+ }
+ />
+ { isPro
+ ?
+ }
+
+ ) }
{ __( 'Integrations', i18n ) }
+{ __( 'Here are settings for the different integrations available in Stackable.', i18n ) }
+
+
+
+ : <>
+
+
+
+
+ }
+
+
+
+
+
+
+ {
+ handleSettingsChange( { stackable_icons_fa_free_version: value } ) // eslint-disable-line camelcase
+ } }
+ />
+
+
- { props.showProNoticesOption &&
- {
- updateSetting( { stackable_show_pro_notices: checked ? '1' : '' } ) // eslint-disable-line camelcase
- setShowPremiumNotices( checked )
- } }
- />
- }
- {
- updateSetting( { stackable_help_tooltip_disabled: checked ? '1' : '' } ) // eslint-disable-line camelcase
- setHelpTooltipsDisabled( checked )
- } }
- />
- {
- updateSetting( { stackable_global_colors_native_compatibility: checked } ) // eslint-disable-line camelcase
- setGenerateNativeGlobalColors( checked )
- } }
- />
- {
- const settings = { stackable_v2_editor_compatibility: checked ? '1' : '' } // eslint-disable-line camelcase
- if ( checked ) {
- settings.stackable_v2_editor_compatibility_usage = '' // eslint-disable-line camelcase
- setV2EditorBackwardCompatibilityUsage( false )
+
{ __( '🏠 Migration Settings', i18n ) }
-- { __( 'Migrating from version 2 to version 3?', i18n ) } - - { __( 'Learn more about migration and the settings below', i18n ) } -
-
+ { groupLength <= 0 ? (
+ {
- const settings = { stackable_v2_editor_compatibility_usage: checked ? '1' : '' } // eslint-disable-line camelcase
- if ( checked ) {
- settings.stackable_v2_editor_compatibility = '' // eslint-disable-line camelcase
- setV2EditorBackwardCompatibility( false )
+ { migrationSettings.children.length > 0 &&
+ {
- updateSetting( { stackable_v2_frontend_compatibility: checked ? '1' : '' } ) // eslint-disable-line camelcase
- setV2FrontendBackwardCompatibility( checked )
- } }
- />
- { isBusy &&
-
)
}
-AdditionalOptions.defaultProps = {
- showProNoticesOption: false,
+const V2Settings = props => {
+ const groups = props.filteredSearchTree.find( tab => tab.id === 'v2-settings' ).groups
+ const optimizations = groups.find( group => group.id === 'optimizations' )
+ const blocks = groups.find( group => group.id === 'blocks' )
+
+ const classes = classnames( [
+ 's-v2-settings',
+ { 's-settings-hide': props.currentTab !== 'v2-settings' },
+ ] )
+
+ return (
+ { __( 'No matching settings', i18n ) }
+ ) : ( + <> + { miscellaneous.children.length > 0 && +
+ {
+ handleSettingsChange( { stackable_show_pro_notices: checked ? '1' : '' } ) // eslint-disable-line camelcase
+ } }
+ />
+ }
+ {
+ handleSettingsChange( { stackable_global_colors_native_compatibility: checked } ) // eslint-disable-line camelcase
+ } }
+ />
+
}
- updateSetting( settings )
- setV2EditorBackwardCompatibility( checked )
- } }
- />
- { __( 'Miscellaneous', i18n ) }
+{ __( 'Below are other minor settings. Some may be useful when upgrading from older versions of Stackable.', i18n ) }
+ { showProNoticesOption && +
+ {
+ if ( checked ) {
+ handleSettingsChange( { stackable_v2_editor_compatibility_usage: '' } ) // eslint-disable-line camelcase
+ }
+ handleSettingsChange( { stackable_v2_editor_compatibility: checked ? '1' : '' } ) // eslint-disable-line camelcase
+ } }
+ />
+ {
+ if ( checked ) {
+ handleSettingsChange( { stackable_v2_editor_compatibility: '' } ) // eslint-disable-line camelcase
+ }
+ handleSettingsChange( { stackable_v2_editor_compatibility_usage: checked ? '1' : '' } ) // eslint-disable-line camelcase
+ } }
+ />
+ {
+ handleSettingsChange( { stackable_v2_frontend_compatibility: checked ? '1' : '' } ) // eslint-disable-line camelcase
+ } }
+ />
+
}
- updateSetting( settings )
- setV2EditorBackwardCompatibilityUsage( checked )
- } }
- />
- { __( 'Migration Settings', i18n ) }
+{ __( 'After enabling the version 2 blocks, please refresh the page to re-fetch the blocks from the server.', i18n ) }
++ { __( 'Migrating from version 2 to version 3?', i18n ) } + + { __( 'Learn more about migration and the settings below', i18n ) } +
+
-
- }
+
+ ) }
+ { optimizations.children.length > 0 &&
+
+ )
}
// Load all the options into the UI.
domReady( () => {
- // This is for the getting started block list.
- if ( document.querySelector( '.s-getting-started__block-list' ) ) {
- createRoot(
- document.querySelector( '.s-getting-started__block-list' )
- ).render(
-
+
+ }
+ { blocks.children.length > 0 &&
+ { __( '🏃♂️ Optimization Settings', i18n ) } (V2)
+
+ { __( 'Here are some settings that you can tweak to optimize Stackable.', i18n ) }
+ { __( 'Learn more.', i18n ) }
+
+ { __( 'This only works for version 2 blocks.', i18n ) }
+
+
+ }
+ { __( 'Enable & Disable Blocks', i18n ) } (V2)
+ { __( 'This only works for version 2 blocks.', i18n ) } +
-
+
+
-
print_header() ?>
print_premium_button() ?>
print_tabs() ?>
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- can_use_premium_code() ) : ?>
-
-
-
-
-
- can_use_premium_code() ) : ?>
-
-
-
-
-
-
+
+
-
-
-
-
-
- ', '' ) ?>
- -', '' ) ?>
- -' . __( 'Learn more', STACKABLE_I18N ) . '' ?>
- - can_use_premium_code() ) : ?> -' . __( 'Learn more', STACKABLE_I18N ) . '' ?>
- - - can_use_premium_code() ) : ?> - - -
-
-
-
- ', '' ) ?>
- - can_use_premium_code() ) : ?> - - -- - -
+
+
+
+
-
+