From 3262f10ade81a23135c628b741e33203ae153433 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 9 Apr 2019 13:54:04 +0200 Subject: [PATCH] Refactor core blocks to have save and transforms in their own files --- packages/block-library/src/archives/index.js | 5 - packages/block-library/src/audio/index.js | 73 +--------- packages/block-library/src/audio/save.js | 15 +++ .../block-library/src/audio/transforms.js | 59 +++++++++ packages/block-library/src/block/index.js | 4 - packages/block-library/src/button/index.js | 55 +------- packages/block-library/src/button/save.js | 52 ++++++++ packages/block-library/src/calendar/index.js | 6 - .../block-library/src/categories/index.js | 5 - packages/block-library/src/classic/index.js | 13 +- packages/block-library/src/classic/save.js | 10 ++ packages/block-library/src/code/index.js | 42 +----- packages/block-library/src/code/save.js | 3 + packages/block-library/src/code/transforms.js | 35 +++++ packages/block-library/src/column/edit.js | 58 ++++++++ packages/block-library/src/column/icon.js | 8 ++ packages/block-library/src/column/index.js | 80 +---------- packages/block-library/src/column/save.js | 22 +++ packages/block-library/src/columns/index.js | 30 +---- packages/block-library/src/columns/save.js | 23 ++++ packages/block-library/src/cover/edit.js | 20 +-- packages/block-library/src/cover/index.js | 125 ++---------------- packages/block-library/src/cover/save.js | 68 ++++++++++ packages/block-library/src/cover/shared.js | 14 ++ .../block-library/src/cover/transforms.js | 73 ++++++++++ 25 files changed, 474 insertions(+), 424 deletions(-) create mode 100644 packages/block-library/src/audio/save.js create mode 100644 packages/block-library/src/audio/transforms.js create mode 100644 packages/block-library/src/button/save.js create mode 100644 packages/block-library/src/classic/save.js create mode 100644 packages/block-library/src/code/save.js create mode 100644 packages/block-library/src/code/transforms.js create mode 100644 packages/block-library/src/column/edit.js create mode 100644 packages/block-library/src/column/icon.js create mode 100644 packages/block-library/src/column/save.js create mode 100644 packages/block-library/src/columns/save.js create mode 100644 packages/block-library/src/cover/save.js create mode 100644 packages/block-library/src/cover/shared.js create mode 100644 packages/block-library/src/cover/transforms.js diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js index 4d7c056879dff8..aa4c172ddedf68 100644 --- a/packages/block-library/src/archives/index.js +++ b/packages/block-library/src/archives/index.js @@ -13,17 +13,12 @@ export const name = 'core/archives'; export const settings = { title: __( 'Archives' ), - description: __( 'Display a monthly archive of your posts.' ), - icon, - category: 'widgets', - supports: { align: true, html: false, }, - edit, }; diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index 4da18817e20766..c6ce546e37f6e0 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -1,9 +1,6 @@ /** * WordPress dependencies */ -import { createBlobURL } from '@wordpress/blob'; -import { createBlock } from '@wordpress/blocks'; -import { RichText } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -12,6 +9,8 @@ import { __ } from '@wordpress/i18n'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import save from './save'; +import transforms from './transforms'; const { name } = metadata; @@ -19,76 +18,12 @@ export { metadata, name }; export const settings = { title: __( 'Audio' ), - description: __( 'Embed a simple audio player.' ), - icon, - - transforms: { - from: [ - { - type: 'files', - isMatch( files ) { - return files.length === 1 && files[ 0 ].type.indexOf( 'audio/' ) === 0; - }, - transform( files ) { - const file = files[ 0 ]; - // We don't need to upload the media directly here - // It's already done as part of the `componentDidMount` - // in the audio block - const block = createBlock( 'core/audio', { - src: createBlobURL( file ), - } ); - - return block; - }, - }, - { - type: 'shortcode', - tag: 'audio', - attributes: { - src: { - type: 'string', - shortcode: ( { named: { src } } ) => { - return src; - }, - }, - loop: { - type: 'string', - shortcode: ( { named: { loop } } ) => { - return loop; - }, - }, - autoplay: { - type: 'srting', - shortcode: ( { named: { autoplay } } ) => { - return autoplay; - }, - }, - preload: { - type: 'string', - shortcode: ( { named: { preload } } ) => { - return preload; - }, - }, - }, - }, - ], - }, - + transforms, supports: { align: true, }, - edit, - - save( { attributes } ) { - const { autoplay, caption, loop, preload, src } = attributes; - return ( -
-
- ); - }, + save, }; diff --git a/packages/block-library/src/audio/save.js b/packages/block-library/src/audio/save.js new file mode 100644 index 00000000000000..13b32be648abb5 --- /dev/null +++ b/packages/block-library/src/audio/save.js @@ -0,0 +1,15 @@ +/** + * WordPress dependencies + */ +import { RichText } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { autoplay, caption, loop, preload, src } = attributes; + + return ( +
+
+ ); +} diff --git a/packages/block-library/src/audio/transforms.js b/packages/block-library/src/audio/transforms.js new file mode 100644 index 00000000000000..237430a1b7c9f6 --- /dev/null +++ b/packages/block-library/src/audio/transforms.js @@ -0,0 +1,59 @@ +/** + * WordPress dependencies + */ +import { createBlobURL } from '@wordpress/blob'; +import { createBlock } from '@wordpress/blocks'; + +const transforms = { + from: [ + { + type: 'files', + isMatch( files ) { + return files.length === 1 && files[ 0 ].type.indexOf( 'audio/' ) === 0; + }, + transform( files ) { + const file = files[ 0 ]; + // We don't need to upload the media directly here + // It's already done as part of the `componentDidMount` + // in the audio block + const block = createBlock( 'core/audio', { + src: createBlobURL( file ), + } ); + + return block; + }, + }, + { + type: 'shortcode', + tag: 'audio', + attributes: { + src: { + type: 'string', + shortcode: ( { named: { src } } ) => { + return src; + }, + }, + loop: { + type: 'string', + shortcode: ( { named: { loop } } ) => { + return loop; + }, + }, + autoplay: { + type: 'srting', + shortcode: ( { named: { autoplay } } ) => { + return autoplay; + }, + }, + preload: { + type: 'string', + shortcode: ( { named: { preload } } ) => { + return preload; + }, + }, + }, + }, + ], +}; + +export default transforms; diff --git a/packages/block-library/src/block/index.js b/packages/block-library/src/block/index.js index 27de14d6a32959..f66fca566f09a7 100644 --- a/packages/block-library/src/block/index.js +++ b/packages/block-library/src/block/index.js @@ -12,16 +12,12 @@ export const name = 'core/block'; export const settings = { title: __( 'Reusable Block' ), - category: 'reusable', - description: __( 'Create content, and save it for you and other contributors to reuse across your site. Update the block, and the changes apply everywhere it’s used.' ), - supports: { customClassName: false, html: false, inserter: false, }, - edit, }; diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 866759fffcdb9d..6210561709a0c5 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -1,17 +1,13 @@ /** * External dependencies */ -import classnames from 'classnames'; import { omit, pick } from 'lodash'; /** * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { - RichText, - getColorClassName, -} from '@wordpress/block-editor'; +import { RichText } from '@wordpress/block-editor'; /** * Internal dependencies @@ -19,6 +15,7 @@ import { import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import save from './save'; const { name, attributes: blockAttributes } = metadata; @@ -34,66 +31,20 @@ const colorsMigration = ( attributes ) => { export const settings = { title: __( 'Button' ), - description: __( 'Prompt visitors to take action with a button-style link.' ), - icon, - keywords: [ __( 'link' ) ], - supports: { align: true, alignWide: false, }, - styles: [ { name: 'default', label: _x( 'Default', 'block style' ), isDefault: true }, { name: 'outline', label: __( 'Outline' ) }, { name: 'squared', label: _x( 'Squared', 'block style' ) }, ], - edit, - - save( { attributes } ) { - const { - url, - text, - title, - backgroundColor, - textColor, - customBackgroundColor, - customTextColor, - } = attributes; - - const textClass = getColorClassName( 'color', textColor ); - const backgroundClass = getColorClassName( 'background-color', backgroundColor ); - - const buttonClasses = classnames( 'wp-block-button__link', { - 'has-text-color': textColor || customTextColor, - [ textClass ]: textClass, - 'has-background': backgroundColor || customBackgroundColor, - [ backgroundClass ]: backgroundClass, - } ); - - const buttonStyle = { - backgroundColor: backgroundClass ? undefined : customBackgroundColor, - color: textClass ? undefined : customTextColor, - }; - - return ( -
- -
- ); - }, - + save, deprecated: [ { attributes: { ...pick( blockAttributes, [ 'url', 'title', 'text' ] ), diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js new file mode 100644 index 00000000000000..67ce1225d26562 --- /dev/null +++ b/packages/block-library/src/button/save.js @@ -0,0 +1,52 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + RichText, + getColorClassName, +} from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { + url, + text, + title, + backgroundColor, + textColor, + customBackgroundColor, + customTextColor, + } = attributes; + + const textClass = getColorClassName( 'color', textColor ); + const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + + const buttonClasses = classnames( 'wp-block-button__link', { + 'has-text-color': textColor || customTextColor, + [ textClass ]: textClass, + 'has-background': backgroundColor || customBackgroundColor, + [ backgroundClass ]: backgroundClass, + } ); + + const buttonStyle = { + backgroundColor: backgroundClass ? undefined : customBackgroundColor, + color: textClass ? undefined : customTextColor, + }; + + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js index 56c3c598686033..c64cb010ca82a7 100644 --- a/packages/block-library/src/calendar/index.js +++ b/packages/block-library/src/calendar/index.js @@ -12,18 +12,12 @@ export const name = 'core/calendar'; export const settings = { title: __( 'Calendar' ), - description: __( 'A calendar of your site’s posts.' ), - icon: 'calendar', - category: 'widgets', - keywords: [ __( 'posts' ), __( 'archive' ) ], - supports: { align: true, }, - edit, }; diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js index c7c2a4d83cee4f..109b5ae0d10cb5 100644 --- a/packages/block-library/src/categories/index.js +++ b/packages/block-library/src/categories/index.js @@ -13,17 +13,12 @@ export const name = 'core/categories'; export const settings = { title: __( 'Categories' ), - description: __( 'Display a list of all categories.' ), - icon, - category: 'widgets', - supports: { align: true, html: false, }, - edit, }; diff --git a/packages/block-library/src/classic/index.js b/packages/block-library/src/classic/index.js index 4c17699404a896..63cdf7713c3092 100644 --- a/packages/block-library/src/classic/index.js +++ b/packages/block-library/src/classic/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { RawHTML } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; /** @@ -10,6 +9,7 @@ import { __, _x } from '@wordpress/i18n'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import save from './save'; const { name } = metadata; @@ -17,11 +17,8 @@ export { metadata, name }; export const settings = { title: _x( 'Classic', 'block title' ), - description: __( 'Use the classic WordPress editor.' ), - icon, - supports: { className: false, customClassName: false, @@ -29,12 +26,6 @@ export const settings = { // confusing UX, because of its similarity to the 'Convert to Blocks' button. reusable: false, }, - edit, - - save( { attributes } ) { - const { content } = attributes; - - return { content }; - }, + save, }; diff --git a/packages/block-library/src/classic/save.js b/packages/block-library/src/classic/save.js new file mode 100644 index 00000000000000..f40af63d51a0d3 --- /dev/null +++ b/packages/block-library/src/classic/save.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { RawHTML } from '@wordpress/element'; + +export default function save( { attributes } ) { + const { content } = attributes; + + return { content }; +} diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js index 8752fcb393d4b9..1430dc7f27ad72 100644 --- a/packages/block-library/src/code/index.js +++ b/packages/block-library/src/code/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { createBlock } from '@wordpress/blocks'; /** * Internal dependencies @@ -10,6 +9,8 @@ import { createBlock } from '@wordpress/blocks'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import save from './save'; +import transforms from './transforms'; const { name } = metadata; @@ -17,47 +18,12 @@ export { metadata, name }; export const settings = { title: __( 'Code' ), - description: __( 'Display code snippets that respect your spacing and tabs.' ), - icon, - supports: { html: false, }, - - transforms: { - from: [ - { - type: 'enter', - regExp: /^```$/, - transform: () => createBlock( 'core/code' ), - }, - { - type: 'raw', - isMatch: ( node ) => ( - node.nodeName === 'PRE' && - node.children.length === 1 && - node.firstChild.nodeName === 'CODE' - ), - schema: { - pre: { - children: { - code: { - children: { - '#text': {}, - }, - }, - }, - }, - }, - }, - ], - }, - + transforms, edit, - - save( { attributes } ) { - return 
{ attributes.content }
; - }, + save, }; diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js new file mode 100644 index 00000000000000..21d74669c854b9 --- /dev/null +++ b/packages/block-library/src/code/save.js @@ -0,0 +1,3 @@ +export default function save( { attributes } ) { + return 
{ attributes.content }
; +} diff --git a/packages/block-library/src/code/transforms.js b/packages/block-library/src/code/transforms.js new file mode 100644 index 00000000000000..180a95bc9b4c54 --- /dev/null +++ b/packages/block-library/src/code/transforms.js @@ -0,0 +1,35 @@ +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; + +const transforms = { + from: [ + { + type: 'enter', + regExp: /^```$/, + transform: () => createBlock( 'core/code' ), + }, + { + type: 'raw', + isMatch: ( node ) => ( + node.nodeName === 'PRE' && + node.children.length === 1 && + node.firstChild.nodeName === 'CODE' + ), + schema: { + pre: { + children: { + code: { + children: { + '#text': {}, + }, + }, + }, + }, + }, + }, + ], +}; + +export default transforms; diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js new file mode 100644 index 00000000000000..1722a4d4ece4ab --- /dev/null +++ b/packages/block-library/src/column/edit.js @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar } from '@wordpress/block-editor'; +import { withDispatch, withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; + +const ColumnEdit = ( { attributes, updateAlignment } ) => { + const { verticalAlignment } = attributes; + + const classes = classnames( 'block-core-columns', { + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + const onChange = ( alignment ) => updateAlignment( alignment ); + + return ( +
+ + + + +
+ ); +}; + +export default compose( + withSelect( ( select, { clientId } ) => { + const { getBlockRootClientId } = select( 'core/editor' ); + + return { + parentColumsBlockClientId: getBlockRootClientId( clientId ), + }; + } ), + withDispatch( ( dispatch, { clientId, parentColumsBlockClientId } ) => { + return { + updateAlignment( alignment ) { + // Update self... + dispatch( 'core/editor' ).updateBlockAttributes( clientId, { + verticalAlignment: alignment, + } ); + + // Reset Parent Columns Block + dispatch( 'core/editor' ).updateBlockAttributes( parentColumsBlockClientId, { + verticalAlignment: null, + } ); + }, + }; + } ) +)( ColumnEdit ); diff --git a/packages/block-library/src/column/icon.js b/packages/block-library/src/column/icon.js new file mode 100644 index 00000000000000..080d796121d01a --- /dev/null +++ b/packages/block-library/src/column/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js index 9c9b4d9271c401..869093459a83bb 100644 --- a/packages/block-library/src/column/index.js +++ b/packages/block-library/src/column/index.js @@ -1,101 +1,31 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar } from '@wordpress/block-editor'; -import { withDispatch, withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; /** * Internal dependencies */ +import edit from './edit'; +import icon from './icon'; import metadata from './block.json'; +import save from './save'; const { name } = metadata; export { metadata, name }; -const ColumnEdit = ( { attributes, updateAlignment } ) => { - const { verticalAlignment } = attributes; - - const classes = classnames( 'block-core-columns', { - [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - } ); - - const onChange = ( alignment ) => updateAlignment( alignment ); - - return ( -
- - - - -
- ); -}; - -const edit = compose( - withSelect( ( select, { clientId } ) => { - const { getBlockRootClientId } = select( 'core/editor' ); - - return { - parentColumsBlockClientId: getBlockRootClientId( clientId ), - }; - } ), - withDispatch( ( dispatch, { clientId, parentColumsBlockClientId } ) => { - return { - updateAlignment( alignment ) { - // Update self... - dispatch( 'core/editor' ).updateBlockAttributes( clientId, { - verticalAlignment: alignment, - } ); - - // Reset Parent Columns Block - dispatch( 'core/editor' ).updateBlockAttributes( parentColumsBlockClientId, { - verticalAlignment: null, - } ); - }, - }; - } ) -)( ColumnEdit ); - export const settings = { title: __( 'Column' ), - parent: [ 'core/columns' ], - - icon: , - + icon, description: __( 'A single column within a columns block.' ), - supports: { inserter: false, reusable: false, html: false, }, - edit, - - save( { attributes } ) { - const { verticalAlignment } = attributes; - const wrapperClasses = classnames( { - [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - } ); - - return ( -
- -
- ); - }, + save, }; diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js new file mode 100644 index 00000000000000..9e8ea1ac4a3b32 --- /dev/null +++ b/packages/block-library/src/column/save.js @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { verticalAlignment } = attributes; + const wrapperClasses = classnames( { + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index da0798fa7d2b10..e4a0d7b4b08e95 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -1,17 +1,8 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - InnerBlocks, -} from '@wordpress/block-editor'; - /** * Internal dependencies */ @@ -19,6 +10,7 @@ import deprecated from './deprecated'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import save from './save'; const { name } = metadata; @@ -26,32 +18,14 @@ export { metadata, name }; export const settings = { title: __( 'Columns' ), - icon, - description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ), - supports: { align: [ 'wide', 'full' ], html: false, }, - deprecated, - edit, - - save( { attributes } ) { - const { columns, verticalAlignment } = attributes; - - const wrapperClasses = classnames( `has-${ columns }-columns`, { - [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - } ); - - return ( -
- -
- ); - }, + save, }; diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js new file mode 100644 index 00000000000000..851a4270f7a4d6 --- /dev/null +++ b/packages/block-library/src/columns/save.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { columns, verticalAlignment } = attributes; + + const wrapperClasses = classnames( `has-${ columns }-columns`, { + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index d7e51f876156f4..9fadb5541082b5 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -36,12 +36,16 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import icon from './icon'; +import { + IMAGE_BACKGROUND_TYPE, + VIDEO_BACKGROUND_TYPE, + backgroundImageStyles, + dimRatioToClass, +} from './shared'; /** * Module Constants */ -export const IMAGE_BACKGROUND_TYPE = 'image'; -export const VIDEO_BACKGROUND_TYPE = 'video'; const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ]; const INNER_BLOCKS_TEMPLATE = [ [ 'core/paragraph', { @@ -59,18 +63,6 @@ function retrieveFastAverageColor() { return retrieveFastAverageColor.fastAverageColor; } -export function backgroundImageStyles( url ) { - return url ? - { backgroundImage: `url(${ url })` } : - {}; -} - -export function dimRatioToClass( ratio ) { - return ( ratio === 0 || ratio === 50 ) ? - null : - 'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) ); -} - class CoverEdit extends Component { constructor() { super( ...arguments ); diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 943d6342acd36d..d28d90be24dad5 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -9,7 +9,6 @@ import classnames from 'classnames'; */ import { createBlock } from '@wordpress/blocks'; import { - InnerBlocks, RichText, getColorClassName, } from '@wordpress/block-editor'; @@ -18,15 +17,17 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import edit from './edit'; import icon from './icon'; +import metadata from './block.json'; +import save from './save'; +import transforms from './transforms'; import { - default as CoverEdit, IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, backgroundImageStyles, dimRatioToClass, -} from './edit'; -import metadata from './block.json'; +} from './shared'; const { name, attributes: blockAttributes } = metadata; @@ -34,124 +35,14 @@ export { metadata, name }; export const settings = { title: __( 'Cover' ), - description: __( 'Add an image or video with a text overlay — great for headers.' ), - icon, - supports: { align: true, }, - - transforms: { - from: [ - { - type: 'block', - blocks: [ 'core/image' ], - transform: ( { caption, url, align, id } ) => ( - createBlock( 'core/cover', { - title: caption, - url, - align, - id, - } ) - ), - }, - { - type: 'block', - blocks: [ 'core/video' ], - transform: ( { caption, src, align, id } ) => ( - createBlock( 'core/cover', { - title: caption, - url: src, - align, - id, - backgroundType: VIDEO_BACKGROUND_TYPE, - } ) - ), - }, - ], - to: [ - { - type: 'block', - blocks: [ 'core/image' ], - isMatch: ( { backgroundType, url } ) => { - return ! url || backgroundType === IMAGE_BACKGROUND_TYPE; - }, - transform: ( { title, url, align, id } ) => ( - createBlock( 'core/image', { - caption: title, - url, - align, - id, - } ) - ), - }, - { - type: 'block', - blocks: [ 'core/video' ], - isMatch: ( { backgroundType, url } ) => { - return ! url || backgroundType === VIDEO_BACKGROUND_TYPE; - }, - transform: ( { title, url, align, id } ) => ( - createBlock( 'core/video', { - caption: title, - src: url, - id, - align, - } ) - ), - }, - ], - }, - - save( { attributes } ) { - const { - backgroundType, - customOverlayColor, - dimRatio, - focalPoint, - hasParallax, - overlayColor, - url, - } = attributes; - const overlayColorClass = getColorClassName( 'background-color', overlayColor ); - const style = backgroundType === IMAGE_BACKGROUND_TYPE ? - backgroundImageStyles( url ) : - {}; - if ( ! overlayColorClass ) { - style.backgroundColor = customOverlayColor; - } - if ( focalPoint && ! hasParallax ) { - style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`; - } - - const classes = classnames( - dimRatioToClass( dimRatio ), - overlayColorClass, - { - 'has-background-dim': dimRatio !== 0, - 'has-parallax': hasParallax, - }, - ); - - return ( -
- { VIDEO_BACKGROUND_TYPE === backgroundType && url && (
- ); - }, - - edit: CoverEdit, + transforms, + save, + edit, deprecated: [ { attributes: { ...blockAttributes, diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js new file mode 100644 index 00000000000000..1be2d974159c7d --- /dev/null +++ b/packages/block-library/src/cover/save.js @@ -0,0 +1,68 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + InnerBlocks, + getColorClassName, +} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { + IMAGE_BACKGROUND_TYPE, + VIDEO_BACKGROUND_TYPE, + backgroundImageStyles, + dimRatioToClass, +} from './shared'; + +export default function save( { attributes } ) { + const { + backgroundType, + customOverlayColor, + dimRatio, + focalPoint, + hasParallax, + overlayColor, + url, + } = attributes; + const overlayColorClass = getColorClassName( 'background-color', overlayColor ); + const style = backgroundType === IMAGE_BACKGROUND_TYPE ? + backgroundImageStyles( url ) : + {}; + if ( ! overlayColorClass ) { + style.backgroundColor = customOverlayColor; + } + if ( focalPoint && ! hasParallax ) { + style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`; + } + + const classes = classnames( + dimRatioToClass( dimRatio ), + overlayColorClass, + { + 'has-background-dim': dimRatio !== 0, + 'has-parallax': hasParallax, + }, + ); + + return ( +
+ { VIDEO_BACKGROUND_TYPE === backgroundType && url && (
+ ); +} diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js new file mode 100644 index 00000000000000..1b01b0bf8c24fd --- /dev/null +++ b/packages/block-library/src/cover/shared.js @@ -0,0 +1,14 @@ +export const IMAGE_BACKGROUND_TYPE = 'image'; +export const VIDEO_BACKGROUND_TYPE = 'video'; + +export function backgroundImageStyles( url ) { + return url ? + { backgroundImage: `url(${ url })` } : + {}; +} + +export function dimRatioToClass( ratio ) { + return ( ratio === 0 || ratio === 50 ) ? + null : + 'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) ); +} diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js new file mode 100644 index 00000000000000..8b775f73d0040c --- /dev/null +++ b/packages/block-library/src/cover/transforms.js @@ -0,0 +1,73 @@ +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared'; + +const transforms = { + from: [ + { + type: 'block', + blocks: [ 'core/image' ], + transform: ( { caption, url, align, id } ) => ( + createBlock( 'core/cover', { + title: caption, + url, + align, + id, + } ) + ), + }, + { + type: 'block', + blocks: [ 'core/video' ], + transform: ( { caption, src, align, id } ) => ( + createBlock( 'core/cover', { + title: caption, + url: src, + align, + id, + backgroundType: VIDEO_BACKGROUND_TYPE, + } ) + ), + }, + ], + to: [ + { + type: 'block', + blocks: [ 'core/image' ], + isMatch: ( { backgroundType, url } ) => { + return ! url || backgroundType === IMAGE_BACKGROUND_TYPE; + }, + transform: ( { title, url, align, id } ) => ( + createBlock( 'core/image', { + caption: title, + url, + align, + id, + } ) + ), + }, + { + type: 'block', + blocks: [ 'core/video' ], + isMatch: ( { backgroundType, url } ) => { + return ! url || backgroundType === VIDEO_BACKGROUND_TYPE; + }, + transform: ( { title, url, align, id } ) => ( + createBlock( 'core/video', { + caption: title, + src: url, + id, + align, + } ) + ), + }, + ], +}; + +export default transforms;