diff --git a/blocks/library/index.js b/blocks/library/index.js index 2076db1f9dc5ad..e87daedbc06731 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -23,3 +23,4 @@ import './video'; import './audio'; import './block'; import './paragraph'; +import './subhead'; diff --git a/blocks/library/subhead/editor.scss b/blocks/library/subhead/editor.scss new file mode 100644 index 00000000000000..019eb618cd4e7a --- /dev/null +++ b/blocks/library/subhead/editor.scss @@ -0,0 +1,6 @@ +// Overwrite .editor-visual-editor p +.editor-visual-editor p.wp-block-subhead { + color: $dark-gray-300; + font-size: 1.1em; + font-style: italic; +} diff --git a/blocks/library/subhead/index.js b/blocks/library/subhead/index.js new file mode 100644 index 00000000000000..af9f7878276236 --- /dev/null +++ b/blocks/library/subhead/index.js @@ -0,0 +1,91 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import './editor.scss'; +import './style.scss'; +import { registerBlockType, createBlock } from '../../api'; +import Editable from '../../editable'; +import InspectorControls from '../../inspector-controls'; +import BlockDescription from '../../block-description'; + +registerBlockType( 'core/subhead', { + title: __( 'Subhead' ), + + icon: 'text', + + category: 'common', + + useOnce: true, + + attributes: { + content: { + type: 'array', + source: 'children', + selector: 'p', + }, + }, + + transforms: { + from: [ + { + type: 'block', + blocks: [ 'core/paragraph' ], + transform: ( { content } ) => { + return createBlock( 'core/subhead', { + content, + } ); + }, + }, + ], + to: [ + { + type: 'block', + blocks: [ 'core/paragraph' ], + transform: ( { content } ) => { + return createBlock( 'core/paragraph', { + content, + } ); + }, + }, + ], + }, + + edit( { attributes, setAttributes, focus, setFocus, className } ) { + const { content, placeholder } = attributes; + + return [ + focus && ( + + +

{ __( 'Explanatory text under the main heading of an article.' ) }

+
+
+ ), + { + setAttributes( { + content: nextContent, + } ); + } } + focus={ focus } + onFocus={ setFocus } + className={ className } + placeholder={ placeholder || __( 'Write subhead…' ) } + />, + ]; + }, + + save( { attributes, className } ) { + const { content } = attributes; + + return

{ content }

; + }, +} ); diff --git a/blocks/library/subhead/style.scss b/blocks/library/subhead/style.scss new file mode 100644 index 00000000000000..6e6f48e6bf8272 --- /dev/null +++ b/blocks/library/subhead/style.scss @@ -0,0 +1,5 @@ +p.wp-block-subhead { + font-size: 1.1em; + font-style: italic; + opacity: 0.75; +} diff --git a/blocks/test/fixtures/core__subhead.html b/blocks/test/fixtures/core__subhead.html new file mode 100644 index 00000000000000..61cf93189617ec --- /dev/null +++ b/blocks/test/fixtures/core__subhead.html @@ -0,0 +1,3 @@ + +

This is a subhead.

+ diff --git a/blocks/test/fixtures/core__subhead.json b/blocks/test/fixtures/core__subhead.json new file mode 100644 index 00000000000000..20e5037001563c --- /dev/null +++ b/blocks/test/fixtures/core__subhead.json @@ -0,0 +1,18 @@ +[ + { + "uid": "_uid_0", + "name": "core/subhead", + "isValid": true, + "attributes": { + "content": [ + "This is a ", + { + "type": "em", + "children": "subhead" + }, + "." + ] + }, + "originalContent": "

This is a subhead.

" + } +] diff --git a/blocks/test/fixtures/core__subhead.parsed.json b/blocks/test/fixtures/core__subhead.parsed.json new file mode 100644 index 00000000000000..a36ff7083edec0 --- /dev/null +++ b/blocks/test/fixtures/core__subhead.parsed.json @@ -0,0 +1,11 @@ +[ + { + "blockName": "core/subhead", + "attrs": null,"innerBlocks": [], + "innerHTML": "\n

This is a subhead.

\n" + }, + { + "attrs": {}, + "innerHTML": "\n" + } +] diff --git a/blocks/test/fixtures/core__subhead.serialized.html b/blocks/test/fixtures/core__subhead.serialized.html new file mode 100644 index 00000000000000..23468192081a0c --- /dev/null +++ b/blocks/test/fixtures/core__subhead.serialized.html @@ -0,0 +1,3 @@ + +

This is a subhead.

+