-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reusable Blocks: Support importing and exporting reusable blocks (#9788)
* Reusable Blocks: Support importing and exporting reusable blocks * Add the "manage reusable blocks" link to the more menu * Fix success notice * explicitely tag the exported JSON file * Adding import reusable block e2e test * Rename isMounted to avoid conflicts with React * small code style change * Avoid translating exception messages
- Loading branch information
1 parent
546b744
commit ff4bc70
Showing
21 changed files
with
486 additions
and
7 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
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 @@ | ||
| package-lock=false |
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,5 @@ | ||
| # Reusable blocks listing page | ||
|
|
||
| Package used to add import/export links to the listing page of the reusable blocks. | ||
|
|
||
| <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p> |
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,34 @@ | ||
| { | ||
| "name": "@wordpress/list-reusable-blocks", | ||
| "version": "1.0.0", | ||
| "description": "Adding Export/Import support to the reusable blocks listing.", | ||
| "author": "The WordPress Contributors", | ||
| "license": "GPL-2.0-or-later", | ||
| "keywords": [ | ||
| "templates", | ||
| "reusable blocks" | ||
| ], | ||
| "private": true, | ||
| "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/list-reusable-blocks/README.md", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/WordPress/gutenberg.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/WordPress/gutenberg/issues" | ||
| }, | ||
| "main": "build/index.js", | ||
| "module": "build-module/index.js", | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.0.0", | ||
| "@wordpress/api-fetch": "file:../api-fetch", | ||
| "@wordpress/components": "file:../components", | ||
| "@wordpress/compose": "file:../compose", | ||
| "@wordpress/element": "file:../element", | ||
| "@wordpress/i18n": "file:../i18n", | ||
| "lodash": "^4.17.10" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } |
39 changes: 39 additions & 0 deletions
39
packages/list-reusable-blocks/src/components/import-dropdown/index.js
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,39 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { flow } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Dropdown, Button } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import ImportForm from '../import-form'; | ||
|
|
||
| function ImportDropdown( { onUpload } ) { | ||
| return ( | ||
| <Dropdown | ||
| position="bottom right" | ||
| contentClassName="list-reusable-blocks-import-dropdown__content" | ||
| renderToggle={ ( { isOpen, onToggle } ) => ( | ||
| <Button | ||
| type="button" | ||
| aria-expanded={ isOpen } | ||
| onClick={ onToggle } | ||
| isPrimary | ||
| > | ||
| { __( 'Import from JSON' ) } | ||
| </Button> | ||
| ) } | ||
| renderContent={ ( { onClose } ) => ( | ||
| <ImportForm onUpload={ flow( onClose, onUpload ) } /> | ||
| ) } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default ImportDropdown; |
3 changes: 3 additions & 0 deletions
3
packages/list-reusable-blocks/src/components/import-dropdown/style.scss
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,3 @@ | ||
| .list-reusable-blocks-import-dropdown__content .components-popover__content { | ||
| padding: 10px; | ||
| } |
113 changes: 113 additions & 0 deletions
113
packages/list-reusable-blocks/src/components/import-form/index.js
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,113 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Component } from '@wordpress/element'; | ||
| import { withInstanceId } from '@wordpress/compose'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Button, Notice } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import importReusableBlock from '../../utils/import'; | ||
|
|
||
| class ImportForm extends Component { | ||
| constructor() { | ||
| super( ...arguments ); | ||
| this.state = { | ||
| isLoading: false, | ||
| error: null, | ||
| file: null, | ||
| }; | ||
|
|
||
| this.isStillMounted = true; | ||
| this.onChangeFile = this.onChangeFile.bind( this ); | ||
| this.onSubmit = this.onSubmit.bind( this ); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.isStillMounted = false; | ||
| } | ||
|
|
||
| onChangeFile( event ) { | ||
| this.setState( { file: event.target.files[ 0 ] } ); | ||
| } | ||
|
|
||
| onSubmit( event ) { | ||
| event.preventDefault(); | ||
| const { file } = this.state; | ||
| const { onUpload } = this.props; | ||
| if ( ! file ) { | ||
| return; | ||
| } | ||
| this.setState( { isLoading: true } ); | ||
| importReusableBlock( file ) | ||
| .then( ( reusableBlock ) => { | ||
| if ( ! this.isStillMounted ) { | ||
| return; | ||
| } | ||
|
|
||
| this.setState( { isLoading: false } ); | ||
| onUpload( reusableBlock ); | ||
| } ) | ||
| .catch( ( error ) => { | ||
| if ( ! this.isStillMounted ) { | ||
| return; | ||
| } | ||
|
|
||
| let uiMessage; | ||
| switch ( error.message ) { | ||
| case 'Invalid JSON file': | ||
| uiMessage = __( 'Invalid JSON file' ); | ||
| break; | ||
| case 'Invalid Reusable Block JSON file': | ||
| uiMessage = __( 'Invalid Reusable Block JSON file' ); | ||
| break; | ||
| default: | ||
| uiMessage = __( 'Unknow error' ); | ||
| } | ||
|
|
||
| this.setState( { isLoading: false, error: uiMessage } ); | ||
| } ); | ||
| } | ||
|
|
||
| render() { | ||
| const { instanceId } = this.props; | ||
| const { file, isLoading, error } = this.state; | ||
| const inputId = 'list-reusable-blocks-import-form-' + instanceId; | ||
| return ( | ||
| <form | ||
| className="list-reusable-blocks-import-form" | ||
| onSubmit={ this.onSubmit } | ||
| > | ||
| { error && ( | ||
| <Notice status="error"> | ||
| { error } | ||
| </Notice> | ||
| ) } | ||
| <label | ||
| htmlFor={ inputId } | ||
| className="list-reusable-blocks-import-form__label" | ||
| > | ||
| { __( 'File' ) } | ||
| </label> | ||
| <input | ||
| id={ inputId } | ||
| type="file" | ||
| onChange={ this.onChangeFile } | ||
| /> | ||
| <Button | ||
| type="submit" | ||
| isBusy={ isLoading } | ||
| disabled={ ! file || isLoading } | ||
| isDefault | ||
| className="list-reusable-blocks-import-form__button" | ||
| > | ||
| { __( 'Import' ) } | ||
| </Button> | ||
| </form> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withInstanceId( ImportForm ); |
13 changes: 13 additions & 0 deletions
13
packages/list-reusable-blocks/src/components/import-form/style.scss
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,13 @@ | ||
| .list-reusable-blocks-import-form__label { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .list-reusable-blocks-import-form__button { | ||
| margin-top: 20px; | ||
| float: right; | ||
| } | ||
|
|
||
| .list-reusable-blocks-import-form .components-notice__content { | ||
| margin: 0; | ||
| } |
Oops, something went wrong.