From fcf98252b310e2d46f0eef5949d51eda81fa7860 Mon Sep 17 00:00:00 2001 From: Zebulan Stanphill Date: Mon, 10 Sep 2018 21:52:53 -0500 Subject: [PATCH] Wrap cite with footer in quote and pullquote blocks --- .../block-library/src/pullquote/editor.scss | 2 +- packages/block-library/src/pullquote/index.js | 71 +++++++++++++------ .../block-library/src/pullquote/style.scss | 1 - .../block-library/src/pullquote/theme.scss | 4 +- packages/block-library/src/quote/editor.scss | 2 +- packages/block-library/src/quote/index.js | 31 +++++++- packages/block-library/src/quote/style.scss | 1 - packages/block-library/src/quote/theme.scss | 4 +- .../fixtures/core__pullquote.html | 3 +- .../fixtures/core__pullquote.json | 2 +- .../fixtures/core__pullquote.parsed.json | 2 +- .../fixtures/core__pullquote.serialized.html | 2 +- .../core__pullquote__multi-paragraph.html | 4 +- .../core__pullquote__multi-paragraph.json | 2 +- ...re__pullquote__multi-paragraph.parsed.json | 2 +- ...pullquote__multi-paragraph.serialized.html | 2 +- .../fixtures/core__quote__style-1.html | 2 +- .../fixtures/core__quote__style-1.json | 2 +- .../fixtures/core__quote__style-1.parsed.json | 2 +- .../core__quote__style-1.serialized.html | 2 +- .../fixtures/core__quote__style-2.html | 2 +- .../fixtures/core__quote__style-2.json | 2 +- .../fixtures/core__quote__style-2.parsed.json | 2 +- .../core__quote__style-2.serialized.html | 2 +- 24 files changed, 100 insertions(+), 51 deletions(-) diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss index b2fc97541bda9..40b690079cae2 100644 --- a/packages/block-library/src/pullquote/editor.scss +++ b/packages/block-library/src/pullquote/editor.scss @@ -9,7 +9,7 @@ } .wp-block-pullquote { - cite .editor-rich-text__tinymce[data-is-empty="true"]::before { + footer .editor-rich-text__tinymce[data-is-empty="true"]::before { font-size: 14px; font-family: $default-font; } diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js index 539308618793d..fee8dd78cd371 100644 --- a/packages/block-library/src/pullquote/index.js +++ b/packages/block-library/src/pullquote/index.js @@ -29,7 +29,7 @@ const blockAttributes = { citation: { type: 'array', source: 'children', - selector: 'cite', + selector: 'footer cite', }, }; @@ -70,6 +70,7 @@ export const settings = { /> { ( ! RichText.isEmpty( citation ) || isSelected ) && ( ) } @@ -91,34 +91,61 @@ export const settings = { return (
- { ! RichText.isEmpty( citation ) && } + { ! RichText.isEmpty( citation ) && ( +
+ +
+ ) }
); }, - deprecated: [ { - attributes: { - ...blockAttributes, - citation: { - type: 'array', - source: 'children', - selector: 'footer', + deprecated: [ + { + attributes: { + ...blockAttributes, + citation: { + type: 'array', + source: 'children', + selector: 'footer', + }, + align: { + type: 'string', + default: 'none', + }, }, - align: { - type: 'string', - default: 'none', + + save( { attributes } ) { + const { value, citation, align } = attributes; + + return ( +
+ + { ! RichText.isEmpty( citation ) && } +
+ ); }, }, + { + attributes: { + ...blockAttributes, + citation: { + type: 'array', + source: 'children', + selector: 'cite', + }, + }, - save( { attributes } ) { - const { value, citation, align } = attributes; + save( { attributes } ) { + const { value, citation } = attributes; - return ( -
- - { ! RichText.isEmpty( citation ) && } -
- ); + return ( +
+ + { ! RichText.isEmpty( citation ) && } +
+ ); + }, }, - } ], + ], }; diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss index 2467adff4e543..e96b597abc172 100644 --- a/packages/block-library/src/pullquote/style.scss +++ b/packages/block-library/src/pullquote/style.scss @@ -16,7 +16,6 @@ line-height: 1.6; } - cite, footer { position: relative; } diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 178d8b0fd2763..ab64c05a3da64 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -3,9 +3,7 @@ border-bottom: 4px solid $dark-gray-500; color: $dark-gray-600; - cite, - footer, - &__citation { + footer { color: $dark-gray-600; text-transform: uppercase; font-size: $default-font-size; diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss index 3826e0a998b3e..fcddde33f04b8 100644 --- a/packages/block-library/src/quote/editor.scss +++ b/packages/block-library/src/quote/editor.scss @@ -1,7 +1,7 @@ .wp-block-quote { margin: 0; - &__citation { + footer { font-size: $default-font-size; } } diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index fa20247122dd4..34d50aa929b2e 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -35,7 +35,7 @@ const blockAttributes = { citation: { type: 'array', source: 'children', - selector: 'cite', + selector: 'footer cite', }, align: { type: 'string', @@ -205,6 +205,7 @@ export const settings = { /> { ( ! RichText.isEmpty( citation ) || isSelected ) && ( setAttributes( { @@ -213,7 +214,6 @@ export const settings = { } /* translators: the individual or entity quoted */ placeholder={ __( 'Write citation…' ) } - className="wp-block-quote__citation" /> ) } @@ -227,7 +227,11 @@ export const settings = { return (
- { ! RichText.isEmpty( citation ) && } + { ! RichText.isEmpty( citation ) && ( +
+ +
+ ) }
); }, @@ -295,5 +299,26 @@ export const settings = { ); }, }, + { + attributes: { + ...blockAttributes, + citation: { + type: 'array', + source: 'children', + selector: 'cite', + }, + }, + + save( { attributes } ) { + const { align, value, citation } = attributes; + + return ( +
+ + { ! RichText.isEmpty( citation ) && } +
+ ); + }, + }, ], }; diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index c1206d68958f7..9b85df9fb9cc1 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -10,7 +10,6 @@ line-height: 1.6; } - cite, footer { font-size: 18px; text-align: right; diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index 8fbe1ef7b3b21..69735be6aa44a 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,9 +1,7 @@ .wp-block-quote { margin: 20px 0; - cite, - footer, - &__citation { + footer { color: $dark-gray-300; font-size: $default-font-size; margin-top: 1em; diff --git a/test/integration/full-content/fixtures/core__pullquote.html b/test/integration/full-content/fixtures/core__pullquote.html index 8c13cedfe000d..98ea0162c593c 100644 --- a/test/integration/full-content/fixtures/core__pullquote.html +++ b/test/integration/full-content/fixtures/core__pullquote.html @@ -1,5 +1,6 @@
-

Testing pullquote block...

...with a caption +

Testing pullquote block...

+
...with a caption
diff --git a/test/integration/full-content/fixtures/core__pullquote.json b/test/integration/full-content/fixtures/core__pullquote.json index 11d576614228c..3d6cf6f2e519f 100644 --- a/test/integration/full-content/fixtures/core__pullquote.json +++ b/test/integration/full-content/fixtures/core__pullquote.json @@ -21,6 +21,6 @@ ] }, "innerBlocks": [], - "originalContent": "
\n

Testing pullquote block...

...with a caption\n
" + "originalContent": "
\n

Testing pullquote block...

\n
...with a caption
\n
" } ] diff --git a/test/integration/full-content/fixtures/core__pullquote.parsed.json b/test/integration/full-content/fixtures/core__pullquote.parsed.json index c8d7f7c3c2dd6..747f7f7b459bf 100644 --- a/test/integration/full-content/fixtures/core__pullquote.parsed.json +++ b/test/integration/full-content/fixtures/core__pullquote.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/pullquote", "attrs": null, "innerBlocks": [], - "innerHTML": "\n
\n

Testing pullquote block...

...with a caption\n
\n" + "innerHTML": "\n
\n

Testing pullquote block...

\n
...with a caption
\n
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__pullquote.serialized.html b/test/integration/full-content/fixtures/core__pullquote.serialized.html index 00f47cf0d5e39..e16f7f588e083 100644 --- a/test/integration/full-content/fixtures/core__pullquote.serialized.html +++ b/test/integration/full-content/fixtures/core__pullquote.serialized.html @@ -1,3 +1,3 @@ -

Testing pullquote block...

...with a caption
+

Testing pullquote block...

...with a caption
diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html index 252b029f1f888..deccea0769e47 100644 --- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html +++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html @@ -2,6 +2,8 @@

Paragraph one

Paragraph two

- by whomever +
+ by whomever +
diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json index 266568fa51bc0..3906e678c7b32 100644 --- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json +++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json @@ -39,6 +39,6 @@ ] }, "innerBlocks": [], - "originalContent": "
\n

Paragraph one

\n

Paragraph two

\n by whomever\n
" + "originalContent": "
\n

Paragraph one

\n

Paragraph two

\n
\n by whomever\n
\n
" } ] diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json index 2a816764b3ae4..7de20dcddde30 100644 --- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json +++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/pullquote", "attrs": null, "innerBlocks": [], - "innerHTML": "\n
\n

Paragraph one

\n

Paragraph two

\n by whomever\n
\n" + "innerHTML": "\n
\n

Paragraph one

\n

Paragraph two

\n
\n by whomever\n
\n
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html index 635df56edcf4f..e677248677b72 100644 --- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html +++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html @@ -1,3 +1,3 @@ -

Paragraph one

Paragraph two

by whomever
+

Paragraph one

Paragraph two

by whomever
diff --git a/test/integration/full-content/fixtures/core__quote__style-1.html b/test/integration/full-content/fixtures/core__quote__style-1.html index 4bfd0ef80e5d4..aa57c1f01f869 100644 --- a/test/integration/full-content/fixtures/core__quote__style-1.html +++ b/test/integration/full-content/fixtures/core__quote__style-1.html @@ -1,3 +1,3 @@ -

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
+

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
diff --git a/test/integration/full-content/fixtures/core__quote__style-1.json b/test/integration/full-content/fixtures/core__quote__style-1.json index 67722f404cd0a..4b481d7f7e0ef 100644 --- a/test/integration/full-content/fixtures/core__quote__style-1.json +++ b/test/integration/full-content/fixtures/core__quote__style-1.json @@ -21,6 +21,6 @@ ] }, "innerBlocks": [], - "originalContent": "

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
" + "originalContent": "

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
" } ] diff --git a/test/integration/full-content/fixtures/core__quote__style-1.parsed.json b/test/integration/full-content/fixtures/core__quote__style-1.parsed.json index 09553fed152db..fdc7f67dde386 100644 --- a/test/integration/full-content/fixtures/core__quote__style-1.parsed.json +++ b/test/integration/full-content/fixtures/core__quote__style-1.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/quote", "attrs": null, "innerBlocks": [], - "innerHTML": "\n

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
\n" + "innerHTML": "\n

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__quote__style-1.serialized.html b/test/integration/full-content/fixtures/core__quote__style-1.serialized.html index 4268c4139854e..516ad89534bc3 100644 --- a/test/integration/full-content/fixtures/core__quote__style-1.serialized.html +++ b/test/integration/full-content/fixtures/core__quote__style-1.serialized.html @@ -1,3 +1,3 @@ -

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
+

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
diff --git a/test/integration/full-content/fixtures/core__quote__style-2.html b/test/integration/full-content/fixtures/core__quote__style-2.html index d4ecdca350df1..46fff5242370d 100644 --- a/test/integration/full-content/fixtures/core__quote__style-2.html +++ b/test/integration/full-content/fixtures/core__quote__style-2.html @@ -1,3 +1,3 @@ -

There is no greater agony than bearing an untold story inside you.

Maya Angelou
+

There is no greater agony than bearing an untold story inside you.

Maya Angelou
diff --git a/test/integration/full-content/fixtures/core__quote__style-2.json b/test/integration/full-content/fixtures/core__quote__style-2.json index ebf72ece86181..caf4b3aed1fc8 100644 --- a/test/integration/full-content/fixtures/core__quote__style-2.json +++ b/test/integration/full-content/fixtures/core__quote__style-2.json @@ -22,6 +22,6 @@ "className": "is-style-large" }, "innerBlocks": [], - "originalContent": "

There is no greater agony than bearing an untold story inside you.

Maya Angelou
" + "originalContent": "

There is no greater agony than bearing an untold story inside you.

Maya Angelou
" } ] diff --git a/test/integration/full-content/fixtures/core__quote__style-2.parsed.json b/test/integration/full-content/fixtures/core__quote__style-2.parsed.json index d1098fffcdf0a..e6cc668c7d4ee 100644 --- a/test/integration/full-content/fixtures/core__quote__style-2.parsed.json +++ b/test/integration/full-content/fixtures/core__quote__style-2.parsed.json @@ -5,7 +5,7 @@ "className": "is-style-large" }, "innerBlocks": [], - "innerHTML": "\n

There is no greater agony than bearing an untold story inside you.

Maya Angelou
\n" + "innerHTML": "\n

There is no greater agony than bearing an untold story inside you.

Maya Angelou
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__quote__style-2.serialized.html b/test/integration/full-content/fixtures/core__quote__style-2.serialized.html index b257de24088e9..a97ba58d12910 100644 --- a/test/integration/full-content/fixtures/core__quote__style-2.serialized.html +++ b/test/integration/full-content/fixtures/core__quote__style-2.serialized.html @@ -1,3 +1,3 @@ -

There is no greater agony than bearing an untold story inside you.

Maya Angelou
+

There is no greater agony than bearing an untold story inside you.

Maya Angelou