diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js new file mode 100644 index 0000000000000..2b77e33e0b36e --- /dev/null +++ b/packages/block-library/src/gallery/deprecated.js @@ -0,0 +1,198 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { map, some } from 'lodash'; + +/** + * WordPress dependencies + */ +import { RichText } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { defaultColumnsNumber } from './shared'; + +const deprecated = [ + { + attributes: { + images: { + type: 'array', + default: [], + source: 'query', + selector: 'ul.wp-block-gallery .blocks-gallery-item', + query: { + url: { + source: 'attribute', + selector: 'img', + attribute: 'src', + }, + alt: { + source: 'attribute', + selector: 'img', + attribute: 'alt', + default: '', + }, + id: { + source: 'attribute', + selector: 'img', + attribute: 'data-id', + }, + link: { + source: 'attribute', + selector: 'img', + attribute: 'data-link', + }, + caption: { + type: 'array', + source: 'children', + selector: 'figcaption', + }, + }, + }, + columns: { + type: 'number', + }, + imageCrop: { + type: 'boolean', + default: true, + }, + linkTo: { + type: 'string', + default: 'none', + }, + }, + isEligible( { images, ids } ) { + return images && + images.length > 0 && + ( + ( ! ids && images ) || + ( ids && images && ids.length !== images.length ) || + some( images, ( id, index ) => { + if ( ! id && ids[ index ] !== null ) { + return true; + } + return parseInt( id, 10 ) !== ids[ index ]; + } ) + ); + }, + migrate( attributes ) { + return { + ...attributes, + ids: map( attributes.images, ( { id } ) => { + if ( ! id ) { + return null; + } + return parseInt( id, 10 ); + } ), + }; + }, + save( { attributes } ) { + const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes; + return ( + + ); + }, + }, + { + attributes: { + images: { + type: 'array', + default: [], + source: 'query', + selector: 'div.wp-block-gallery figure.blocks-gallery-image img', + query: { + url: { + source: 'attribute', + attribute: 'src', + }, + alt: { + source: 'attribute', + attribute: 'alt', + default: '', + }, + id: { + source: 'attribute', + attribute: 'data-id', + }, + }, + }, + columns: { + type: 'number', + }, + imageCrop: { + type: 'boolean', + default: true, + }, + linkTo: { + type: 'string', + default: 'none', + }, + align: { + type: 'string', + default: 'none', + }, + }, + + save( { attributes } ) { + const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; + const className = classnames( `columns-${ columns }`, { + alignnone: align === 'none', + 'is-cropped': imageCrop, + } ); + return ( +
+ { images.map( ( image ) => { + let href; + + switch ( linkTo ) { + case 'media': + href = image.url; + break; + case 'attachment': + href = image.link; + break; + } + + const img = {; + + return ( +
+ { href ? { img } : img } +
+ ); + } ) } +
+ ); + }, + }, +]; + +export default deprecated; diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index ba5e06f0df7eb..a3c5eb00fd38d 100644 --- a/packages/block-library/src/gallery/index.js +++ b/packages/block-library/src/gallery/index.js @@ -1,24 +1,17 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import { map, some } from 'lodash'; - /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { RichText } from '@wordpress/block-editor'; /** * Internal dependencies */ +import deprecated from './deprecated'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; -import { defaultColumnsNumber } from './shared'; const { name } = metadata; @@ -35,184 +28,5 @@ export const settings = { transforms, edit, save, - deprecated: [ - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: 'ul.wp-block-gallery .blocks-gallery-item', - query: { - url: { - source: 'attribute', - selector: 'img', - attribute: 'src', - }, - alt: { - source: 'attribute', - selector: 'img', - attribute: 'alt', - default: '', - }, - id: { - source: 'attribute', - selector: 'img', - attribute: 'data-id', - }, - link: { - source: 'attribute', - selector: 'img', - attribute: 'data-link', - }, - caption: { - type: 'array', - source: 'children', - selector: 'figcaption', - }, - }, - }, - columns: { - type: 'number', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - default: 'none', - }, - }, - isEligible( { images, ids } ) { - return images && - images.length > 0 && - ( - ( ! ids && images ) || - ( ids && images && ids.length !== images.length ) || - some( images, ( id, index ) => { - if ( ! id && ids[ index ] !== null ) { - return true; - } - return parseInt( id, 10 ) !== ids[ index ]; - } ) - ); - }, - migrate( attributes ) { - return { - ...attributes, - ids: map( attributes.images, ( { id } ) => { - if ( ! id ) { - return null; - } - return parseInt( id, 10 ); - } ), - }; - }, - save( { attributes } ) { - const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes; - return ( - - ); - }, - }, - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: 'div.wp-block-gallery figure.blocks-gallery-image img', - query: { - url: { - source: 'attribute', - attribute: 'src', - }, - alt: { - source: 'attribute', - attribute: 'alt', - default: '', - }, - id: { - source: 'attribute', - attribute: 'data-id', - }, - }, - }, - columns: { - type: 'number', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - default: 'none', - }, - align: { - type: 'string', - default: 'none', - }, - }, - - save( { attributes } ) { - const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; - const className = classnames( `columns-${ columns }`, { - alignnone: align === 'none', - 'is-cropped': imageCrop, - } ); - return ( -
- { images.map( ( image ) => { - let href; - - switch ( linkTo ) { - case 'media': - href = image.url; - break; - case 'attachment': - href = image.link; - break; - } - - const img = {; - - return ( -
- { href ? { img } : img } -
- ); - } ) } -
- ); - }, - }, - ], + deprecated, }; diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 4dd2f16e086ce..86e6b924c2fd8 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -1,13 +1,7 @@ -/** - * External dependencies - */ -import { omit } from 'lodash'; - /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { RichText } from '@wordpress/block-editor'; /** * Internal dependencies @@ -17,58 +11,21 @@ import icon from './icon'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; -import { getLevelFromHeadingNodeName } from './shared'; -const { name, attributes: schema } = metadata; +const { name } = metadata; export { metadata, name }; -const supports = { - className: false, - anchor: true, -}; - export const settings = { title: __( 'Heading' ), description: __( 'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.' ), icon, keywords: [ __( 'title' ), __( 'subtitle' ) ], - supports, + supports: { + className: false, + anchor: true, + }, transforms, - deprecated: [ - { - supports, - attributes: { - ...omit( schema, [ 'level' ] ), - nodeName: { - type: 'string', - source: 'property', - selector: 'h1,h2,h3,h4,h5,h6', - property: 'nodeName', - default: 'H2', - }, - }, - migrate( attributes ) { - const { nodeName, ...migratedAttributes } = attributes; - - return { - ...migratedAttributes, - level: getLevelFromHeadingNodeName( nodeName ), - }; - }, - save( { attributes } ) { - const { align, nodeName, content } = attributes; - - return ( - - ); - }, - }, - ], merge( attributes, attributesToMerge ) { return { content: ( attributes.content || '' ) + ( attributesToMerge.content || '' ), diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js new file mode 100644 index 0000000000000..952cb77b52cc1 --- /dev/null +++ b/packages/block-library/src/image/deprecated.js @@ -0,0 +1,149 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { RichText } from '@wordpress/block-editor'; + +const blockAttributes = { + align: { + type: 'string', + }, + url: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'src', + }, + alt: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'alt', + default: '', + }, + caption: { + type: 'string', + source: 'html', + selector: 'figcaption', + }, + href: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'href', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'rel', + }, + linkClass: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'class', + }, + id: { + type: 'number', + }, + width: { + type: 'number', + }, + height: { + type: 'number', + }, + linkDestination: { + type: 'string', + default: 'none', + }, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'target', + }, +}; + +const deprecated = [ + { + attributes: blockAttributes, + save( { attributes } ) { + const { url, alt, caption, align, href, width, height, id } = attributes; + + const classes = classnames( { + [ `align${ align }` ]: align, + 'is-resized': width || height, + } ); + + const image = ( + { + ); + + return ( +
+ { href ? { image } : image } + { ! RichText.isEmpty( caption ) && } +
+ ); + }, + }, + { + attributes: blockAttributes, + save( { attributes } ) { + const { url, alt, caption, align, href, width, height, id } = attributes; + + const image = ( + { + ); + + return ( +
+ { href ? { image } : image } + { ! RichText.isEmpty( caption ) && } +
+ ); + }, + }, + { + attributes: blockAttributes, + save( { attributes } ) { + const { url, alt, caption, align, href, width, height } = attributes; + const extraImageProps = width || height ? { width, height } : {}; + const image = {; + + let figureStyle = {}; + + if ( width ) { + figureStyle = { width }; + } else if ( align === 'left' || align === 'right' ) { + figureStyle = { maxWidth: '50%' }; + } + + return ( +
+ { href ? { image } : image } + { ! RichText.isEmpty( caption ) && } +
+ ); + }, + }, +]; + +export default deprecated; diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index cf8eb321c4700..7d72cc6c103f3 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -1,24 +1,19 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import deprecated from './deprecated'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; -const { name, attributes: blockAttributes } = metadata; +const { name } = metadata; export { metadata, name }; @@ -39,80 +34,5 @@ export const settings = { }, edit, save, - deprecated: [ - { - attributes: blockAttributes, - save( { attributes } ) { - const { url, alt, caption, align, href, width, height, id } = attributes; - - const classes = classnames( { - [ `align${ align }` ]: align, - 'is-resized': width || height, - } ); - - const image = ( - { - ); - - return ( -
- { href ? { image } : image } - { ! RichText.isEmpty( caption ) && } -
- ); - }, - }, - { - attributes: blockAttributes, - save( { attributes } ) { - const { url, alt, caption, align, href, width, height, id } = attributes; - - const image = ( - { - ); - - return ( -
- { href ? { image } : image } - { ! RichText.isEmpty( caption ) && } -
- ); - }, - }, - { - attributes: blockAttributes, - save( { attributes } ) { - const { url, alt, caption, align, href, width, height } = attributes; - const extraImageProps = width || height ? { width, height } : {}; - const image = {; - - let figureStyle = {}; - - if ( width ) { - figureStyle = { width }; - } else if ( align === 'left' || align === 'right' ) { - figureStyle = { maxWidth: '50%' }; - } - - return ( -
- { href ? { image } : image } - { ! RichText.isEmpty( caption ) && } -
- ); - }, - }, - ], + deprecated, }; diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js index dcc1098e71b13..d7d857502b1ad 100644 --- a/packages/block-library/src/list/index.js +++ b/packages/block-library/src/list/index.js @@ -1,13 +1,7 @@ -/** - * External dependencies - */ -import { omit } from 'lodash'; - /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { RichText } from '@wordpress/block-editor'; /** * Internal dependencies @@ -18,54 +12,19 @@ import metadata from './block.json'; import save from './save'; import transforms from './transforms'; -const { name, attributes: schema } = metadata; +const { name } = metadata; export { metadata, name }; -const supports = { - className: false, -}; - export const settings = { title: __( 'List' ), description: __( 'Create a bulleted or numbered list.' ), icon, keywords: [ __( 'bullet list' ), __( 'ordered list' ), __( 'numbered list' ) ], - supports, + supports: { + className: false, + }, transforms, - deprecated: [ - { - supports, - attributes: { - ...omit( schema, [ 'ordered' ] ), - nodeName: { - type: 'string', - source: 'property', - selector: 'ol,ul', - property: 'nodeName', - default: 'UL', - }, - }, - migrate( attributes ) { - const { nodeName, ...migratedAttributes } = attributes; - - return { - ...migratedAttributes, - ordered: 'OL' === nodeName, - }; - }, - save( { attributes } ) { - const { nodeName, values } = attributes; - - return ( - - ); - }, - }, - ], merge( attributes, attributesToMerge ) { const { values } = attributesToMerge;