From 495f54cadb6cf1aac4b531fa715e3afcf18729e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Tue, 2 Apr 2019 16:00:49 +0200 Subject: [PATCH] Block library: Standardize file structure of core blocks (#14743) --- packages/block-library/src/archives/icon.js | 8 ++ packages/block-library/src/archives/index.js | 4 +- packages/block-library/src/button/icon.js | 8 ++ packages/block-library/src/button/index.js | 4 +- packages/block-library/src/categories/icon.js | 8 ++ .../block-library/src/categories/index.js | 4 +- packages/block-library/src/classic/icon.js | 8 ++ packages/block-library/src/classic/index.js | 4 +- packages/block-library/src/code/icon.js | 8 ++ packages/block-library/src/code/index.js | 7 +- packages/block-library/src/columns/icon.js | 8 ++ packages/block-library/src/columns/index.js | 8 +- packages/block-library/src/heading/icon.js | 8 ++ packages/block-library/src/heading/index.js | 7 +- packages/block-library/src/html/icon.js | 8 ++ packages/block-library/src/html/index.js | 4 +- .../block-library/src/latest-comments/icon.js | 8 ++ .../src/latest-comments/index.js | 4 +- .../block-library/src/latest-posts/icon.js | 8 ++ .../block-library/src/latest-posts/index.js | 4 +- .../block-library/src/legacy-widget/icon.js | 8 ++ .../block-library/src/legacy-widget/index.js | 4 +- packages/block-library/src/list/edit.js | 52 +++++++++++++ packages/block-library/src/list/icon.js | 8 ++ packages/block-library/src/list/index.js | 55 ++------------ packages/block-library/src/missing/edit.js | 56 ++++++++++++++ packages/block-library/src/missing/index.js | 56 ++------------ packages/block-library/src/more/icon.js | 8 ++ packages/block-library/src/more/index.js | 8 +- packages/block-library/src/nextpage/icon.js | 8 ++ packages/block-library/src/nextpage/index.js | 4 +- packages/block-library/src/paragraph/icon.js | 8 ++ packages/block-library/src/paragraph/index.js | 7 +- .../block-library/src/preformatted/edit.js | 28 +++++++ .../block-library/src/preformatted/icon.js | 8 ++ .../block-library/src/preformatted/index.js | 32 ++------ packages/block-library/src/pullquote/icon.js | 8 ++ packages/block-library/src/pullquote/index.js | 4 +- packages/block-library/src/quote/contants.js | 2 + packages/block-library/src/quote/edit.js | 70 ++++++++++++++++++ packages/block-library/src/quote/icon.js | 8 ++ packages/block-library/src/quote/index.js | 73 +++--------------- packages/block-library/src/separator/edit.js | 3 + packages/block-library/src/separator/icon.js | 8 ++ packages/block-library/src/separator/index.js | 13 ++-- packages/block-library/src/shortcode/edit.js | 29 ++++++++ packages/block-library/src/shortcode/icon.js | 8 ++ packages/block-library/src/shortcode/index.js | 33 ++------- packages/block-library/src/spacer/edit.js | 72 ++++++++++++++++++ packages/block-library/src/spacer/icon.js | 8 ++ packages/block-library/src/spacer/index.js | 74 ++----------------- packages/block-library/src/subhead/edit.js | 45 +++++++++++ packages/block-library/src/subhead/icon.js | 8 ++ packages/block-library/src/subhead/index.js | 51 +++---------- packages/block-library/src/table/icon.js | 8 ++ packages/block-library/src/table/index.js | 4 +- packages/block-library/src/template/icon.js | 8 ++ packages/block-library/src/template/index.js | 8 +- .../block-library/src/text-columns/edit.js | 73 ++++++++++++++++++ .../block-library/src/text-columns/index.js | 70 ++---------------- packages/block-library/src/verse/edit.js | 40 ++++++++++ packages/block-library/src/verse/icon.js | 8 ++ packages/block-library/src/verse/index.js | 46 +++--------- 63 files changed, 787 insertions(+), 475 deletions(-) create mode 100644 packages/block-library/src/archives/icon.js create mode 100644 packages/block-library/src/button/icon.js create mode 100644 packages/block-library/src/categories/icon.js create mode 100644 packages/block-library/src/classic/icon.js create mode 100644 packages/block-library/src/code/icon.js create mode 100644 packages/block-library/src/columns/icon.js create mode 100644 packages/block-library/src/heading/icon.js create mode 100644 packages/block-library/src/html/icon.js create mode 100644 packages/block-library/src/latest-comments/icon.js create mode 100644 packages/block-library/src/latest-posts/icon.js create mode 100644 packages/block-library/src/legacy-widget/icon.js create mode 100644 packages/block-library/src/list/edit.js create mode 100644 packages/block-library/src/list/icon.js create mode 100644 packages/block-library/src/missing/edit.js create mode 100644 packages/block-library/src/more/icon.js create mode 100644 packages/block-library/src/nextpage/icon.js create mode 100644 packages/block-library/src/paragraph/icon.js create mode 100644 packages/block-library/src/preformatted/edit.js create mode 100644 packages/block-library/src/preformatted/icon.js create mode 100644 packages/block-library/src/pullquote/icon.js create mode 100644 packages/block-library/src/quote/contants.js create mode 100644 packages/block-library/src/quote/edit.js create mode 100644 packages/block-library/src/quote/icon.js create mode 100644 packages/block-library/src/separator/edit.js create mode 100644 packages/block-library/src/separator/icon.js create mode 100644 packages/block-library/src/shortcode/edit.js create mode 100644 packages/block-library/src/shortcode/icon.js create mode 100644 packages/block-library/src/spacer/edit.js create mode 100644 packages/block-library/src/spacer/icon.js create mode 100644 packages/block-library/src/subhead/edit.js create mode 100644 packages/block-library/src/subhead/icon.js create mode 100644 packages/block-library/src/table/icon.js create mode 100644 packages/block-library/src/template/icon.js create mode 100644 packages/block-library/src/text-columns/edit.js create mode 100644 packages/block-library/src/verse/edit.js create mode 100644 packages/block-library/src/verse/icon.js diff --git a/packages/block-library/src/archives/icon.js b/packages/block-library/src/archives/icon.js new file mode 100644 index 0000000000000..023a1902171d0 --- /dev/null +++ b/packages/block-library/src/archives/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js index 63643a023027d..4d7c056879dff 100644 --- a/packages/block-library/src/archives/index.js +++ b/packages/block-library/src/archives/index.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { G, Path, SVG } from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/archives'; @@ -16,7 +16,7 @@ export const settings = { description: __( 'Display a monthly archive of your posts.' ), - icon: , + icon, category: 'widgets', diff --git a/packages/block-library/src/button/icon.js b/packages/block-library/src/button/icon.js new file mode 100644 index 0000000000000..6e18a60a648fe --- /dev/null +++ b/packages/block-library/src/button/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index d736c954b9982..909f067465ea8 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -7,7 +7,6 @@ import { omit, pick } from 'lodash'; /** * WordPress dependencies */ -import { G, Path, SVG } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { RichText, @@ -18,6 +17,7 @@ import { * Internal dependencies */ import edit from './edit'; +import icon from './icon'; const blockAttributes = { url: { @@ -66,7 +66,7 @@ export const settings = { description: __( 'Prompt visitors to take action with a button-style link.' ), - icon: , + icon, category: 'layout', diff --git a/packages/block-library/src/categories/icon.js b/packages/block-library/src/categories/icon.js new file mode 100644 index 0000000000000..fb89fbd4ce1a1 --- /dev/null +++ b/packages/block-library/src/categories/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js index b3d5867f8ede4..c7c2a4d83cee4 100644 --- a/packages/block-library/src/categories/index.js +++ b/packages/block-library/src/categories/index.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { SVG, Path } from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/categories'; @@ -16,7 +16,7 @@ export const settings = { description: __( 'Display a list of all categories.' ), - icon: , + icon, category: 'widgets', diff --git a/packages/block-library/src/classic/icon.js b/packages/block-library/src/classic/icon.js new file mode 100644 index 0000000000000..4193982d2aa44 --- /dev/null +++ b/packages/block-library/src/classic/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, Rect, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/classic/index.js b/packages/block-library/src/classic/index.js index bcc4f0a388010..6c888df411380 100644 --- a/packages/block-library/src/classic/index.js +++ b/packages/block-library/src/classic/index.js @@ -3,12 +3,12 @@ */ import { RawHTML } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; -import { Path, Rect, SVG } from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/freeform'; @@ -17,7 +17,7 @@ export const settings = { description: __( 'Use the classic WordPress editor.' ), - icon: , + icon, category: 'formatting', diff --git a/packages/block-library/src/code/icon.js b/packages/block-library/src/code/icon.js new file mode 100644 index 0000000000000..35e809693a36b --- /dev/null +++ b/packages/block-library/src/code/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js index ef893570bac1b..708f054ab318b 100644 --- a/packages/block-library/src/code/index.js +++ b/packages/block-library/src/code/index.js @@ -3,15 +3,12 @@ */ import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; -import { - Path, - SVG, -} from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/code'; @@ -20,7 +17,7 @@ export const settings = { description: __( 'Display code snippets that respect your spacing and tabs.' ), - icon: , + icon, category: 'formatting', diff --git a/packages/block-library/src/columns/icon.js b/packages/block-library/src/columns/icon.js new file mode 100644 index 0000000000000..f45aba71242c4 --- /dev/null +++ b/packages/block-library/src/columns/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index b0c4e9b2c0a5f..7900a7132ebb6 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -7,11 +7,6 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - G, - SVG, - Path, -} from '@wordpress/components'; import { InnerBlocks, @@ -22,13 +17,14 @@ import { */ import deprecated from './deprecated'; import edit from './edit'; +import icon from './icon'; export const name = 'core/columns'; export const settings = { title: __( 'Columns' ), - icon: , + icon, category: 'layout', diff --git a/packages/block-library/src/heading/icon.js b/packages/block-library/src/heading/icon.js new file mode 100644 index 0000000000000..9bff6fbd085a4 --- /dev/null +++ b/packages/block-library/src/heading/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 5a12b6e7a8cc0..eb1dc86d231c6 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -13,15 +13,12 @@ import { getBlockAttributes, } from '@wordpress/blocks'; import { RichText } from '@wordpress/block-editor'; -import { - Path, - SVG, -} from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; /** * Given a node name string for a heading node, returns its numeric level. @@ -65,7 +62,7 @@ export const settings = { description: __( 'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.' ), - icon: , + icon, category: 'common', diff --git a/packages/block-library/src/html/icon.js b/packages/block-library/src/html/icon.js new file mode 100644 index 0000000000000..789175b0cf0c4 --- /dev/null +++ b/packages/block-library/src/html/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/html/index.js b/packages/block-library/src/html/index.js index b537f2a8d6e42..2abb2fcb80d30 100644 --- a/packages/block-library/src/html/index.js +++ b/packages/block-library/src/html/index.js @@ -3,13 +3,13 @@ */ import { RawHTML } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { SVG, Path } from '@wordpress/components'; import { getPhrasingContentSchema } from '@wordpress/blocks'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/html'; @@ -18,7 +18,7 @@ export const settings = { description: __( 'Add custom HTML code and preview it as you edit.' ), - icon: , + icon, category: 'formatting', diff --git a/packages/block-library/src/latest-comments/icon.js b/packages/block-library/src/latest-comments/icon.js new file mode 100644 index 0000000000000..b14cf145c0ed1 --- /dev/null +++ b/packages/block-library/src/latest-comments/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/latest-comments/index.js b/packages/block-library/src/latest-comments/index.js index 4f2e500502305..002ee39c6f49f 100644 --- a/packages/block-library/src/latest-comments/index.js +++ b/packages/block-library/src/latest-comments/index.js @@ -1,13 +1,13 @@ /** * WordPress dependencies */ -import { G, Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/latest-comments'; @@ -16,7 +16,7 @@ export const settings = { description: __( 'Display a list of your most recent comments.' ), - icon: , + icon, category: 'widgets', diff --git a/packages/block-library/src/latest-posts/icon.js b/packages/block-library/src/latest-posts/icon.js new file mode 100644 index 0000000000000..7233084d330bc --- /dev/null +++ b/packages/block-library/src/latest-posts/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, Rect, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/latest-posts/index.js b/packages/block-library/src/latest-posts/index.js index 61200f61640a4..6532a934759f4 100644 --- a/packages/block-library/src/latest-posts/index.js +++ b/packages/block-library/src/latest-posts/index.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Path, Rect, SVG } from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/latest-posts'; @@ -16,7 +16,7 @@ export const settings = { description: __( 'Display a list of your most recent posts.' ), - icon: , + icon, category: 'widgets', diff --git a/packages/block-library/src/legacy-widget/icon.js b/packages/block-library/src/legacy-widget/icon.js new file mode 100644 index 0000000000000..31731fc0530d3 --- /dev/null +++ b/packages/block-library/src/legacy-widget/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/legacy-widget/index.js b/packages/block-library/src/legacy-widget/index.js index b7a4ae1f02151..0339aaba8f1fc 100644 --- a/packages/block-library/src/legacy-widget/index.js +++ b/packages/block-library/src/legacy-widget/index.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { G, Path, SVG } from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/legacy-widget'; @@ -16,7 +16,7 @@ export const settings = { description: __( 'Display a legacy widget.' ), - icon: , + icon, category: 'widgets', diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js new file mode 100644 index 0000000000000..9695563538efd --- /dev/null +++ b/packages/block-library/src/list/edit.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { createBlock } from '@wordpress/blocks'; +import { RichText } from '@wordpress/block-editor'; + +export default function ListEdit( { + attributes, + insertBlocksAfter, + setAttributes, + mergeBlocks, + onReplace, + className, +} ) { + const { ordered, values } = attributes; + + return ( + setAttributes( { values: nextValues } ) } + value={ values } + wrapperClassName="block-library-list" + className={ className } + placeholder={ __( 'Write list…' ) } + onMerge={ mergeBlocks } + unstableOnSplit={ + insertBlocksAfter ? + ( before, after, ...blocks ) => { + if ( ! blocks.length ) { + blocks.push( createBlock( 'core/paragraph' ) ); + } + + if ( after !== '
  • ' ) { + blocks.push( createBlock( 'core/list', { + ordered, + values: after, + } ) ); + } + + setAttributes( { values: before } ); + insertBlocksAfter( blocks ); + } : + undefined + } + onRemove={ () => onReplace( [] ) } + onTagNameChange={ ( tag ) => setAttributes( { ordered: tag === 'ol' } ) } + /> + ); +} diff --git a/packages/block-library/src/list/icon.js b/packages/block-library/src/list/icon.js new file mode 100644 index 0000000000000..cbc4c53631c2a --- /dev/null +++ b/packages/block-library/src/list/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js index 961d57535d044..c389d914f508a 100644 --- a/packages/block-library/src/list/index.js +++ b/packages/block-library/src/list/index.js @@ -14,7 +14,12 @@ import { } from '@wordpress/blocks'; import { RichText } from '@wordpress/block-editor'; import { replace, join, split, create, toHTMLString, LINE_SEPARATOR } from '@wordpress/rich-text'; -import { G, Path, SVG } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; const listContentSchema = { ...getPhrasingContentSchema(), @@ -56,7 +61,7 @@ export const name = 'core/list'; export const settings = { title: __( 'List' ), description: __( 'Create a bulleted or numbered list.' ), - icon: , + icon, category: 'common', keywords: [ __( 'bullet list' ), __( 'ordered list' ), __( 'numbered list' ) ], @@ -220,51 +225,7 @@ export const settings = { }; }, - edit( { - attributes, - insertBlocksAfter, - setAttributes, - mergeBlocks, - onReplace, - className, - } ) { - const { ordered, values } = attributes; - - return ( - setAttributes( { values: nextValues } ) } - value={ values } - wrapperClassName="block-library-list" - className={ className } - placeholder={ __( 'Write list…' ) } - onMerge={ mergeBlocks } - unstableOnSplit={ - insertBlocksAfter ? - ( before, after, ...blocks ) => { - if ( ! blocks.length ) { - blocks.push( createBlock( 'core/paragraph' ) ); - } - - if ( after !== '
  • ' ) { - blocks.push( createBlock( 'core/list', { - ordered, - values: after, - } ) ); - } - - setAttributes( { values: before } ); - insertBlocksAfter( blocks ); - } : - undefined - } - onRemove={ () => onReplace( [] ) } - onTagNameChange={ ( tag ) => setAttributes( { ordered: tag === 'ol' } ) } - /> - ); - }, + edit, save( { attributes } ) { const { ordered, values } = attributes; diff --git a/packages/block-library/src/missing/edit.js b/packages/block-library/src/missing/edit.js new file mode 100644 index 0000000000000..fbd205e98f79c --- /dev/null +++ b/packages/block-library/src/missing/edit.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { RawHTML, Fragment } from '@wordpress/element'; +import { Button } from '@wordpress/components'; +import { getBlockType, createBlock } from '@wordpress/blocks'; +import { withDispatch } from '@wordpress/data'; +import { Warning } from '@wordpress/block-editor'; + +function MissingBlockWarning( { attributes, convertToHTML } ) { + const { originalName, originalUndelimitedContent } = attributes; + const hasContent = !! originalUndelimitedContent; + const hasHTMLBlock = getBlockType( 'core/html' ); + + const actions = []; + let messageHTML; + if ( hasContent && hasHTMLBlock ) { + messageHTML = sprintf( + __( 'Your site doesn’t include support for the "%s" block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.' ), + originalName + ); + actions.push( + + ); + } else { + messageHTML = sprintf( + __( 'Your site doesn’t include support for the "%s" block. You can leave this block intact or remove it entirely.' ), + originalName + ); + } + + return ( + + + { messageHTML } + + { originalUndelimitedContent } + + ); +} + +const MissingEdit = withDispatch( ( dispatch, { clientId, attributes } ) => { + const { replaceBlock } = dispatch( 'core/block-editor' ); + return { + convertToHTML() { + replaceBlock( clientId, createBlock( 'core/html', { + content: attributes.originalUndelimitedContent, + } ) ); + }, + }; +} )( MissingBlockWarning ); + +export default MissingEdit; diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js index bee4d275fa85b..8f2c001498c09 100644 --- a/packages/block-library/src/missing/index.js +++ b/packages/block-library/src/missing/index.js @@ -1,57 +1,13 @@ /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; -import { RawHTML, Fragment } from '@wordpress/element'; -import { Button } from '@wordpress/components'; -import { getBlockType, createBlock } from '@wordpress/blocks'; -import { withDispatch } from '@wordpress/data'; -import { Warning } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; +import { RawHTML } from '@wordpress/element'; -function MissingBlockWarning( { attributes, convertToHTML } ) { - const { originalName, originalUndelimitedContent } = attributes; - const hasContent = !! originalUndelimitedContent; - const hasHTMLBlock = getBlockType( 'core/html' ); - - const actions = []; - let messageHTML; - if ( hasContent && hasHTMLBlock ) { - messageHTML = sprintf( - __( 'Your site doesn’t include support for the "%s" block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.' ), - originalName - ); - actions.push( - - ); - } else { - messageHTML = sprintf( - __( 'Your site doesn’t include support for the "%s" block. You can leave this block intact or remove it entirely.' ), - originalName - ); - } - - return ( - - - { messageHTML } - - { originalUndelimitedContent } - - ); -} - -const edit = withDispatch( ( dispatch, { clientId, attributes } ) => { - const { replaceBlock } = dispatch( 'core/block-editor' ); - return { - convertToHTML() { - replaceBlock( clientId, createBlock( 'core/html', { - content: attributes.originalUndelimitedContent, - } ) ); - }, - }; -} )( MissingBlockWarning ); +/** + * Internal dependencies + */ +import edit from './edit'; export const name = 'core/missing'; diff --git a/packages/block-library/src/more/icon.js b/packages/block-library/src/more/icon.js new file mode 100644 index 0000000000000..b73e5cdf9b3f6 --- /dev/null +++ b/packages/block-library/src/more/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js index 58878cbe160e4..37764c4065384 100644 --- a/packages/block-library/src/more/index.js +++ b/packages/block-library/src/more/index.js @@ -9,16 +9,12 @@ import { compact } from 'lodash'; import { __, _x } from '@wordpress/i18n'; import { RawHTML } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; -import { - Path, - G, - SVG, -} from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/more'; @@ -27,7 +23,7 @@ export const settings = { description: __( 'Content before this block will be shown in the excerpt on your archives page.' ), - icon: , + icon, category: 'layout', diff --git a/packages/block-library/src/nextpage/icon.js b/packages/block-library/src/nextpage/icon.js new file mode 100644 index 0000000000000..c4abf194ec759 --- /dev/null +++ b/packages/block-library/src/nextpage/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/nextpage/index.js b/packages/block-library/src/nextpage/index.js index 8ee142f82934f..6ab1cfacd755f 100644 --- a/packages/block-library/src/nextpage/index.js +++ b/packages/block-library/src/nextpage/index.js @@ -4,12 +4,12 @@ import { __ } from '@wordpress/i18n'; import { RawHTML } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; -import { G, Path, SVG } from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; export const name = 'core/nextpage'; @@ -18,7 +18,7 @@ export const settings = { description: __( 'Separate your content into a multi-page experience.' ), - icon: , + icon, category: 'layout', diff --git a/packages/block-library/src/paragraph/icon.js b/packages/block-library/src/paragraph/icon.js new file mode 100644 index 0000000000000..d8f6a46df59bc --- /dev/null +++ b/packages/block-library/src/paragraph/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 6a0c6172c3695..d0c73c548cc97 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -17,15 +17,12 @@ import { RichText, } from '@wordpress/block-editor'; import { getPhrasingContentSchema } from '@wordpress/blocks'; -import { - Path, - SVG, -} from '@wordpress/components'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; const supports = { className: false, @@ -79,7 +76,7 @@ export const settings = { description: __( 'Start with the building block of all narrative.' ), - icon: , + icon, category: 'common', diff --git a/packages/block-library/src/preformatted/edit.js b/packages/block-library/src/preformatted/edit.js new file mode 100644 index 0000000000000..7fb65dfdf40a3 --- /dev/null +++ b/packages/block-library/src/preformatted/edit.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { RichText } from '@wordpress/block-editor'; + +export default function PreformattedEdit( { attributes, mergeBlocks, setAttributes, className } ) { + const { content } = attributes; + + return ( + ' ) } + onChange={ ( nextContent ) => { + setAttributes( { + // Ensure line breaks are normalised to characters. This + // saves space, is easier to read, and ensures display + // filters work correctly. + content: nextContent.replace( /
    /g, '\n' ), + } ); + } } + placeholder={ __( 'Write preformatted text…' ) } + wrapperClassName={ className } + onMerge={ mergeBlocks } + /> + ); +} diff --git a/packages/block-library/src/preformatted/icon.js b/packages/block-library/src/preformatted/icon.js new file mode 100644 index 0000000000000..2ece9106140a8 --- /dev/null +++ b/packages/block-library/src/preformatted/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, Rect, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js index 9553ac77885f9..95348fb4b6c38 100644 --- a/packages/block-library/src/preformatted/index.js +++ b/packages/block-library/src/preformatted/index.js @@ -4,7 +4,12 @@ import { __ } from '@wordpress/i18n'; import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks'; import { RichText } from '@wordpress/block-editor'; -import { Path, Rect, SVG } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; export const name = 'core/preformatted'; @@ -13,7 +18,7 @@ export const settings = { description: __( 'Add text that respects your spacing and tabs, and also allows styling.' ), - icon: , + icon, category: 'formatting', @@ -62,28 +67,7 @@ export const settings = { ], }, - edit( { attributes, mergeBlocks, setAttributes, className } ) { - const { content } = attributes; - - return ( - ' ) } - onChange={ ( nextContent ) => { - setAttributes( { - // Ensure line breaks are normalised to characters. This - // saves space, is easier to read, and ensures display - // filters work correctly. - content: nextContent.replace( /
    /g, '\n' ), - } ); - } } - placeholder={ __( 'Write preformatted text…' ) } - wrapperClassName={ className } - onMerge={ mergeBlocks } - /> - ); - }, + edit, save( { attributes } ) { const { content } = attributes; diff --git a/packages/block-library/src/pullquote/icon.js b/packages/block-library/src/pullquote/icon.js new file mode 100644 index 0000000000000..f8200535b7961 --- /dev/null +++ b/packages/block-library/src/pullquote/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, Polygon, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js index 308f230c94dd9..354264ffaa41d 100644 --- a/packages/block-library/src/pullquote/index.js +++ b/packages/block-library/src/pullquote/index.js @@ -16,7 +16,6 @@ import { import { select, } from '@wordpress/data'; -import { Path, Polygon, SVG } from '@wordpress/components'; /** * Internal dependencies @@ -26,6 +25,7 @@ import { SOLID_COLOR_STYLE_NAME, SOLID_COLOR_CLASS, } from './edit'; +import icon from './icon'; const blockAttributes = { value: { @@ -62,7 +62,7 @@ export const settings = { description: __( 'Give special visual emphasis to a quote from your text.' ), - icon: , + icon, category: 'formatting', diff --git a/packages/block-library/src/quote/contants.js b/packages/block-library/src/quote/contants.js new file mode 100644 index 0000000000000..8048056554ae2 --- /dev/null +++ b/packages/block-library/src/quote/contants.js @@ -0,0 +1,2 @@ +export const ATTRIBUTE_QUOTE = 'value'; +export const ATTRIBUTE_CITATION = 'citation'; diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js new file mode 100644 index 0000000000000..1fff04fe12405 --- /dev/null +++ b/packages/block-library/src/quote/edit.js @@ -0,0 +1,70 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { + BlockControls, + AlignmentToolbar, + RichText, +} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { ATTRIBUTE_QUOTE, ATTRIBUTE_CITATION } from './contants'; + +export default function QuoteEdit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) { + const { align, value, citation } = attributes; + return ( + + + { + setAttributes( { align: nextAlign } ); + } } + /> + +
    + setAttributes( { + value: nextValue, + } ) + } + onMerge={ mergeBlocks } + onRemove={ ( forward ) => { + const hasEmptyCitation = ! citation || citation.length === 0; + if ( ! forward && hasEmptyCitation ) { + onReplace( [] ); + } + } } + placeholder={ + // translators: placeholder text used for the quote + __( 'Write quote…' ) + } + /> + { ( ! RichText.isEmpty( citation ) || isSelected ) && ( + setAttributes( { + citation: nextCitation, + } ) + } + placeholder={ + // translators: placeholder text used for the citation + __( 'Write citation…' ) + } + className="wp-block-quote__citation" + /> + ) } +
    +     + ); +} diff --git a/packages/block-library/src/quote/icon.js b/packages/block-library/src/quote/icon.js new file mode 100644 index 0000000000000..22de4ef2da181 --- /dev/null +++ b/packages/block-library/src/quote/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index 20458db83572e..7afeceb6732c6 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -7,18 +7,16 @@ import { omit } from 'lodash'; * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks'; -import { - BlockControls, - AlignmentToolbar, - RichText, -} from '@wordpress/block-editor'; +import { RichText } from '@wordpress/block-editor'; import { join, split, create, toHTMLString } from '@wordpress/rich-text'; -import { Path, SVG } from '@wordpress/components'; -const ATTRIBUTE_QUOTE = 'value'; -const ATTRIBUTE_CITATION = 'citation'; +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; +import { ATTRIBUTE_QUOTE, ATTRIBUTE_CITATION } from './contants'; const blockAttributes = { [ ATTRIBUTE_QUOTE ]: { @@ -44,7 +42,7 @@ export const name = 'core/quote'; export const settings = { title: __( 'Quote' ), description: __( 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' ), - icon: , + icon, category: 'common', keywords: [ __( 'blockquote' ) ], @@ -223,60 +221,7 @@ export const settings = { ], }, - edit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) { - const { align, value, citation } = attributes; - return ( - - - { - setAttributes( { align: nextAlign } ); - } } - /> - -
    - setAttributes( { - value: nextValue, - } ) - } - onMerge={ mergeBlocks } - onRemove={ ( forward ) => { - const hasEmptyCitation = ! citation || citation.length === 0; - if ( ! forward && hasEmptyCitation ) { - onReplace( [] ); - } - } } - placeholder={ - // translators: placeholder text used for the quote - __( 'Write quote…' ) - } - /> - { ( ! RichText.isEmpty( citation ) || isSelected ) && ( - setAttributes( { - citation: nextCitation, - } ) - } - placeholder={ - // translators: placeholder text used for the citation - __( 'Write citation…' ) - } - className="wp-block-quote__citation" - /> - ) } -
    -     - ); - }, + edit, save( { attributes } ) { const { align, value, citation } = attributes; diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js new file mode 100644 index 0000000000000..9a4e8e751eb6e --- /dev/null +++ b/packages/block-library/src/separator/edit.js @@ -0,0 +1,3 @@ +export default function SeparatorEdit( { className } ) { + return
    ; +} diff --git a/packages/block-library/src/separator/icon.js b/packages/block-library/src/separator/icon.js new file mode 100644 index 0000000000000..3fcea1436545b --- /dev/null +++ b/packages/block-library/src/separator/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/separator/index.js b/packages/block-library/src/separator/index.js index f802bec8364ad..b846b76b623b2 100644 --- a/packages/block-library/src/separator/index.js +++ b/packages/block-library/src/separator/index.js @@ -3,7 +3,12 @@ */ import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; -import { SVG, Path } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; export const name = 'core/separator'; @@ -12,7 +17,7 @@ export const settings = { description: __( 'Create a break between ideas or sections with a horizontal separator.' ), - icon: , + icon, category: 'layout', @@ -41,9 +46,7 @@ export const settings = { ], }, - edit( { className } ) { - return
    ; - }, + edit, save() { return
    ; diff --git a/packages/block-library/src/shortcode/edit.js b/packages/block-library/src/shortcode/edit.js new file mode 100644 index 0000000000000..b45b239f1bcf2 --- /dev/null +++ b/packages/block-library/src/shortcode/edit.js @@ -0,0 +1,29 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Dashicon } from '@wordpress/components'; +import { PlainText } from '@wordpress/block-editor'; +import { withInstanceId } from '@wordpress/compose'; + +const ShortcodeEdit = ( { attributes, setAttributes, instanceId } ) => { + const inputId = `blocks-shortcode-input-${ instanceId }`; + + return ( +
    + + setAttributes( { text } ) } + /> + </div> + ); +}; + +export default withInstanceId( ShortcodeEdit ); diff --git a/packages/block-library/src/shortcode/icon.js b/packages/block-library/src/shortcode/icon.js new file mode 100644 index 0000000000000..b60538f397629 --- /dev/null +++ b/packages/block-library/src/shortcode/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M8.5,21.4l1.9,0.5l5.2-19.3l-1.9-0.5L8.5,21.4z M3,19h4v-2H5V7h2V5H3V19z M17,5v2h2v10h-2v2h4V5H17z" /></SVG> +); diff --git a/packages/block-library/src/shortcode/index.js b/packages/block-library/src/shortcode/index.js index ab872ec664792..351151065e107 100644 --- a/packages/block-library/src/shortcode/index.js +++ b/packages/block-library/src/shortcode/index.js @@ -4,9 +4,12 @@ import { removep, autop } from '@wordpress/autop'; import { RawHTML } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Dashicon, SVG, Path } from '@wordpress/components'; -import { PlainText } from '@wordpress/block-editor'; -import { withInstanceId } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; export const name = 'core/shortcode'; @@ -15,7 +18,7 @@ export const settings = { description: __( 'Insert additional custom elements with a WordPress shortcode.' ), - icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M8.5,21.4l1.9,0.5l5.2-19.3l-1.9-0.5L8.5,21.4z M3,19h4v-2H5V7h2V5H3V19z M17,5v2h2v10h-2v2h4V5H17z" /></SVG>, + icon, category: 'widgets', @@ -50,27 +53,7 @@ export const settings = { html: false, }, - edit: withInstanceId( - ( { attributes, setAttributes, instanceId } ) => { - const inputId = `blocks-shortcode-input-${ instanceId }`; - - return ( - <div className="wp-block-shortcode"> - <label htmlFor={ inputId }> - <Dashicon icon="shortcode" /> - { __( 'Shortcode' ) } - </label> - <PlainText - className="input-control" - id={ inputId } - value={ attributes.text } - placeholder={ __( 'Write shortcode here…' ) } - onChange={ ( text ) => setAttributes( { text } ) } - /> - </div> - ); - } - ), + edit, save( { attributes } ) { return <RawHTML>{ attributes.text }</RawHTML>; diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js new file mode 100644 index 0000000000000..6d773cac5c281 --- /dev/null +++ b/packages/block-library/src/spacer/edit.js @@ -0,0 +1,72 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { InspectorControls } from '@wordpress/block-editor'; +import { BaseControl, PanelBody, ResizableBox } from '@wordpress/components'; +import { withInstanceId } from '@wordpress/compose'; + +const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, instanceId } ) => { + const { height } = attributes; + const id = `block-spacer-height-input-${ instanceId }`; + + return ( + <Fragment> + <ResizableBox + className={ classnames( + 'block-library-spacer__resize-container', + { 'is-selected': isSelected }, + ) } + size={ { + height, + } } + minHeight="20" + enable={ { + top: false, + right: false, + bottom: true, + left: false, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false, + } } + onResizeStop={ ( event, direction, elt, delta ) => { + setAttributes( { + height: parseInt( height + delta.height, 10 ), + } ); + toggleSelection( true ); + } } + onResizeStart={ () => { + toggleSelection( false ); + } } + /> + <InspectorControls> + <PanelBody title={ __( 'Spacer Settings' ) }> + <BaseControl label={ __( 'Height in pixels' ) } id={ id }> + <input + type="number" + id={ id } + onChange={ ( event ) => { + setAttributes( { + height: parseInt( event.target.value, 10 ), + } ); + } } + value={ height } + min="20" + step="10" + /> + </BaseControl> + </PanelBody> + </InspectorControls> + </Fragment> + ); +}; + +export default withInstanceId( SpacerEdit ); diff --git a/packages/block-library/src/spacer/icon.js b/packages/block-library/src/spacer/icon.js new file mode 100644 index 0000000000000..d16b440f7d556 --- /dev/null +++ b/packages/block-library/src/spacer/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><G><Path d="M13 4v2h3.59L6 16.59V13H4v7h7v-2H7.41L18 7.41V11h2V4h-7" /></G></SVG> +); diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js index fd83148315454..db167da48b927 100644 --- a/packages/block-library/src/spacer/index.js +++ b/packages/block-library/src/spacer/index.js @@ -1,16 +1,13 @@ /** - * External dependencies + * WordPress dependencies */ -import classnames from 'classnames'; +import { __ } from '@wordpress/i18n'; /** - * WordPress dependencies + * Internal dependencies */ -import { Fragment } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { InspectorControls } from '@wordpress/block-editor'; -import { BaseControl, PanelBody, ResizableBox, G, SVG, Path } from '@wordpress/components'; -import { withInstanceId } from '@wordpress/compose'; +import edit from './edit'; +import icon from './icon'; export const name = 'core/spacer'; @@ -19,7 +16,7 @@ export const settings = { description: __( 'Add white space between blocks and customize its height.' ), - icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><G><Path d="M13 4v2h3.59L6 16.59V13H4v7h7v-2H7.41L18 7.41V11h2V4h-7" /></G></SVG>, + icon, category: 'layout', @@ -30,64 +27,7 @@ export const settings = { }, }, - edit: withInstanceId( - ( { attributes, isSelected, setAttributes, toggleSelection, instanceId } ) => { - const { height } = attributes; - const id = `block-spacer-height-input-${ instanceId }`; - - return ( - <Fragment> - <ResizableBox - className={ classnames( - 'block-library-spacer__resize-container', - { 'is-selected': isSelected } - ) } - size={ { - height, - } } - minHeight="20" - enable={ { - top: false, - right: false, - bottom: true, - left: false, - topRight: false, - bottomRight: false, - bottomLeft: false, - topLeft: false, - } } - onResizeStop={ ( event, direction, elt, delta ) => { - setAttributes( { - height: parseInt( height + delta.height, 10 ), - } ); - toggleSelection( true ); - } } - onResizeStart={ () => { - toggleSelection( false ); - } } - /> - <InspectorControls> - <PanelBody title={ __( 'Spacer Settings' ) }> - <BaseControl label={ __( 'Height in pixels' ) } id={ id }> - <input - type="number" - id={ id } - onChange={ ( event ) => { - setAttributes( { - height: parseInt( event.target.value, 10 ), - } ); - } } - value={ height } - min="20" - step="10" - /> - </BaseControl> - </PanelBody> - </InspectorControls> - </Fragment> - ); - } - ), + edit, save( { attributes } ) { return <div style={ { height: attributes.height } } aria-hidden />; diff --git a/packages/block-library/src/subhead/edit.js b/packages/block-library/src/subhead/edit.js new file mode 100644 index 0000000000000..53535620b0f81 --- /dev/null +++ b/packages/block-library/src/subhead/edit.js @@ -0,0 +1,45 @@ +/** + * WordPress dependencies + */ +import deprecated from '@wordpress/deprecated'; +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { + RichText, + BlockControls, + AlignmentToolbar, +} from '@wordpress/block-editor'; + +export default function SubheadEdit( { attributes, setAttributes, className } ) { + const { align, content, placeholder } = attributes; + + deprecated( 'The Subheading block', { + alternative: 'the Paragraph block', + plugin: 'Gutenberg', + } ); + + return ( + <Fragment> + <BlockControls> + <AlignmentToolbar + value={ align } + onChange={ ( nextAlign ) => { + setAttributes( { align: nextAlign } ); + } } + /> + </BlockControls> + <RichText + tagName="p" + value={ content } + onChange={ ( nextContent ) => { + setAttributes( { + content: nextContent, + } ); + } } + style={ { textAlign: align } } + className={ className } + placeholder={ placeholder || __( 'Write subheading…' ) } + /> + </Fragment> + ); +} diff --git a/packages/block-library/src/subhead/icon.js b/packages/block-library/src/subhead/icon.js new file mode 100644 index 0000000000000..cbc71f6a325d0 --- /dev/null +++ b/packages/block-library/src/subhead/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M7.1 6l-.5 3h4.5L9.4 19h3l1.8-10h4.5l.5-3H7.1z" /></SVG> +); diff --git a/packages/block-library/src/subhead/index.js b/packages/block-library/src/subhead/index.js index d35847e4edce1..467b33af8eec6 100644 --- a/packages/block-library/src/subhead/index.js +++ b/packages/block-library/src/subhead/index.js @@ -1,16 +1,15 @@ /** * WordPress dependencies */ -import deprecated from '@wordpress/deprecated'; import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; -import { - RichText, - BlockControls, - AlignmentToolbar, -} from '@wordpress/block-editor'; -import { SVG, Path } from '@wordpress/components'; +import { RichText } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; export const name = 'core/subhead'; @@ -19,7 +18,7 @@ export const settings = { description: __( 'This block is deprecated. Please use the Paragraph block instead.' ), - icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M7.1 6l-.5 3h4.5L9.4 19h3l1.8-10h4.5l.5-3H7.1z" /></SVG>, + icon, category: 'common', @@ -51,39 +50,7 @@ export const settings = { ], }, - edit( { attributes, setAttributes, className } ) { - const { align, content, placeholder } = attributes; - - deprecated( 'The Subheading block', { - alternative: 'the Paragraph block', - plugin: 'Gutenberg', - } ); - - return ( - <Fragment> - <BlockControls> - <AlignmentToolbar - value={ align } - onChange={ ( nextAlign ) => { - setAttributes( { align: nextAlign } ); - } } - /> - </BlockControls> - <RichText - tagName="p" - value={ content } - onChange={ ( nextContent ) => { - setAttributes( { - content: nextContent, - } ); - } } - style={ { textAlign: align } } - className={ className } - placeholder={ placeholder || __( 'Write subheading…' ) } - /> - </Fragment> - ); - }, + edit, save( { attributes } ) { const { align, content } = attributes; diff --git a/packages/block-library/src/table/icon.js b/packages/block-library/src/table/icon.js new file mode 100644 index 0000000000000..0292142033cf2 --- /dev/null +++ b/packages/block-library/src/table/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 2v3H5V5h15zm-5 14h-5v-9h5v9zM5 10h3v9H5v-9zm12 9v-9h3v9h-3z" /></G></SVG> +); diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js index 35a37c52f00d5..727edb7c03503 100644 --- a/packages/block-library/src/table/index.js +++ b/packages/block-library/src/table/index.js @@ -8,13 +8,13 @@ import classnames from 'classnames'; */ import { __, _x } from '@wordpress/i18n'; import { getPhrasingContentSchema } from '@wordpress/blocks'; -import { G, Path, SVG } from '@wordpress/components'; import { RichText, getColorClassName } from '@wordpress/block-editor'; /** * Internal dependencies */ import edit from './edit'; +import icon from './icon'; const tableContentPasteSchema = { tr: { @@ -84,7 +84,7 @@ export const name = 'core/table'; export const settings = { title: __( 'Table' ), description: __( 'Insert a table — perfect for sharing charts and data.' ), - icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 2v3H5V5h15zm-5 14h-5v-9h5v9zM5 10h3v9H5v-9zm12 9v-9h3v9h-3z" /></G></SVG>, + icon, category: 'formatting', attributes: { diff --git a/packages/block-library/src/template/icon.js b/packages/block-library/src/template/icon.js new file mode 100644 index 0000000000000..e62335ee654bb --- /dev/null +++ b/packages/block-library/src/template/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, Rect, SVG } from '@wordpress/components'; + +export default ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Rect x="0" fill="none" width="24" height="24" /><G><Path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM6 6h5v5H6V6zm4.5 13C9.12 19 8 17.88 8 16.5S9.12 14 10.5 14s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm3-6l3-5 3 5h-6z" /></G></SVG> +); diff --git a/packages/block-library/src/template/index.js b/packages/block-library/src/template/index.js index 6da60730b2596..755f31b724b83 100644 --- a/packages/block-library/src/template/index.js +++ b/packages/block-library/src/template/index.js @@ -3,7 +3,11 @@ */ import { __ } from '@wordpress/i18n'; import { InnerBlocks } from '@wordpress/block-editor'; -import { G, Path, Rect, SVG } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import icon from './icon'; export const name = 'core/template'; @@ -14,7 +18,7 @@ export const settings = { description: __( 'Template block used as a container.' ), - icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Rect x="0" fill="none" width="24" height="24" /><G><Path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM6 6h5v5H6V6zm4.5 13C9.12 19 8 17.88 8 16.5S9.12 14 10.5 14s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm3-6l3-5 3 5h-6z" /></G></SVG>, + icon, supports: { customClassName: false, diff --git a/packages/block-library/src/text-columns/edit.js b/packages/block-library/src/text-columns/edit.js new file mode 100644 index 0000000000000..91ea2f1fa90ef --- /dev/null +++ b/packages/block-library/src/text-columns/edit.js @@ -0,0 +1,73 @@ +/** + * External dependencies + */ +import { get, times } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody, RangeControl } from '@wordpress/components'; +import { Fragment } from '@wordpress/element'; +import { + BlockControls, + BlockAlignmentToolbar, + InspectorControls, + RichText, +} from '@wordpress/block-editor'; +import deprecated from '@wordpress/deprecated'; + +export default function TextColumnsEdit( { attributes, setAttributes, className } ) { + const { width, content, columns } = attributes; + + deprecated( 'The Text Columns block', { + alternative: 'the Columns block', + plugin: 'Gutenberg', + } ); + + return ( + <Fragment> + <BlockControls> + <BlockAlignmentToolbar + value={ width } + onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) } + controls={ [ 'center', 'wide', 'full' ] } + /> + </BlockControls> + <InspectorControls> + <PanelBody> + <RangeControl + label={ __( 'Columns' ) } + value={ columns } + onChange={ ( value ) => setAttributes( { columns: value } ) } + min={ 2 } + max={ 4 } + required + /> + </PanelBody> + </InspectorControls> + <div className={ `${ className } align${ width } columns-${ columns }` }> + { times( columns, ( index ) => { + return ( + <div className="wp-block-column" key={ `column-${ index }` }> + <RichText + tagName="p" + value={ get( content, [ index, 'children' ] ) } + onChange={ ( nextContent ) => { + setAttributes( { + content: [ + ...content.slice( 0, index ), + { children: nextContent }, + ...content.slice( index + 1 ), + ], + } ); + } } + placeholder={ __( 'New Column' ) } + /> + </div> + ); + } ) } + </div> + </Fragment> + ); +} diff --git a/packages/block-library/src/text-columns/index.js b/packages/block-library/src/text-columns/index.js index 6ec2e8b977109..ce56b9d5bef2f 100644 --- a/packages/block-library/src/text-columns/index.js +++ b/packages/block-library/src/text-columns/index.js @@ -8,15 +8,12 @@ import { get, times } from 'lodash'; */ import { createBlock } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; -import { PanelBody, RangeControl } from '@wordpress/components'; -import { Fragment } from '@wordpress/element'; -import { - BlockControls, - BlockAlignmentToolbar, - InspectorControls, - RichText, -} from '@wordpress/block-editor'; -import deprecated from '@wordpress/deprecated'; +import { RichText } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import edit from './edit'; /** * Internal dependencies @@ -70,60 +67,7 @@ export const settings = { } }, - edit: ( ( { attributes, setAttributes, className } ) => { - const { width, content, columns } = attributes; - - deprecated( 'The Text Columns block', { - alternative: 'the Columns block', - plugin: 'Gutenberg', - } ); - - return ( - <Fragment> - <BlockControls> - <BlockAlignmentToolbar - value={ width } - onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) } - controls={ [ 'center', 'wide', 'full' ] } - /> - </BlockControls> - <InspectorControls> - <PanelBody> - <RangeControl - label={ __( 'Columns' ) } - value={ columns } - onChange={ ( value ) => setAttributes( { columns: value } ) } - min={ 2 } - max={ 4 } - required - /> - </PanelBody> - </InspectorControls> - <div className={ `${ className } align${ width } columns-${ columns }` }> - { times( columns, ( index ) => { - return ( - <div className="wp-block-column" key={ `column-${ index }` }> - <RichText - tagName="p" - value={ get( content, [ index, 'children' ] ) } - onChange={ ( nextContent ) => { - setAttributes( { - content: [ - ...content.slice( 0, index ), - { children: nextContent }, - ...content.slice( index + 1 ), - ], - } ); - } } - placeholder={ __( 'New Column' ) } - /> - </div> - ); - } ) } - </div> - </Fragment> - ); - } ), + edit, save( { attributes } ) { const { width, content, columns } = attributes; diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js new file mode 100644 index 0000000000000..972b3c222b90e --- /dev/null +++ b/packages/block-library/src/verse/edit.js @@ -0,0 +1,40 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { + RichText, + BlockControls, + AlignmentToolbar, +} from '@wordpress/block-editor'; + +export default function VerseEdit( { attributes, setAttributes, className, mergeBlocks } ) { + const { textAlign, content } = attributes; + + return ( + <Fragment> + <BlockControls> + <AlignmentToolbar + value={ textAlign } + onChange={ ( nextAlign ) => { + setAttributes( { textAlign: nextAlign } ); + } } + /> + </BlockControls> + <RichText + tagName="pre" + value={ content } + onChange={ ( nextContent ) => { + setAttributes( { + content: nextContent, + } ); + } } + style={ { textAlign } } + placeholder={ __( 'Write…' ) } + wrapperClassName={ className } + onMerge={ mergeBlocks } + /> + </Fragment> + ); +} diff --git a/packages/block-library/src/verse/icon.js b/packages/block-library/src/verse/icon.js new file mode 100644 index 0000000000000..4e665bdaa68e0 --- /dev/null +++ b/packages/block-library/src/verse/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M21 11.01L3 11V13H21V11.01ZM3 16H17V18H3V16ZM15 6H3V8.01L15 8V6Z" /></SVG> +); diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js index ab5434192877e..87c9a019d5399 100644 --- a/packages/block-library/src/verse/index.js +++ b/packages/block-library/src/verse/index.js @@ -2,14 +2,14 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; -import { - RichText, - BlockControls, - AlignmentToolbar, -} from '@wordpress/block-editor'; -import { SVG, Path } from '@wordpress/components'; +import { RichText } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; export const name = 'core/verse'; @@ -18,7 +18,7 @@ export const settings = { description: __( 'Insert poetry. Use special spacing formats. Or quote song lyrics.' ), - icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M21 11.01L3 11V13H21V11.01ZM3 16H17V18H3V16ZM15 6H3V8.01L15 8V6Z" /></SVG>, + icon, category: 'formatting', @@ -55,35 +55,7 @@ export const settings = { ], }, - edit( { attributes, setAttributes, className, mergeBlocks } ) { - const { textAlign, content } = attributes; - - return ( - <Fragment> - <BlockControls> - <AlignmentToolbar - value={ textAlign } - onChange={ ( nextAlign ) => { - setAttributes( { textAlign: nextAlign } ); - } } - /> - </BlockControls> - <RichText - tagName="pre" - value={ content } - onChange={ ( nextContent ) => { - setAttributes( { - content: nextContent, - } ); - } } - style={ { textAlign } } - placeholder={ __( 'Write…' ) } - wrapperClassName={ className } - onMerge={ mergeBlocks } - /> - </Fragment> - ); - }, + edit, save( { attributes } ) { const { textAlign, content } = attributes;