Permalink
Browse files

Add subhead block (#2091)

  • Loading branch information...
iseulde committed Jan 19, 2018
1 parent 3568fc4 commit d591e58b7a623ad7825425bc5e001fb140141512
View
@@ -23,3 +23,4 @@ import './video';
import './audio';
import './block';
import './paragraph';
import './subhead';
@@ -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;
}
@@ -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 && (
<InspectorControls key="inspector">
<BlockDescription>
<p>{ __( 'Explanatory text under the main heading of an article.' ) }</p>
</BlockDescription>
</InspectorControls>
),
<Editable
tagName="p"
key="editable"
value={ content }
onChange={ ( nextContent ) => {
setAttributes( {
content: nextContent,
} );
} }
focus={ focus }
onFocus={ setFocus }
className={ className }
placeholder={ placeholder || __( 'Write subhead…' ) }
/>,
];
},
save( { attributes, className } ) {
const { content } = attributes;
return <p className={ className }>{ content }</p>;
},
} );
@@ -0,0 +1,5 @@
p.wp-block-subhead {
font-size: 1.1em;
font-style: italic;
opacity: 0.75;
}
@@ -0,0 +1,3 @@
<!-- wp:core/subhead -->
<p class="wp-block-subhead">This is a <em>subhead</em>.</p>
<!-- /wp:core/subhead -->
@@ -0,0 +1,18 @@
[
{
"uid": "_uid_0",
"name": "core/subhead",
"isValid": true,
"attributes": {
"content": [
"This is a ",
{
"type": "em",
"children": "subhead"
},
"."
]
},
"originalContent": "<p class=\"wp-block-subhead\">This is a <em>subhead</em>.</p>"
}
]
@@ -0,0 +1,11 @@
[
{
"blockName": "core/subhead",
"attrs": null,"innerBlocks": [],
"innerHTML": "\n<p class=\"wp-block-subhead\">This is a <em>subhead</em>.</p>\n"
},
{
"attrs": {},
"innerHTML": "\n"
}
]
@@ -0,0 +1,3 @@
<!-- wp:subhead -->
<p class="wp-block-subhead">This is a <em>subhead</em>.</p>
<!-- /wp:subhead -->

0 comments on commit d591e58

Please sign in to comment.