diff --git a/src/index.js b/src/index.js index c84e51f..1e8fbbd 100644 --- a/src/index.js +++ b/src/index.js @@ -14,3 +14,7 @@ import './blocks/accordion-item'; import './blocks/carousel'; import './blocks/carousel-slide'; import './blocks/starter'; + +// Block Variations +import './variations/cover'; +import './variations/columns'; diff --git a/src/variations/columns/index.js b/src/variations/columns/index.js new file mode 100644 index 0000000..5333199 --- /dev/null +++ b/src/variations/columns/index.js @@ -0,0 +1,131 @@ +import { __ } from '@wordpress/i18n'; +import icons from '../utils/icons'; + +/** + * Register block variation. + * + * @author JC Palmes + * @since 2.0.0 + * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block + */ +wp.blocks.registerBlockVariation ( + 'core/columns', { + name: __( 'services', 'wdsblocks' ), + title: __( 'Services', 'wdsblocks' ), + attributes: { + align: 'wide', + className: 'services-column', + }, + icon: icons.services, + scope: [ 'inserter' ], + innerBlocks: [ + [ 'core/column', {}, + [ + [ 'core/group', + { + className: 'service-group', + textColor: 'black', + }, + [ + [ 'core/image', + { + align: 'center', + className: 'service-image', + url: 'https://via.placeholder.com/300x200.png/09f/fff', + height: 200, + width: 300, + }, + ], + [ 'core/heading', + { + className: 'service-title has-text-align-center', + level: 3, + placeholder: __( 'Service Name', 'wdsblocks' ), + }, + ], + [ 'core/paragraph', + { + align: 'center', + className: 'service-content', + placeholder: __( 'Add Service Description', 'wdsblocks' ), + }, + ], + ], + ], + ], + ], + [ 'core/column', {}, + [ + [ 'core/group', + { + backgroundColor: '', + className: 'service-group', + textColor: 'black', + }, + [ + [ 'core/image', + { + align: 'center', + className: 'service-image', + url: 'https://via.placeholder.com/300x200.png/09f/fff', + height: 200, + width: 300, + }, + ], + [ 'core/heading', + { + className: 'service-title has-text-align-center', + level: 3, + placeholder: __( 'Service Name', 'wdsblocks' ), + }, + ], + [ 'core/paragraph', + { + align: 'center', + className: 'service-content', + placeholder: __( 'Add Service Description', 'wdsblocks' ), + }, + ], + ], + ], + ], + ], + [ 'core/column', {}, + [ + [ 'core/group', + { + backgroundColor: '', + className: 'service-group', + textColor: 'black', + }, + [ + [ 'core/image', + { + align: 'center', + className: 'service-image', + url: 'https://via.placeholder.com/300x200.png/09f/fff', + height: 200, + width: 300, + }, + ], + [ 'core/heading', + { + className: 'service-title has-text-align-center', + level: 3, + placeholder: __( 'Service Name', 'wdsblocks' ), + }, + ], + [ 'core/paragraph', + { + align: 'center', + className: 'service-content', + placeholder: __( 'Add Service Description', 'wdsblocks' ), + }, + ], + ], + ], + ], + ], + ], + } +); diff --git a/src/variations/cover/index.js b/src/variations/cover/index.js new file mode 100644 index 0000000..bed0044 --- /dev/null +++ b/src/variations/cover/index.js @@ -0,0 +1,58 @@ +import { __ } from '@wordpress/i18n'; +import icons from '../utils/icons'; + +/** + * Register block variation. + * + * @author JC Palmes + * @since 2.0.0 + * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block + */ +wp.blocks.registerBlockVariation( + 'core/cover', { + name: __( 'cta-cover', 'wdsblocks' ), + title: __( 'CTA Cover', 'wdsblocks' ), + attributes: { + align: 'full', + backgroundType: 'image', + className: 'cta-cover', + contentAlign: 'center', + url: 'https://via.placeholder.com/1280x720.png/000/fff', + }, + icon: icons.cta, + innerBlocks: [ + [ 'core/heading', + { + className: 'hero-title has-text-align-center', + placeholder: __( 'Add CTA Heading', 'wdsblocks' ), + level: 1, + }, + ], + [ 'core/paragraph', + { + align: 'center', + className: 'hero-content', + placeholder: __( 'Add Optional Content', 'wdsblocks' ), + }, + ], + [ 'core/buttons', + { + align: 'center', + className: 'is-content-justification-center', + }, + [ + [ 'core/button', + { + className: 'hero-button is-style-outline', + placeholder: __( 'Add Button label', 'wdsblocks' ), + textColor: 'white', + url: '#', + width: 75, + }, + + ], + ], + ], + ], + } +); diff --git a/src/variations/utils/icons.js b/src/variations/utils/icons.js new file mode 100644 index 0000000..140368e --- /dev/null +++ b/src/variations/utils/icons.js @@ -0,0 +1,7 @@ +const icons = {}; + +icons.cta = ; + +icons.services = ; + +export default icons;