Merge pull request #3676 from gambitph/feat/3673/3674-block-defaults

feat: add block defaults for heading theme margin and icon for icon l…

Author: bfintal

src/block/heading/index.js

@@ -17,6 +17,7 @@ import metadata from './block.json'
 import example from './example'
 import deprecated from './deprecated'
 import substitute from './substitute'
+import variations from './variations'
 
 export const settings = {
 	...metadata,
@@ -33,6 +34,7 @@ export const settings = {
 	save,
 	example,
 	transforms,
+	variations,
 	merge( attributes, attributesToMerge ) {
 		// Make sure that the selection is always at the end of the text.
 		// @see https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-library/src/paragraph/index.js

src/block/heading/transforms.js

@@ -3,10 +3,16 @@
  */
 import { createBlock, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks'
 
+/**
+ * External dependencies
+ */
+import { settings } from 'stackable'
+
 /**
  * Internal dependencies
  */
 import { TEMPLATE as ICON_LABEL_TEMPLATE } from '../icon-label/edit'
+import { getHeadingDefaultAttributes } from './util'
 
 const transforms = {
 	from: [
@@ -15,15 +21,21 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'stackable/text' ],
 			transform: attributes => {
-				return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', { ...attrs } ) )
+				return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', {
+					...getHeadingDefaultAttributes( settings ),
+					...attrs,
+				} ) )
 			},
 		},
 		{
 			type: 'block',
 			isMultiBlock: true,
 			blocks: [ 'stackable/subtitle' ],
 			transform: attributes => {
-				return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', { ...attrs } ) )
+				return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', {
+					...getHeadingDefaultAttributes( settings ),
+					...attrs,
+				} ) )
 			},
 		},
 		{
@@ -32,6 +44,7 @@ const transforms = {
 			blocks: [ 'core/paragraph' ],
 			transform: attributes => {
 				return attributes.map( ( { content } ) => createBlock( 'stackable/heading', {
+					...getHeadingDefaultAttributes( settings ),
 					text: content,
 				} ) )
 			},
@@ -42,6 +55,7 @@ const transforms = {
 			blocks: [ 'core/heading' ],
 			transform: attributes => {
 				return attributes.map( ( { content } ) => createBlock( 'stackable/heading', {
+					...getHeadingDefaultAttributes( settings ),
 					text: content,
 				} ) )
 			},

src/block/heading/util.js

@@ -0,0 +1,12 @@
+// This helper is called only by the inserter variation and explicit block
+// transforms. Parsed existing blocks and Design Library blocks do not call it.
+export const getHeadingDefaultAttributes = ( editorSettings = {} ) => {
+	const isPost = editorSettings.stackable_current_post_type === 'post'
+
+	return {
+		// Posts and non-post editor screens have separate admin defaults.
+		useThemeTextMargins: isPost
+			? !! editorSettings.stackable_enable_heading_default_theme_margins_posts
+			: !! editorSettings.stackable_enable_heading_default_theme_margins_non_posts,
+	}
+}

src/block/heading/variations.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { settings } from 'stackable'
+
+/**
+ * Internal dependencies
+ */
+import { getHeadingDefaultAttributes } from './util'
+
+// Scope this variation to direct inserter creation.
+export const getHeadingVariations = ( editorSettings = {} ) => [
+	{
+		name: 'default',
+		isDefault: true,
+		scope: [ 'inserter' ],
+		attributes: getHeadingDefaultAttributes( editorSettings ),
+	},
+]
+
+export default getHeadingVariations( settings )

src/block/icon-list/index.js

@@ -13,6 +13,7 @@ import schema from './schema'
 import example from './example'
 import deprecated from './deprecated'
 import transforms from './transforms'
+import variations from './variations'
 
 /**
  * WordPress dependencies
@@ -35,4 +36,5 @@ export const settings = {
 	edit,
 	save,
 	transforms,
+	variations,
 }

src/block/icon-list/transforms.js

@@ -6,9 +6,15 @@ import {
 	create, split, toHTMLString,
 } from '@wordpress/rich-text'
 
+/**
+ * External dependencies
+ */
+import { settings } from 'stackable'
+
 /**
  * Internal dependencies
  */
+import { getIconListDefaultAttributes } from './util'
 
 // import { createListBlockFromDOMElement } from './util'
 
@@ -69,6 +75,7 @@ const transforms = {
 				return createBlock(
 					'stackable/icon-list',
 					{
+						...getIconListDefaultAttributes( settings ),
 						anchor: blockAttributes.anchor,
 					},
 					childBlocks
@@ -85,6 +92,7 @@ const transforms = {
 				return createBlock(
 					'stackable/icon-list',
 					{
+						...getIconListDefaultAttributes( settings ),
 						anchor: blockAttributes.anchor,
 					},
 					childBlocks

src/block/icon-list/util.js

@@ -12,6 +12,13 @@ import { i18n } from 'stackable'
 // The default icon list SVG.
 export const DEFAULT_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190"><polygon points="173.8,28.4 60.4,141.8 15.7,97.2 5.1,107.8 60.4,163 184.4,39 173.8,28.4"/></svg>'
 
+// This helper is called only by the inserter variation and explicit block
+// transforms. Parsed existing blocks and Design Library blocks do not call it.
+export const getIconListDefaultAttributes = ( editorSettings = {} ) => ( {
+	// Preserve the original schema icon when no custom admin default is set.
+	icon: editorSettings.stackable_icon_list_block_default_icon || DEFAULT_SVG,
+} )
+
 export const IconSvgDef = props => {
 	const { icon, uniqueId } = props
 
@@ -122,4 +129,3 @@ export function migrateTypeToInlineStyle( attributes ) {
 
 	return attributes
 }
-

src/block/icon-list/variations.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { settings } from 'stackable'
+
+/**
+ * Internal dependencies
+ */
+import { getIconListDefaultAttributes } from './util'
+
+// Scope this variation to direct inserter creation.
+export const getIconListVariations = ( editorSettings = {} ) => [
+	{
+		name: 'default',
+		isDefault: true,
+		scope: [ 'inserter' ],
+		attributes: getIconListDefaultAttributes( editorSettings ),
+	},
+]
+
+export default getIconListVariations( settings )

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

@@ -0,0 +1,3 @@
+.ugb-admin-icon-setting {
+	--wp-components-color-accent: var(--stk-skin-dark);
+}

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

@@ -0,0 +1,32 @@
+import AdminBaseSetting from '../admin-base-setting'
+import IconControl from '../icon-control'
+import classnames from 'classnames'
+
+const defaultIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190"><polygon points="173.8,28.4 60.4,141.8 15.7,97.2 5.1,107.8 60.4,163 184.4,39 173.8,28.4"/></svg>'
+
+const AdminIconSetting = props => {
+	return (
+		<AdminBaseSetting
+			{ ...props }
+			className={ classnames( props.className, 'ugb-admin-icon-setting' ) }>
+			<IconControl
+				label=""
+				value={ props.value }
+				defaultValue={ defaultIcon }
+				onChange={ icon => {
+					props.onChange( icon )
+				} }
+				allowReset={ false }
+				hasPanelModifiedIndicator={ true }
+			/>
+			{ props.children }
+		</AdminBaseSetting>
+	)
+}
+
+AdminIconSetting.defaultProps = {
+	value: '',
+	onChange: () => {},
+}
+
+export default AdminIconSetting