diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index c5c5023a54f7aa..9f75be46ebe6e5 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -1,6 +1,7 @@ @import './variables'; @import '../../inserter/style'; @import '../../editor/style'; +@import '../../blocks/quote/style'; body.toplevel_page_gutenberg { background: #fff; diff --git a/editor/blocks/index.js b/editor/blocks/index.js index 7319406b858f04..2142b28978ba12 100644 --- a/editor/blocks/index.js +++ b/editor/blocks/index.js @@ -1 +1,2 @@ import './text'; +import './quote'; diff --git a/editor/blocks/quote/index.js b/editor/blocks/quote/index.js new file mode 100644 index 00000000000000..715c8586c62412 --- /dev/null +++ b/editor/blocks/quote/index.js @@ -0,0 +1,42 @@ +const Editable = wp.blocks.Editable; +const { html } = wp.blocks.query; + +wp.blocks.registerBlock( 'core/quote', { + title: 'Quote', + icon: 'format-quote', + category: 'common', + + attributes: { + value: html( 'blockquote > p' ), + citation: html( 'footer' ) + }, + + edit( attributes, onChange ) { + const { value, citation } = attributes; + + return ( +
+ onChange( { value: newValue } ) } /> + +
+ ); + }, + + save( attributes ) { + const { value, citation } = attributes; + return ( +
+ { value } + +
+ ); + } +} ); diff --git a/editor/blocks/quote/style.scss b/editor/blocks/quote/style.scss new file mode 100644 index 00000000000000..c655ba8699b571 --- /dev/null +++ b/editor/blocks/quote/style.scss @@ -0,0 +1,24 @@ +#editor blockquote { + margin: 2em; + box-shadow: inset 0px 0px 0px 0px #e0e5e9; + transition: all .2s ease; + font-size: 20px; + border-left: 4px solid black; + padding-left: 1em; + font-style: italic; +} + +#editor blockquote footer { + color: #86909b; + font-size: 0.9em; + font-style: normal; + margin-left: 1.3em; + position: relative; +} + +#editor blockquote footer:after { + content: '— '; + position: absolute; + left: -1.3em; + top: 0; +}