diff --git a/blocks/library/index.js b/blocks/library/index.js index 9a0e2eaa95540c..655e7ab40dd43b 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -7,3 +7,4 @@ import './list'; import './quote'; import './separator'; import './button'; +import './pullquote'; diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js new file mode 100644 index 00000000000000..be5900827f5af4 --- /dev/null +++ b/blocks/library/pullquote/index.js @@ -0,0 +1,70 @@ +/** + * Internal dependencies + */ +import './style.scss'; +import { registerBlock, query as hpq } from 'api'; +import Editable from 'components/editable'; + +const { children, query } = hpq; + +registerBlock( 'core/pullquote', { + title: wp.i18n.__( 'Pullquote' ), + icon: 'format-quote', + category: 'common', + + attributes: { + value: query( 'blockquote > p', children() ), + citation: children( 'footer' ), + }, + + edit( { attributes, setAttributes, focus, setFocus } ) { + const { value, citation } = attributes; + + return ( +
++ ); + }, + + save( { attributes } ) { + const { value, citation } = attributes; + + return ( +setAttributes( { + value: nextValue + } ) + } + focus={ focus && focus.editable === 'value' ? focus : null } + onFocus={ () => setFocus( { editable: 'value' } ) } + /> + { ( citation || !! focus ) && ( + + ) } +
+ { value && value.map( ( paragraph, i ) => ( ++ ); + } +} ); diff --git a/blocks/library/pullquote/style.scss b/blocks/library/pullquote/style.scss new file mode 100644 index 00000000000000..476b0d38fe7561 --- /dev/null +++ b/blocks/library/pullquote/style.scss @@ -0,0 +1,23 @@ +.blocks-pullquote { + color: $light-gray-900; + padding: 2em; + text-align: center; + + footer { + color: $dark-gray-900; + position: relative; + } + + footer p { + font-size: 16px; + font-family: $default-font; + } +} + +.editor-visual-editor .blocks-pullquote { + & > .blocks-editable p { + font-family: $default-font; + font-size: 48px; + font-weight: 900; + } +}{ paragraph }
+ ) ) } + + { citation && citation.length > 0 && ( + + ) } +