Merge branch 'develop' of https://github.com/gambitph/Stackable into develop

Author: [email protected]

src/components/style-guide-popover/index.js

@@ -18,7 +18,6 @@ import { Popover, Button } from '@wordpress/components'
 import {
 	Icon, close as closeIcon, download as downloadIcon,
 } from '@wordpress/icons'
-import { useDesignSystem } from '~stackable/hooks'
 
 const StyleGuidePopover = props => {
 	const { onClose } = props
@@ -32,8 +31,6 @@ const StyleGuidePopover = props => {
 		return [ el, el?.offsetWidth, el?.offsetHeight ]
 	}, [] )
 
-	const designSystem = useDesignSystem()
-
 	// Lazy load the StyleGuide component
 	useEffect( () => {
 		const loadStyleGuide = async () => {
@@ -42,7 +39,7 @@ const StyleGuidePopover = props => {
 				const { default: StyleGuideComponent } = await import(
 					/* webpackChunkName: "style-guide" */
 					/* webpackMode: "lazy" */
-					'../../lazy-components/style-guide'
+					'../../lazy-components/style-guide/editor-style-guide'
 				)
 				setStyleGuide( () => StyleGuideComponent )
 			} catch ( err ) {
@@ -85,7 +82,7 @@ const StyleGuidePopover = props => {
 					{ __( 'Loading style guide…', i18n ) }
 				</div>
 			) : StyleGuide ? (
-				<StyleGuide { ...props } designSystem={ designSystem } contentRef={ styleGuideRef } />
+				<StyleGuide { ...props } contentRef={ styleGuideRef } />
 			) : (
 				<div className="ugb-style-guide__error">
 					{ __( 'Failed to load style guide', i18n ) }

src/hooks/index.js

@@ -21,4 +21,3 @@ export * from './use-global-block-layout-defaults'
 export * from './use-block-color-schemes'
 export * from './use-preset-controls'
 export * from './use-block-style-context'
-export * from './use-design-system'

src/lazy-components/style-guide/editor-style-guide.js

@@ -0,0 +1,10 @@
+import { default as StyleGuide } from '.'
+import { useDesignSystem } from './use-design-system'
+
+const EditorStyleGuide = props => {
+	const designSystem = useDesignSystem()
+
+	return <StyleGuide { ...props } designSystem={ designSystem } />
+}
+
+export default EditorStyleGuide

src/hooks/use-design-system.js …ponents/style-guide/use-design-system.jssrc/hooks/use-design-system.js renamed to src/lazy-components/style-guide/use-design-system.js src/hooks/use-design-system.js renamed to src/lazy-components/style-guide/use-design-system.js

@@ -1,11 +1,11 @@
-import { useBlockColorSchemes } from './use-block-color-schemes'
-import { useBlockLayoutDefaults } from './use-global-block-layout-defaults'
+import { useBlockColorSchemes } from '../../hooks/use-block-color-schemes'
+import { useBlockLayoutDefaults } from '../../hooks/use-global-block-layout-defaults'
 
 import { settings } from 'stackable'
 import { generateStyles } from '~stackable/block-components'
 import { createTypographyStyles } from '~stackable/util/typography/styles'
 import { createTypographyDescription } from '~stackable/util/typography/description'
-import { renderGlobalBlockLayoutStyles } from '~stackable/plugins/global-settings/utils'
+import { renderGlobalBlockLayoutStyles } from '~stackable/plugins/global-settings/utils/use-block-layout-editor-loader'
 import { renderGlobalBlockStyleStyles } from '~stackable/plugins/global-settings/block-styles/editor-loader'
 import { renderGlobalColorSchemeStyles } from '~stackable/plugins/global-settings/color-schemes/editor-loader'
 import classnames from 'classnames'