forked from godaddy-wordpress/coblocks
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Introduce custom block patterns saved as a CPT. (godaddy-wordpress#1659)
* Create new layotu CPT and taxonomies * Load the layouts from the CPT into the layout selector * Remove Gutenberg requirement for layout selector * Update dependencies * Add new block patterns modal * Make it easier to link existing/non-existing terms to a pattern * Register block_pattern_category tax with CPT * Add excerpt support * Load block patterns * prefix CPT and taxonomies with "coblocks" * typo * Mistakenly removed gutter-control require * Mistakenly removed gutter-control require * Manually trigger click even on "Block Patterns" tab * Remove icon from block settings menu item * Minor copy updates * Update CPT prefix to coblocks_pattern * Update CPT prefix * Remove whitespace * Update index.js * Add required * to Name * Adding new singleton trait * Use singleton trait * Adding inline docs * Use constants for the slugs * Fix const usage * Add method visibility and missing inline docs Co-authored-by: Rich Tabor <[email protected]>
- Loading branch information
1 parent
50613ff
commit e65e9f8
Showing
5 changed files
with
315 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { registerPlugin } from '@wordpress/plugins'; | ||
| import { Fragment, useState } from '@wordpress/element'; | ||
| import { BlockSettingsMenuControls } from '@wordpress/block-editor'; | ||
| import { MenuItem } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import CoBlocksBlockPatternsModal from './modal'; | ||
| import './styles/style.scss'; | ||
|
|
||
| const CoBlocksBlockPatterns = () => { | ||
| const [ isOpen, setOpen ] = useState( false ); | ||
|
|
||
| const openModal = () => setOpen( true ); | ||
| const closeModal = () => setOpen( false ); | ||
|
|
||
| const props = { isOpen, openModal, closeModal }; | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <BlockSettingsMenuControls> | ||
| { ( { onClose } ) => ( | ||
| <MenuItem | ||
| onClick={ () => { | ||
| openModal(); | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Add Design Pattern', 'coblocks' ) } | ||
| </MenuItem> | ||
| ) } | ||
| </BlockSettingsMenuControls> | ||
| <CoBlocksBlockPatternsModal { ...props } /> | ||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| registerPlugin( 'coblocks-block-patterns', { | ||
| render: CoBlocksBlockPatterns, | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import { Component } from '@wordpress/element'; | ||
| import { compose } from '@wordpress/compose'; | ||
| import { withSelect, withDispatch } from '@wordpress/data'; | ||
| import { BlockPreview } from '@wordpress/block-editor'; | ||
| import { serialize } from '@wordpress/blocks'; | ||
| import apiFetch from '@wordpress/api-fetch'; | ||
| import { | ||
| Button, | ||
| Modal, | ||
| TextControl, | ||
| SelectControl, | ||
| } from '@wordpress/components'; | ||
|
|
||
| class CoBlocksBlockPatternsModal extends Component { | ||
| constructor( props ) { | ||
| super( props ); | ||
|
|
||
| this.state = { | ||
| name: '', | ||
| description: '', | ||
| category: '', | ||
| }; | ||
| } | ||
|
|
||
| savePattern = ( event ) => { | ||
| event.preventDefault(); | ||
|
|
||
| const { | ||
| category, | ||
| description, | ||
| name, | ||
| } = this.state; | ||
|
|
||
| const { | ||
| closeModal, | ||
| createErrorNotice, | ||
| createSuccessNotice, | ||
| selectedBlocks, | ||
| setIsInserterOpened, | ||
| } = this.props; | ||
|
|
||
| apiFetch( { | ||
| path: '/wp/v2/coblocks_pattern', | ||
| method: 'POST', | ||
| data: { | ||
| title: name, | ||
| slug: name, | ||
| content: serialize( selectedBlocks ), | ||
| excerpt: description, | ||
| status: 'publish', | ||
| terms: { | ||
| coblocks_pattern_type: [ 'pattern' ], | ||
| coblocks_pattern_category: [ category ], | ||
| }, | ||
| }, | ||
| } ) | ||
| .then( () => { | ||
| closeModal(); | ||
|
|
||
| // Inject block pattern into the inserter. | ||
| this.props.updateSettings( { | ||
| ...this.props.getSettings(), | ||
| __experimentalBlockPatterns: [ | ||
| ...this.props.getSettings().__experimentalBlockPatterns, | ||
| { | ||
| title: name, | ||
| name: `coblocks_pattern/${ name }`, | ||
| content: serialize( selectedBlocks ), | ||
| description, | ||
| categories: [ category ], | ||
| }, | ||
| ], | ||
| } ); | ||
|
|
||
| createSuccessNotice( | ||
| sprintf( | ||
| // translators: %s is the pattern name. | ||
| __( '"%s" pattern has been saved.', 'coblocks' ), | ||
| name | ||
| ), | ||
| { | ||
| type: 'snackbar', | ||
| actions: [ | ||
| { | ||
| label: __( 'View Patterns', 'coblocks' ), | ||
| onClick: () => { | ||
| setIsInserterOpened( true ); | ||
| setTimeout( () => document.getElementById( 'tab-panel-1-patterns' ).click(), 1000 ); | ||
| }, | ||
| }, | ||
| ], | ||
| } | ||
| ); | ||
| } ) | ||
| .catch( () => { | ||
| createErrorNotice( __( 'Failed to save new pattern.', 'coblocks' ) ); | ||
| } ); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| blockPatternCategories, | ||
| closeModal, | ||
| isOpen, | ||
| selectedBlocks, | ||
| } = this.props; | ||
|
|
||
| return isOpen && ( | ||
| <Modal | ||
| title={ __( 'Add Design Pattern', 'coblocks' ) } | ||
| onRequestClose={ closeModal } | ||
| className="coblocks-block-patterns__modal" | ||
| > | ||
| <div className="coblocks-block-patterns__preview"> | ||
| <BlockPreview | ||
| autoHeight | ||
| blocks={ selectedBlocks } | ||
| /> | ||
| </div> | ||
| <form onSubmit={ this.savePattern }> | ||
| <TextControl | ||
| label={ __( 'Name', 'coblocks' ) + '*' } | ||
| onChange={ ( name ) => this.setState( { name } ) } | ||
| required | ||
| /> | ||
| <TextControl | ||
| label={ __( 'Description', 'coblocks' ) } | ||
| onChange={ ( description ) => this.setState( { description } ) } | ||
| /> | ||
| <SelectControl | ||
| label={ __( 'Category', 'coblocks' ) } | ||
| options={ [ | ||
| { label: __( 'Select a pattern category', 'coblocks' ), value: '' }, | ||
| ...blockPatternCategories.map( ( category ) => ( { ...category, value: category.name } ) ), | ||
| ] } | ||
| onChange={ ( category ) => this.setState( { category } ) } | ||
| /> | ||
| <Button isPrimary type="submit"> | ||
| { __( 'Add Pattern', 'coblocks' ) } | ||
| </Button> | ||
| </form> | ||
| </Modal> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default compose( [ | ||
|
|
||
| withSelect( ( select ) => { | ||
| const { | ||
| getMultiSelectedBlocks, | ||
| getSelectedBlock, | ||
| getSelectedBlockCount, | ||
| getSettings, | ||
| } = select( 'core/block-editor' ); | ||
|
|
||
| return { | ||
| getSettings, | ||
| selectedBlocks: getSelectedBlockCount() === 1 | ||
| ? getSelectedBlock() | ||
| : getMultiSelectedBlocks(), | ||
| blockPatternCategories: getSettings().__experimentalBlockPatternCategories, | ||
| }; | ||
| } ), | ||
|
|
||
| withDispatch( ( dispatch ) => { | ||
| const { | ||
| updateSettings, | ||
| } = dispatch( 'core/block-editor' ); | ||
|
|
||
| const { | ||
| setIsInserterOpened, | ||
| } = dispatch( 'core/edit-post' ); | ||
|
|
||
| const { | ||
| createErrorNotice, | ||
| createSuccessNotice, | ||
| } = dispatch( 'core/notices' ); | ||
|
|
||
| return { | ||
| createErrorNotice, | ||
| createSuccessNotice, | ||
| setIsInserterOpened, | ||
| updateSettings, | ||
| }; | ||
| } ), | ||
|
|
||
| ] )( CoBlocksBlockPatternsModal ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| @import "../../../styles/editor/core/colors"; | ||
| @import "../../../styles/editor/core/variables"; | ||
|
|
||
| .coblocks-block-patterns__modal { | ||
| .components-base-control__field { | ||
| margin-bottom: $grid-unit-20; | ||
| } | ||
| } | ||
|
|
||
| .coblocks-block-patterns__preview { | ||
| margin-bottom: $grid-unit-30; | ||
| padding: 9px; | ||
| border: $border-width solid $gray-700; | ||
| } |