diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index ab36e6859b3e8..2123e259a97fa 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -12,10 +12,7 @@ import {
getColorClassName,
} from '@wordpress/block-editor';
-/**
- * Internal dependencies
- */
-import { DEFAULT_MEDIA_WIDTH } from './index';
+const DEFAULT_MEDIA_WIDTH = 50;
export default [
{
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 781b7e60b52cf..b20dc9693bafa 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -1,29 +1,17 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { noop } from 'lodash';
-
/**
* WordPress dependencies
*/
-import { createBlock } from '@wordpress/blocks';
-import {
- InnerBlocks,
- getColorClassName,
-} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
+import deprecated from './deprecated';
import edit from './edit';
import icon from './icon';
-import deprecated from './deprecated';
-import { imageFillStyles } from './media-container';
import metadata from './block.json';
-
-export const DEFAULT_MEDIA_WIDTH = 50;
+import save from './save';
+import transforms from './transforms';
const { name } = metadata;
@@ -31,125 +19,15 @@ export { metadata, name };
export const settings = {
title: __( 'Media & Text' ),
-
description: __( 'Set media and words side-by-side for a richer layout.' ),
-
icon,
-
keywords: [ __( 'image' ), __( 'video' ) ],
-
supports: {
align: [ 'wide', 'full' ],
html: false,
},
-
- transforms: {
- from: [
- {
- type: 'block',
- blocks: [ 'core/image' ],
- transform: ( { alt, url, id } ) => (
- createBlock( 'core/media-text', {
- mediaAlt: alt,
- mediaId: id,
- mediaUrl: url,
- mediaType: 'image',
- } )
- ),
- },
- {
- type: 'block',
- blocks: [ 'core/video' ],
- transform: ( { src, id } ) => (
- createBlock( 'core/media-text', {
- mediaId: id,
- mediaUrl: src,
- mediaType: 'video',
- } )
- ),
- },
- ],
- to: [
- {
- type: 'block',
- blocks: [ 'core/image' ],
- isMatch: ( { mediaType, mediaUrl } ) => {
- return ! mediaUrl || mediaType === 'image';
- },
- transform: ( { mediaAlt, mediaId, mediaUrl } ) => {
- return createBlock( 'core/image', {
- alt: mediaAlt,
- id: mediaId,
- url: mediaUrl,
- } );
- },
- },
- {
- type: 'block',
- blocks: [ 'core/video' ],
- isMatch: ( { mediaType, mediaUrl } ) => {
- return ! mediaUrl || mediaType === 'video';
- },
- transform: ( { mediaId, mediaUrl } ) => {
- return createBlock( 'core/video', {
- id: mediaId,
- src: mediaUrl,
- } );
- },
- },
- ],
- },
-
+ transforms,
edit,
-
- save( { attributes } ) {
- const {
- backgroundColor,
- customBackgroundColor,
- isStackedOnMobile,
- mediaAlt,
- mediaPosition,
- mediaType,
- mediaUrl,
- mediaWidth,
- mediaId,
- verticalAlignment,
- imageFill,
- focalPoint,
- } = attributes;
- const mediaTypeRenders = {
- image: () => ,
- video: () => ,
- };
- const backgroundClass = getColorClassName( 'background-color', backgroundColor );
- const className = classnames( {
- 'has-media-on-the-right': 'right' === mediaPosition,
- [ backgroundClass ]: backgroundClass,
- 'is-stacked-on-mobile': isStackedOnMobile,
- [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
- 'is-image-fill': imageFill,
- } );
- const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {};
-
- let gridTemplateColumns;
- if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
- gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
- }
- const style = {
- backgroundColor: backgroundClass ? undefined : customBackgroundColor,
- gridTemplateColumns,
- };
- return (
-
-
-
-
-
-
- );
- },
-
+ save,
deprecated,
};
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
new file mode 100644
index 0000000000000..ad00e4c76b19c
--- /dev/null
+++ b/packages/block-library/src/media-text/save.js
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ InnerBlocks,
+ getColorClassName,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from './media-container';
+
+const DEFAULT_MEDIA_WIDTH = 50;
+
+export default function save( { attributes } ) {
+ const {
+ backgroundColor,
+ customBackgroundColor,
+ isStackedOnMobile,
+ mediaAlt,
+ mediaPosition,
+ mediaType,
+ mediaUrl,
+ mediaWidth,
+ mediaId,
+ verticalAlignment,
+ imageFill,
+ focalPoint,
+ } = attributes;
+ const mediaTypeRenders = {
+ image: () => ,
+ video: () => ,
+ };
+ const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+ const className = classnames( {
+ 'has-media-on-the-right': 'right' === mediaPosition,
+ [ backgroundClass ]: backgroundClass,
+ 'is-stacked-on-mobile': isStackedOnMobile,
+ [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+ 'is-image-fill': imageFill,
+ } );
+ const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {};
+
+ let gridTemplateColumns;
+ if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+ gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
+ }
+ const style = {
+ backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+ gridTemplateColumns,
+ };
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/packages/block-library/src/media-text/transforms.js b/packages/block-library/src/media-text/transforms.js
new file mode 100644
index 0000000000000..f14246bed01b6
--- /dev/null
+++ b/packages/block-library/src/media-text/transforms.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+ from: [
+ {
+ type: 'block',
+ blocks: [ 'core/image' ],
+ transform: ( { alt, url, id } ) => (
+ createBlock( 'core/media-text', {
+ mediaAlt: alt,
+ mediaId: id,
+ mediaUrl: url,
+ mediaType: 'image',
+ } )
+ ),
+ },
+ {
+ type: 'block',
+ blocks: [ 'core/video' ],
+ transform: ( { src, id } ) => (
+ createBlock( 'core/media-text', {
+ mediaId: id,
+ mediaUrl: src,
+ mediaType: 'video',
+ } )
+ ),
+ },
+ ],
+ to: [
+ {
+ type: 'block',
+ blocks: [ 'core/image' ],
+ isMatch: ( { mediaType, mediaUrl } ) => {
+ return ! mediaUrl || mediaType === 'image';
+ },
+ transform: ( { mediaAlt, mediaId, mediaUrl } ) => {
+ return createBlock( 'core/image', {
+ alt: mediaAlt,
+ id: mediaId,
+ url: mediaUrl,
+ } );
+ },
+ },
+ {
+ type: 'block',
+ blocks: [ 'core/video' ],
+ isMatch: ( { mediaType, mediaUrl } ) => {
+ return ! mediaUrl || mediaType === 'video';
+ },
+ transform: ( { mediaId, mediaUrl } ) => {
+ return createBlock( 'core/video', {
+ id: mediaId,
+ src: mediaUrl,
+ } );
+ },
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js
index b57e48309c9e9..301efedc3b826 100644
--- a/packages/block-library/src/missing/index.js
+++ b/packages/block-library/src/missing/index.js
@@ -2,13 +2,13 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
/**
* Internal dependencies
*/
import edit from './edit';
import metadata from './block.json';
+import save from './save';
const { name } = metadata;
@@ -18,7 +18,6 @@ export const settings = {
name,
title: __( 'Unrecognized Block' ),
description: __( 'Your site doesn’t include support for this block.' ),
-
supports: {
className: false,
customClassName: false,
@@ -26,10 +25,6 @@ export const settings = {
html: false,
reusable: false,
},
-
edit,
- save( { attributes } ) {
- // Preserve the missing block's content.
- return { attributes.originalContent };
- },
+ save,
};
diff --git a/packages/block-library/src/missing/save.js b/packages/block-library/src/missing/save.js
new file mode 100644
index 0000000000000..eb2c26d318236
--- /dev/null
+++ b/packages/block-library/src/missing/save.js
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save( { attributes } ) {
+ // Preserve the missing block's content.
+ return { attributes.originalContent };
+}
diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js
index a9893832876ad..9e73bdccb405b 100644
--- a/packages/block-library/src/more/index.js
+++ b/packages/block-library/src/more/index.js
@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
/**
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -16,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;
@@ -23,60 +18,15 @@ export { metadata, name };
export const settings = {
title: _x( 'More', 'block name' ),
-
description: __( 'Content before this block will be shown in the excerpt on your archives page.' ),
-
icon,
-
supports: {
customClassName: false,
className: false,
html: false,
multiple: false,
},
-
- transforms: {
- from: [
- {
- type: 'raw',
- schema: {
- 'wp-block': { attributes: [ 'data-block' ] },
- },
- isMatch: ( node ) => node.dataset && node.dataset.block === 'core/more',
- transform( node ) {
- const { customText, noTeaser } = node.dataset;
- const attrs = {};
- // Don't copy unless defined and not an empty string
- if ( customText ) {
- attrs.customText = customText;
- }
- // Special handling for boolean
- if ( noTeaser === '' ) {
- attrs.noTeaser = true;
- }
- return createBlock( 'core/more', attrs );
- },
- },
- ],
- },
-
+ transforms,
edit,
-
- save( { attributes } ) {
- const { customText, noTeaser } = attributes;
-
- const moreTag = customText ?
- `` :
- '';
-
- const noTeaserTag = noTeaser ?
- '' :
- '';
-
- return (
-
- { compact( [ moreTag, noTeaserTag ] ).join( '\n' ) }
-
- );
- },
+ save,
};
diff --git a/packages/block-library/src/more/save.js b/packages/block-library/src/more/save.js
new file mode 100644
index 0000000000000..f3483924d85ff
--- /dev/null
+++ b/packages/block-library/src/more/save.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { compact } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save( { attributes } ) {
+ const { customText, noTeaser } = attributes;
+
+ const moreTag = customText ?
+ `` :
+ '';
+
+ const noTeaserTag = noTeaser ?
+ '' :
+ '';
+
+ return (
+
+ { compact( [ moreTag, noTeaserTag ] ).join( '\n' ) }
+
+ );
+}
diff --git a/packages/block-library/src/more/transforms.js b/packages/block-library/src/more/transforms.js
new file mode 100644
index 0000000000000..41cabf5183aff
--- /dev/null
+++ b/packages/block-library/src/more/transforms.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+ from: [
+ {
+ type: 'raw',
+ schema: {
+ 'wp-block': { attributes: [ 'data-block' ] },
+ },
+ isMatch: ( node ) => node.dataset && node.dataset.block === 'core/more',
+ transform( node ) {
+ const { customText, noTeaser } = node.dataset;
+ const attrs = {};
+ // Don't copy unless defined and not an empty string
+ if ( customText ) {
+ attrs.customText = customText;
+ }
+ // Special handling for boolean
+ if ( noTeaser === '' ) {
+ attrs.noTeaser = true;
+ }
+ return createBlock( 'core/more', attrs );
+ },
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/nextpage/index.js b/packages/block-library/src/nextpage/index.js
index e565f003eb522..99524951cecd3 100644
--- a/packages/block-library/src/nextpage/index.js
+++ b/packages/block-library/src/nextpage/index.js
@@ -2,8 +2,6 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -11,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;
@@ -18,41 +18,15 @@ export { metadata, name };
export const settings = {
title: __( 'Page Break' ),
-
description: __( 'Separate your content into a multi-page experience.' ),
-
icon,
-
keywords: [ __( 'next page' ), __( 'pagination' ) ],
-
supports: {
customClassName: false,
className: false,
html: false,
},
-
- transforms: {
- from: [
- {
- type: 'raw',
- schema: {
- 'wp-block': { attributes: [ 'data-block' ] },
- },
- isMatch: ( node ) => node.dataset && node.dataset.block === 'core/nextpage',
- transform() {
- return createBlock( 'core/nextpage', {} );
- },
- },
- ],
- },
-
+ transforms,
edit,
-
- save() {
- return (
-
- { '' }
-
- );
- },
+ save,
};
diff --git a/packages/block-library/src/nextpage/save.js b/packages/block-library/src/nextpage/save.js
new file mode 100644
index 0000000000000..f86dd0dc6b4be
--- /dev/null
+++ b/packages/block-library/src/nextpage/save.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save() {
+ return (
+
+ { '' }
+
+ );
+}
diff --git a/packages/block-library/src/nextpage/transforms.js b/packages/block-library/src/nextpage/transforms.js
new file mode 100644
index 0000000000000..e9aa6d2d9b199
--- /dev/null
+++ b/packages/block-library/src/nextpage/transforms.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+ from: [
+ {
+ type: 'raw',
+ schema: {
+ 'wp-block': { attributes: [ 'data-block' ] },
+ },
+ isMatch: ( node ) => node.dataset && node.dataset.block === 'core/nextpage',
+ transform() {
+ return createBlock( 'core/nextpage', {} );
+ },
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 5da558c07d4ff..a5578252f8fee 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -13,10 +13,8 @@ import {
} from '@wordpress/element';
import {
getColorClassName,
- getFontSizeClass,
RichText,
} from '@wordpress/block-editor';
-import { getPhrasingContentSchema } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -24,6 +22,8 @@ import { getPhrasingContentSchema } 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, attributes: schema } = metadata;
@@ -35,31 +35,11 @@ const supports = {
export const settings = {
title: __( 'Paragraph' ),
-
description: __( 'Start with the building block of all narrative.' ),
-
icon,
-
keywords: [ __( 'text' ) ],
-
supports,
-
- transforms: {
- from: [
- {
- type: 'raw',
- // Paragraph is a fallback and should be matched last.
- priority: 20,
- selector: 'p',
- schema: {
- p: {
- children: getPhrasingContentSchema(),
- },
- },
- },
- ],
- },
-
+ transforms,
deprecated: [
{
supports,
@@ -164,64 +144,17 @@ export const settings = {
},
},
],
-
merge( attributes, attributesToMerge ) {
return {
content: ( attributes.content || '' ) + ( attributesToMerge.content || '' ),
};
},
-
getEditWrapperProps( attributes ) {
const { width } = attributes;
if ( [ 'wide', 'full', 'left', 'right' ].indexOf( width ) !== -1 ) {
return { 'data-align': width };
}
},
-
edit,
-
- save( { attributes } ) {
- const {
- align,
- content,
- dropCap,
- backgroundColor,
- textColor,
- customBackgroundColor,
- customTextColor,
- fontSize,
- customFontSize,
- direction,
- } = attributes;
-
- const textClass = getColorClassName( 'color', textColor );
- const backgroundClass = getColorClassName( 'background-color', backgroundColor );
- const fontSizeClass = getFontSizeClass( fontSize );
-
- const className = classnames( {
- 'has-text-color': textColor || customTextColor,
- 'has-background': backgroundColor || customBackgroundColor,
- 'has-drop-cap': dropCap,
- [ fontSizeClass ]: fontSizeClass,
- [ textClass ]: textClass,
- [ backgroundClass ]: backgroundClass,
- } );
-
- const styles = {
- backgroundColor: backgroundClass ? undefined : customBackgroundColor,
- color: textClass ? undefined : customTextColor,
- fontSize: fontSizeClass ? undefined : customFontSize,
- textAlign: align,
- };
-
- return (
-
- );
- },
+ save,
};
diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js
new file mode 100644
index 0000000000000..b4c3b7c02d083
--- /dev/null
+++ b/packages/block-library/src/paragraph/save.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ getColorClassName,
+ getFontSizeClass,
+ RichText,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+ const {
+ align,
+ content,
+ dropCap,
+ backgroundColor,
+ textColor,
+ customBackgroundColor,
+ customTextColor,
+ fontSize,
+ customFontSize,
+ direction,
+ } = attributes;
+
+ const textClass = getColorClassName( 'color', textColor );
+ const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+ const fontSizeClass = getFontSizeClass( fontSize );
+
+ const className = classnames( {
+ 'has-text-color': textColor || customTextColor,
+ 'has-background': backgroundColor || customBackgroundColor,
+ 'has-drop-cap': dropCap,
+ [ fontSizeClass ]: fontSizeClass,
+ [ textClass ]: textClass,
+ [ backgroundClass ]: backgroundClass,
+ } );
+
+ const styles = {
+ backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+ color: textClass ? undefined : customTextColor,
+ fontSize: fontSizeClass ? undefined : customFontSize,
+ textAlign: align,
+ };
+
+ return (
+
+ );
+}
diff --git a/packages/block-library/src/paragraph/transforms.js b/packages/block-library/src/paragraph/transforms.js
new file mode 100644
index 0000000000000..51aa06292ef86
--- /dev/null
+++ b/packages/block-library/src/paragraph/transforms.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { getPhrasingContentSchema } from '@wordpress/blocks';
+
+const transforms = {
+ from: [
+ {
+ type: 'raw',
+ // Paragraph is a fallback and should be matched last.
+ priority: 20,
+ selector: 'p',
+ schema: {
+ p: {
+ children: getPhrasingContentSchema(),
+ },
+ },
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
index cbc3d0190b0b5..eee13ab37f6f7 100644
--- a/packages/block-library/src/preformatted/index.js
+++ b/packages/block-library/src/preformatted/index.js
@@ -2,8 +2,6 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
-import { RichText } from '@wordpress/block-editor';
/**
* Internal dependencies
@@ -11,6 +9,8 @@ import { RichText } from '@wordpress/block-editor';
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
const { name } = metadata;
@@ -18,55 +18,11 @@ export { metadata, name };
export const settings = {
title: __( 'Preformatted' ),
-
description: __( 'Add text that respects your spacing and tabs, and also allows styling.' ),
-
icon,
-
- transforms: {
- from: [
- {
- type: 'block',
- blocks: [ 'core/code', 'core/paragraph' ],
- transform: ( { content } ) =>
- createBlock( 'core/preformatted', {
- content,
- } ),
- },
- {
- type: 'raw',
- isMatch: ( node ) => (
- node.nodeName === 'PRE' &&
- ! (
- node.children.length === 1 &&
- node.firstChild.nodeName === 'CODE'
- )
- ),
- schema: {
- pre: {
- children: getPhrasingContentSchema(),
- },
- },
- },
- ],
- to: [
- {
- type: 'block',
- blocks: [ 'core/paragraph' ],
- transform: ( attributes ) =>
- createBlock( 'core/paragraph', attributes ),
- },
- ],
- },
-
+ transforms,
edit,
-
- save( { attributes } ) {
- const { content } = attributes;
-
- return ;
- },
-
+ save,
merge( attributes, attributesToMerge ) {
return {
content: attributes.content + attributesToMerge.content,
diff --git a/packages/block-library/src/preformatted/save.js b/packages/block-library/src/preformatted/save.js
new file mode 100644
index 0000000000000..f11dabb3f93e6
--- /dev/null
+++ b/packages/block-library/src/preformatted/save.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+ const { content } = attributes;
+
+ return ;
+}
diff --git a/packages/block-library/src/preformatted/transforms.js b/packages/block-library/src/preformatted/transforms.js
new file mode 100644
index 0000000000000..f7d736ef5770a
--- /dev/null
+++ b/packages/block-library/src/preformatted/transforms.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+
+const transforms = {
+ from: [
+ {
+ type: 'block',
+ blocks: [ 'core/code', 'core/paragraph' ],
+ transform: ( { content } ) =>
+ createBlock( 'core/preformatted', {
+ content,
+ } ),
+ },
+ {
+ type: 'raw',
+ isMatch: ( node ) => (
+ node.nodeName === 'PRE' &&
+ ! (
+ node.children.length === 1 &&
+ node.firstChild.nodeName === 'CODE'
+ )
+ ),
+ schema: {
+ pre: {
+ children: getPhrasingContentSchema(),
+ },
+ },
+ },
+ ],
+ to: [
+ {
+ type: 'block',
+ blocks: [ 'core/paragraph' ],
+ transform: ( attributes ) =>
+ createBlock( 'core/paragraph', attributes ),
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 45acc1f67463d..7875d6e7e5fbb 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -20,8 +20,10 @@ import {
PanelColorSettings,
} from '@wordpress/block-editor';
-export const SOLID_COLOR_STYLE_NAME = 'solid-color';
-export const SOLID_COLOR_CLASS = `is-style-${ SOLID_COLOR_STYLE_NAME }`;
+/**
+ * Internal dependencies
+ */
+import { SOLID_COLOR_CLASS } from './shared';
class PullQuoteEdit extends Component {
constructor( props ) {
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
index dca6f603b70b5..0c7c29b38ac67 100644
--- a/packages/block-library/src/pullquote/index.js
+++ b/packages/block-library/src/pullquote/index.js
@@ -1,99 +1,35 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { get, includes } from 'lodash';
-
/**
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
-import {
- getColorClassName,
- RichText,
- getColorObjectByAttributeValues,
-} from '@wordpress/block-editor';
-import {
- select,
-} from '@wordpress/data';
+import { RichText } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
-import {
- default as edit,
- SOLID_COLOR_STYLE_NAME,
- SOLID_COLOR_CLASS,
-} from './edit';
+import { SOLID_COLOR_STYLE_NAME } from './shared';
+import edit from './edit';
import icon from './icon';
import metadata from './block.json';
+import save from './save';
const { name, attributes: blockAttributes } = metadata;
export { metadata, name };
export const settings = {
-
title: __( 'Pullquote' ),
-
description: __( 'Give special visual emphasis to a quote from your text.' ),
-
icon,
-
styles: [
{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
{ name: SOLID_COLOR_STYLE_NAME, label: __( 'Solid Color' ) },
],
-
supports: {
align: [ 'left', 'right', 'wide', 'full' ],
},
-
edit,
-
- save( { attributes } ) {
- const { mainColor, customMainColor, textColor, customTextColor, value, citation, className } = attributes;
- const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
-
- let figureClass, figureStyles;
- // Is solid color style
- if ( isSolidColorStyle ) {
- figureClass = getColorClassName( 'background-color', mainColor );
- if ( ! figureClass ) {
- figureStyles = {
- backgroundColor: customMainColor,
- };
- }
- // Is normal style and a custom color is being used ( we can set a style directly with its value)
- } else if ( customMainColor ) {
- figureStyles = {
- borderColor: customMainColor,
- };
- // Is normal style and a named color is being used, we need to retrieve the color value to set the style,
- // as there is no expectation that themes create classes that set border colors.
- } else if ( mainColor ) {
- const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
- const colorObject = getColorObjectByAttributeValues( colors, mainColor );
- figureStyles = {
- borderColor: colorObject.color,
- };
- }
-
- const blockquoteTextColorClass = getColorClassName( 'color', textColor );
- const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
- [ blockquoteTextColorClass ]: blockquoteTextColorClass,
- } ) : undefined;
- const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
- return (
-
- );
- },
-
+ save,
deprecated: [ {
attributes: {
...blockAttributes,
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
new file mode 100644
index 0000000000000..67c53fafd28e3
--- /dev/null
+++ b/packages/block-library/src/pullquote/save.js
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { get, includes } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ getColorClassName,
+ RichText,
+ getColorObjectByAttributeValues,
+} from '@wordpress/block-editor';
+import {
+ select,
+} from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { SOLID_COLOR_CLASS } from './edit';
+
+export default function save( { attributes } ) {
+ const { mainColor, customMainColor, textColor, customTextColor, value, citation, className } = attributes;
+ const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+ let figureClass, figureStyles;
+ // Is solid color style
+ if ( isSolidColorStyle ) {
+ figureClass = getColorClassName( 'background-color', mainColor );
+ if ( ! figureClass ) {
+ figureStyles = {
+ backgroundColor: customMainColor,
+ };
+ }
+ // Is normal style and a custom color is being used ( we can set a style directly with its value)
+ } else if ( customMainColor ) {
+ figureStyles = {
+ borderColor: customMainColor,
+ };
+ // Is normal style and a named color is being used, we need to retrieve the color value to set the style,
+ // as there is no expectation that themes create classes that set border colors.
+ } else if ( mainColor ) {
+ const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
+ const colorObject = getColorObjectByAttributeValues( colors, mainColor );
+ figureStyles = {
+ borderColor: colorObject.color,
+ };
+ }
+
+ const blockquoteTextColorClass = getColorClassName( 'color', textColor );
+ const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
+ [ blockquoteTextColorClass ]: blockquoteTextColorClass,
+ } ) : undefined;
+ const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
+ return (
+
+ );
+}
diff --git a/packages/block-library/src/pullquote/shared.js b/packages/block-library/src/pullquote/shared.js
new file mode 100644
index 0000000000000..f4a58bc2baed2
--- /dev/null
+++ b/packages/block-library/src/pullquote/shared.js
@@ -0,0 +1,2 @@
+export const SOLID_COLOR_STYLE_NAME = 'solid-color';
+export const SOLID_COLOR_CLASS = `is-style-${ SOLID_COLOR_STYLE_NAME }`;
diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
index c40f929eca496..105bde9dde68b 100644
--- a/packages/block-library/src/quote/index.js
+++ b/packages/block-library/src/quote/index.js
@@ -7,9 +7,7 @@ import { omit } from 'lodash';
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
-import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
-import { create, join, split, toHTMLString } from '@wordpress/rich-text';
/**
* Internal dependencies
@@ -17,6 +15,8 @@ import { create, join, split, toHTMLString } from '@wordpress/rich-text';
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;
@@ -27,195 +27,13 @@ export const settings = {
description: __( 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' ),
icon,
keywords: [ __( 'blockquote' ) ],
-
- attributes: blockAttributes,
-
styles: [
{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
{ name: 'large', label: _x( 'Large', 'block style' ) },
],
-
- transforms: {
- from: [
- {
- type: 'block',
- isMultiBlock: true,
- blocks: [ 'core/paragraph' ],
- transform: ( attributes ) => {
- return createBlock( 'core/quote', {
- value: toHTMLString( {
- value: join( attributes.map( ( { content } ) =>
- create( { html: content } )
- ), '\u2028' ),
- multilineTag: 'p',
- } ),
- } );
- },
- },
- {
- type: 'block',
- blocks: [ 'core/heading' ],
- transform: ( { content } ) => {
- return createBlock( 'core/quote', {
- value: `${ content }
`,
- } );
- },
- },
- {
- type: 'block',
- blocks: [ 'core/pullquote' ],
- transform: ( { value, citation } ) => createBlock( 'core/quote', {
- value,
- citation,
- } ),
- },
- {
- type: 'prefix',
- prefix: '>',
- transform: ( content ) => {
- return createBlock( 'core/quote', {
- value: `${ content }
`,
- } );
- },
- },
- {
- type: 'raw',
- isMatch: ( node ) => {
- const isParagraphOrSingleCite = ( () => {
- let hasCitation = false;
- return ( child ) => {
- // Child is a paragraph.
- if ( child.nodeName === 'P' ) {
- return true;
- }
- // Child is a cite and no other cite child exists before it.
- if (
- ! hasCitation &&
- child.nodeName === 'CITE'
- ) {
- hasCitation = true;
- return true;
- }
- };
- } )();
- return node.nodeName === 'BLOCKQUOTE' &&
- // The quote block can only handle multiline paragraph
- // content with an optional cite child.
- Array.from( node.childNodes ).every(
- isParagraphOrSingleCite
- );
- },
- schema: {
- blockquote: {
- children: {
- p: {
- children: getPhrasingContentSchema(),
- },
- cite: {
- children: getPhrasingContentSchema(),
- },
- },
- },
- },
- },
- ],
- to: [
- {
- type: 'block',
- blocks: [ 'core/paragraph' ],
- transform: ( { value, citation } ) => {
- const paragraphs = [];
- if ( value && value !== '' ) {
- paragraphs.push(
- ...split( create( { html: value, multilineTag: 'p' } ), '\u2028' )
- .map( ( piece ) =>
- createBlock( 'core/paragraph', {
- content: toHTMLString( { value: piece } ),
- } )
- )
- );
- }
- if ( citation && citation !== '' ) {
- paragraphs.push(
- createBlock( 'core/paragraph', {
- content: citation,
- } )
- );
- }
-
- if ( paragraphs.length === 0 ) {
- return createBlock( 'core/paragraph', {
- content: '',
- } );
- }
- return paragraphs;
- },
- },
-
- {
- type: 'block',
- blocks: [ 'core/heading' ],
- transform: ( { value, citation, ...attrs } ) => {
- // If there is no quote content, use the citation as the
- // content of the resulting heading. A nonexistent citation
- // will result in an empty heading.
- if ( value === '' ) {
- return createBlock( 'core/heading', {
- content: citation,
- } );
- }
-
- const pieces = split( create( { html: value, multilineTag: 'p' } ), '\u2028' );
-
- const headingBlock = createBlock( 'core/heading', {
- content: toHTMLString( { value: pieces[ 0 ] } ),
- } );
-
- if ( ! citation && pieces.length === 1 ) {
- return headingBlock;
- }
-
- const quotePieces = pieces.slice( 1 );
-
- const quoteBlock = createBlock( 'core/quote', {
- ...attrs,
- citation,
- value: toHTMLString( {
- value: quotePieces.length ? join( pieces.slice( 1 ), '\u2028' ) : create(),
- multilineTag: 'p',
- } ),
- } );
-
- return [ headingBlock, quoteBlock ];
- },
- },
-
- {
- type: 'block',
- blocks: [ 'core/pullquote' ],
- transform: ( { value, citation } ) => {
- return createBlock( 'core/pullquote', {
- value,
- citation,
- } );
- },
- },
- ],
- },
-
+ transforms,
edit,
-
- save( { attributes } ) {
- const { align, value, citation } = attributes;
-
- return (
-
-
- { ! RichText.isEmpty( citation ) && }
-
- );
- },
-
+ save,
merge( attributes, { value, citation } ) {
if ( ! value || value === '' ) {
return {
@@ -230,7 +48,6 @@ export const settings = {
citation: attributes.citation + citation,
};
},
-
deprecated: [
{
attributes: {
diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
new file mode 100644
index 0000000000000..be0fe834fd764
--- /dev/null
+++ b/packages/block-library/src/quote/save.js
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+ const { align, value, citation } = attributes;
+
+ return (
+
+
+ { ! RichText.isEmpty( citation ) && }
+
+ );
+}
diff --git a/packages/block-library/src/quote/transforms.js b/packages/block-library/src/quote/transforms.js
new file mode 100644
index 0000000000000..c05c8b4b50a79
--- /dev/null
+++ b/packages/block-library/src/quote/transforms.js
@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+import { create, join, split, toHTMLString } from '@wordpress/rich-text';
+
+const transforms = {
+ from: [
+ {
+ type: 'block',
+ isMultiBlock: true,
+ blocks: [ 'core/paragraph' ],
+ transform: ( attributes ) => {
+ return createBlock( 'core/quote', {
+ value: toHTMLString( {
+ value: join( attributes.map( ( { content } ) =>
+ create( { html: content } )
+ ), '\u2028' ),
+ multilineTag: 'p',
+ } ),
+ } );
+ },
+ },
+ {
+ type: 'block',
+ blocks: [ 'core/heading' ],
+ transform: ( { content } ) => {
+ return createBlock( 'core/quote', {
+ value: `${ content }
`,
+ } );
+ },
+ },
+ {
+ type: 'block',
+ blocks: [ 'core/pullquote' ],
+ transform: ( { value, citation } ) => createBlock( 'core/quote', {
+ value,
+ citation,
+ } ),
+ },
+ {
+ type: 'prefix',
+ prefix: '>',
+ transform: ( content ) => {
+ return createBlock( 'core/quote', {
+ value: `${ content }
`,
+ } );
+ },
+ },
+ {
+ type: 'raw',
+ isMatch: ( node ) => {
+ const isParagraphOrSingleCite = ( () => {
+ let hasCitation = false;
+ return ( child ) => {
+ // Child is a paragraph.
+ if ( child.nodeName === 'P' ) {
+ return true;
+ }
+ // Child is a cite and no other cite child exists before it.
+ if (
+ ! hasCitation &&
+ child.nodeName === 'CITE'
+ ) {
+ hasCitation = true;
+ return true;
+ }
+ };
+ } )();
+ return node.nodeName === 'BLOCKQUOTE' &&
+ // The quote block can only handle multiline paragraph
+ // content with an optional cite child.
+ Array.from( node.childNodes ).every(
+ isParagraphOrSingleCite
+ );
+ },
+ schema: {
+ blockquote: {
+ children: {
+ p: {
+ children: getPhrasingContentSchema(),
+ },
+ cite: {
+ children: getPhrasingContentSchema(),
+ },
+ },
+ },
+ },
+ },
+ ],
+ to: [
+ {
+ type: 'block',
+ blocks: [ 'core/paragraph' ],
+ transform: ( { value, citation } ) => {
+ const paragraphs = [];
+ if ( value && value !== '' ) {
+ paragraphs.push(
+ ...split( create( { html: value, multilineTag: 'p' } ), '\u2028' )
+ .map( ( piece ) =>
+ createBlock( 'core/paragraph', {
+ content: toHTMLString( { value: piece } ),
+ } )
+ )
+ );
+ }
+ if ( citation && citation !== '' ) {
+ paragraphs.push(
+ createBlock( 'core/paragraph', {
+ content: citation,
+ } )
+ );
+ }
+
+ if ( paragraphs.length === 0 ) {
+ return createBlock( 'core/paragraph', {
+ content: '',
+ } );
+ }
+ return paragraphs;
+ },
+ },
+
+ {
+ type: 'block',
+ blocks: [ 'core/heading' ],
+ transform: ( { value, citation, ...attrs } ) => {
+ // If there is no quote content, use the citation as the
+ // content of the resulting heading. A nonexistent citation
+ // will result in an empty heading.
+ if ( value === '' ) {
+ return createBlock( 'core/heading', {
+ content: citation,
+ } );
+ }
+
+ const pieces = split( create( { html: value, multilineTag: 'p' } ), '\u2028' );
+
+ const headingBlock = createBlock( 'core/heading', {
+ content: toHTMLString( { value: pieces[ 0 ] } ),
+ } );
+
+ if ( ! citation && pieces.length === 1 ) {
+ return headingBlock;
+ }
+
+ const quotePieces = pieces.slice( 1 );
+
+ const quoteBlock = createBlock( 'core/quote', {
+ ...attrs,
+ citation,
+ value: toHTMLString( {
+ value: quotePieces.length ? join( pieces.slice( 1 ), '\u2028' ) : create(),
+ multilineTag: 'p',
+ } ),
+ } );
+
+ return [ headingBlock, quoteBlock ];
+ },
+ },
+
+ {
+ type: 'block',
+ blocks: [ 'core/pullquote' ],
+ transform: ( { value, citation } ) => {
+ return createBlock( 'core/pullquote', {
+ value,
+ citation,
+ } );
+ },
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/rss/index.js b/packages/block-library/src/rss/index.js
index 649b974a95690..46260d7751d02 100644
--- a/packages/block-library/src/rss/index.js
+++ b/packages/block-library/src/rss/index.js
@@ -12,19 +12,13 @@ export const name = 'core/rss';
export const settings = {
title: __( 'RSS' ),
-
description: __( 'Display entries from any RSS or Atom feed.' ),
-
icon: 'rss',
-
category: 'widgets',
-
keywords: [ __( 'atom' ), __( 'feed' ) ],
-
supports: {
align: true,
html: false,
},
-
edit,
};
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
index 2860e359314ad..9023ccde6979e 100644
--- a/packages/block-library/src/search/index.js
+++ b/packages/block-library/src/search/index.js
@@ -12,18 +12,12 @@ export const name = 'core/search';
export const settings = {
title: __( 'Search' ),
-
description: __( 'Help visitors find your content.' ),
-
icon: 'search',
-
category: 'widgets',
-
keywords: [ __( 'find' ) ],
-
supports: {
align: true,
},
-
edit,
};
diff --git a/packages/block-library/src/section/icon.js b/packages/block-library/src/section/icon.js
new file mode 100644
index 0000000000000..959b844350615
--- /dev/null
+++ b/packages/block-library/src/section/icon.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+
+);
diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/section/index.js
index cc2511a0bda3a..b91ed1e1c5443 100644
--- a/packages/block-library/src/section/index.js
+++ b/packages/block-library/src/section/index.js
@@ -1,20 +1,15 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
/**
* WordPress dependencies
*/
-import { Path, SVG } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import edit from './edit';
+import icon from './icon';
import metadata from './block.json';
+import save from './save';
const { name } = metadata;
@@ -22,37 +17,14 @@ export { metadata, name };
export const settings = {
title: __( 'Section' ),
-
- icon: ,
-
+ icon,
description: __( 'A wrapping section acting as a container for other blocks.' ),
-
keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ) ],
-
supports: {
align: [ 'wide', 'full' ],
anchor: true,
html: false,
},
-
edit,
-
- save( { attributes } ) {
- const { backgroundColor, customBackgroundColor } = attributes;
-
- const backgroundClass = getColorClassName( 'background-color', backgroundColor );
- const className = classnames( backgroundClass, {
- 'has-background': backgroundColor || customBackgroundColor,
- } );
-
- const styles = {
- backgroundColor: backgroundClass ? undefined : customBackgroundColor,
- };
-
- return (
-
-
-
- );
- },
+ save,
};
diff --git a/packages/block-library/src/section/save.js b/packages/block-library/src/section/save.js
new file mode 100644
index 0000000000000..a0ee8246c69a8
--- /dev/null
+++ b/packages/block-library/src/section/save.js
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+ const { backgroundColor, customBackgroundColor } = attributes;
+
+ const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+ const className = classnames( backgroundClass, {
+ 'has-background': backgroundColor || customBackgroundColor,
+ } );
+
+ const styles = {
+ backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/block-library/src/separator/index.js b/packages/block-library/src/separator/index.js
index 3a7dae05ea357..a1d7eb8bd08e5 100644
--- a/packages/block-library/src/separator/index.js
+++ b/packages/block-library/src/separator/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,39 +18,15 @@ export { metadata, name };
export const settings = {
title: __( 'Separator' ),
-
description: __( 'Create a break between ideas or sections with a horizontal separator.' ),
-
icon,
-
keywords: [ __( 'horizontal-line' ), 'hr', __( 'divider' ) ],
-
styles: [
{ name: 'default', label: __( 'Default' ), isDefault: true },
{ name: 'wide', label: __( 'Wide Line' ) },
{ name: 'dots', label: __( 'Dots' ) },
],
-
- transforms: {
- from: [
- {
- type: 'enter',
- regExp: /^-{3,}$/,
- transform: () => createBlock( 'core/separator' ),
- },
- {
- type: 'raw',
- selector: 'hr',
- schema: {
- hr: {},
- },
- },
- ],
- },
-
+ transforms,
edit,
-
- save() {
- return
;
- },
+ save,
};
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
new file mode 100644
index 0000000000000..72ddec8db51ce
--- /dev/null
+++ b/packages/block-library/src/separator/save.js
@@ -0,0 +1,3 @@
+export default function save() {
+ return
;
+}
diff --git a/packages/block-library/src/separator/transforms.js b/packages/block-library/src/separator/transforms.js
new file mode 100644
index 0000000000000..06d9d667caf63
--- /dev/null
+++ b/packages/block-library/src/separator/transforms.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+ from: [
+ {
+ type: 'enter',
+ regExp: /^-{3,}$/,
+ transform: () => createBlock( 'core/separator' ),
+ },
+ {
+ type: 'raw',
+ selector: 'hr',
+ schema: {
+ hr: {},
+ },
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/shortcode/index.js b/packages/block-library/src/shortcode/index.js
index 351151065e107..d1ccb00e17d9b 100644
--- a/packages/block-library/src/shortcode/index.js
+++ b/packages/block-library/src/shortcode/index.js
@@ -1,8 +1,6 @@
/**
* WordPress dependencies
*/
-import { removep, autop } from '@wordpress/autop';
-import { RawHTML } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
@@ -10,52 +8,22 @@ import { __ } from '@wordpress/i18n';
*/
import edit from './edit';
import icon from './icon';
+import save from './save';
+import transforms from './transforms';
export const name = 'core/shortcode';
export const settings = {
title: __( 'Shortcode' ),
-
description: __( 'Insert additional custom elements with a WordPress shortcode.' ),
-
icon,
-
category: 'widgets',
-
- transforms: {
- from: [
- {
- type: 'shortcode',
- // Per "Shortcode names should be all lowercase and use all
- // letters, but numbers and underscores should work fine too.
- // Be wary of using hyphens (dashes), you'll be better off not
- // using them." in https://codex.wordpress.org/Shortcode_API
- // Require that the first character be a letter. This notably
- // prevents footnote markings ([1]) from being caught as
- // shortcodes.
- tag: '[a-z][a-z0-9_-]*',
- attributes: {
- text: {
- type: 'string',
- shortcode: ( attrs, { content } ) => {
- return removep( autop( content ) );
- },
- },
- },
- priority: 20,
- },
- ],
- },
-
+ transforms,
supports: {
customClassName: false,
className: false,
html: false,
},
-
edit,
-
- save( { attributes } ) {
- return { attributes.text };
- },
+ save,
};
diff --git a/packages/block-library/src/shortcode/save.js b/packages/block-library/src/shortcode/save.js
new file mode 100644
index 0000000000000..a745788b1e6c0
--- /dev/null
+++ b/packages/block-library/src/shortcode/save.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save( { attributes } ) {
+ return { attributes.text };
+}
diff --git a/packages/block-library/src/shortcode/transforms.js b/packages/block-library/src/shortcode/transforms.js
new file mode 100644
index 0000000000000..eb0f7a0538dfe
--- /dev/null
+++ b/packages/block-library/src/shortcode/transforms.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { removep, autop } from '@wordpress/autop';
+
+const transforms = {
+ from: [
+ {
+ type: 'shortcode',
+ // Per "Shortcode names should be all lowercase and use all
+ // letters, but numbers and underscores should work fine too.
+ // Be wary of using hyphens (dashes), you'll be better off not
+ // using them." in https://codex.wordpress.org/Shortcode_API
+ // Require that the first character be a letter. This notably
+ // prevents footnote markings ([1]) from being caught as
+ // shortcodes.
+ tag: '[a-z][a-z0-9_-]*',
+ attributes: {
+ text: {
+ type: 'string',
+ shortcode: ( attrs, { content } ) => {
+ return removep( autop( content ) );
+ },
+ },
+ },
+ priority: 20,
+ },
+ ],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js
index 44a151168fb7a..09eb2e40c5c90 100644
--- a/packages/block-library/src/spacer/index.js
+++ b/packages/block-library/src/spacer/index.js
@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
+import save from './save';
const { name } = metadata;
@@ -16,14 +17,8 @@ export { metadata, name };
export const settings = {
title: __( 'Spacer' ),
-
description: __( 'Add white space between blocks and customize its height.' ),
-
icon,
-
edit,
-
- save( { attributes } ) {
- return ;
- },
+ save,
};
diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js
new file mode 100644
index 0000000000000..4e8067627c306
--- /dev/null
+++ b/packages/block-library/src/spacer/save.js
@@ -0,0 +1,3 @@
+export default function save( { attributes } ) {
+ return ;
+}