diff --git a/blocks/library/index.js b/blocks/library/index.js index 3402384178f1e..9ae6e3c160ecb 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -2,3 +2,4 @@ import './freeform'; import './image'; import './text'; import './list'; +import './quote'; diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js new file mode 100644 index 0000000000000..ae78e477b1e9b --- /dev/null +++ b/blocks/library/quote/index.js @@ -0,0 +1,50 @@ +/** + * Internal dependencies + */ +import './style.scss'; +import { registerBlock, query as hpq } from 'api'; +import Editable from 'components/editable'; + +const { html, query } = hpq; + +registerBlock( 'core/quote', { + title: wp.i18n.__( 'Quote' ), + icon: 'format-quote', + category: 'common', + + attributes: { + value: ( node ) => query( 'blockquote > p', html() )( node ).join(), + citation: html( 'footer' ) + }, + + edit( { attributes, setAttributes } ) { + const { value, citation } = attributes; + + return ( +
+ setAttributes( { value: newValue } ) } /> + +
+ ); + }, + + save( attributes ) { + const { value, citation } = attributes; + return ( +
+ { value } + { !! citation && + + } +
+ ); + } +} ); diff --git a/blocks/library/quote/style.scss b/blocks/library/quote/style.scss new file mode 100644 index 0000000000000..bbf126ca75a4f --- /dev/null +++ b/blocks/library/quote/style.scss @@ -0,0 +1,24 @@ +.blocks-quote { + margin: 0; + box-shadow: inset 0px 0px 0px 0px $light-gray-500; + transition: all .2s ease; + font-size: 20px; + border-left: 4px solid $black; + padding-left: 1em; + font-style: italic; + + footer { + color: $dark-gray-100; + font-size: 0.9em; + font-style: normal; + margin-left: 1.3em; + position: relative; + + &:after { + content: '— '; + position: absolute; + left: -1.3em; + top: 0; + } + } +} diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 5430e7ec22659..aa60d2221378a 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -38,6 +38,10 @@ msgstr "" msgid "Justify" msgstr "" +#: blocks/library/quote/index.js:11 +msgid "Quote" +msgstr "" + #: blocks/library/text/index.js:10 msgid "Text" msgstr ""