diff --git a/blocks/library/index.js b/blocks/library/index.js index 3402384178f1ec..9ae6e3c160ecbe 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 00000000000000..cfb71794a55be1 --- /dev/null +++ b/blocks/library/quote/index.js @@ -0,0 +1,66 @@ +/** + * Internal dependencies + */ +import './style.scss'; +import { registerBlock, query as hpq } from 'api'; +import Editable from 'components/editable'; + +const { parse, html, query } = hpq; + +const fromValueToParagraphs = ( value ) => value.map( ( paragraph ) => `

${ paragraph }

` ).join( '' ); +const fromParagraphsToValue = ( paragraphs ) => parse( paragraphs, query( 'p', html() ) ); + +registerBlock( 'core/quote', { + title: wp.i18n.__( 'Quote' ), + icon: 'format-quote', + category: 'common', + + attributes: { + value: query( 'blockquote > p', html() ), + citation: html( 'footer' ) + }, + + edit( { attributes, setAttributes } ) { + const { value, citation } = attributes; + + return ( +
+ setAttributes( { + value: fromParagraphsToValue( paragraphs ) + } ) + } /> + +
+ ); + }, + + save( attributes ) { + const { value, citation } = attributes; + + return ( +
+ { value.map( ( paragraph, i ) => ( +

+ ) ) } +

+ ); + } +} ); diff --git a/blocks/library/quote/style.scss b/blocks/library/quote/style.scss new file mode 100644 index 00000000000000..78880c2b0d8aa1 --- /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; + + &:before { + content: '— '; + position: absolute; + left: -1.3em; + top: 0; + } + } +} diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 5430e7ec22659f..5a6dce40b5ee78 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -38,6 +38,10 @@ msgstr "" msgid "Justify" msgstr "" +#: blocks/library/quote/index.js:14 +msgid "Quote" +msgstr "" + #: blocks/library/text/index.js:10 msgid "Text" msgstr ""