Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quote block: Wrap cite with footer #11695

Closed
wants to merge 1 commit into from
Closed

Quote block: Wrap cite with footer #11695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/quote/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.wp-block-quote {
margin: 0;

&__citation {
footer {
font-size: $default-font-size;
}
}
35 changes: 33 additions & 2 deletions packages/block-library/src/quote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const blockAttributes = {
[ ATTRIBUTE_CITATION ]: {
type: 'string',
source: 'html',
selector: 'cite',
selector: 'footer cite',
default: '',
},
align: {
Expand Down Expand Up @@ -264,6 +264,8 @@ export const settings = {
// translators: placeholder text used for the citation
__( 'Write citation…' )
}
tagName="footer"
// Class left for compatibility with theme editor styles targeting older version of block that did not use footer element.
className="wp-block-quote__citation"
/>
) }
Expand All @@ -278,7 +280,9 @@ export const settings = {
return (
<blockquote style={ { textAlign: align ? align : null } }>
<RichText.Content multiline value={ value } />
{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
{ ! RichText.isEmpty( citation ) && (
<footer><RichText.Content tagName="cite" value={ citation } /></footer>
) }
</blockquote>
);
},
Expand All @@ -302,6 +306,33 @@ export const settings = {
{
attributes: {
...blockAttributes,
citation: {
type: 'string',
source: 'html',
selector: 'cite',
default: '',
},
},
save( { attributes } ) {
const { align, value, citation } = attributes;

return (
<blockquote style={ { textAlign: align ? align : null } }>
<RichText.Content multiline value={ value } />
{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
</blockquote>
);
},
},
{
attributes: {
...blockAttributes,
citation: {
type: 'string',
source: 'html',
selector: 'cite',
default: '',
},
style: {
type: 'number',
default: 1,
Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/quote/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
line-height: 1.6;
}

cite,
// The p + cite selector is for compatibility with older versions of the block that did not use
// footer. It has to be this specific in order to not target cite elements within the quoted
// paragraphs (or other quoted content if the block is updated to use nesting).
p + cite,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for reference, the text-align property has no net effect on the citation on the front-end in master, and it still has no effect in this branch, since text-align has no apparent effect on inline elements. This back-compat selector is mainly just for the font-size, though that is relatively minor.

Since the font size could be considered unimportant, I would be happy to remove this back-compat selector if desired.

footer {
font-size: 18px;
text-align: right;
Expand Down
8 changes: 4 additions & 4 deletions packages/block-library/src/quote/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.wp-block-quote {
margin: 20px 0;

cite,
footer,
&__citation {
footer {
color: $dark-gray-300;
font-size: $default-font-size;
margin-top: 1em;
position: relative;
font-style: normal;
cite {
font-style: normal;
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/blocks/__snapshots__/quote.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`Quote can be converted to headings 1`] = `
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class=\\"wp-block-quote\\"><p>two</p><cite>cite</cite></blockquote>
<blockquote class=\\"wp-block-quote\\"><p>two</p><footer><cite>cite</cite></footer></blockquote>
<!-- /wp:quote -->"
`;

Expand All @@ -26,7 +26,7 @@ exports[`Quote can be converted to headings 2`] = `
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class=\\"wp-block-quote\\"><p></p><cite>cite</cite></blockquote>
<blockquote class=\\"wp-block-quote\\"><p></p><footer><cite>cite</cite></footer></blockquote>
<!-- /wp:quote -->"
`;

Expand Down
2 changes: 1 addition & 1 deletion post-content.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
<!-- wp:quote {"style":1} -->
<blockquote class="wp-block-quote">
<p><?php _e( 'The editor will endeavor 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.', 'gutenberg' ); ?></p>
<cite><?php _e( 'Matt Mullenweg, 2017', 'gutenberg' ); ?></cite>
<footer><cite><?php _e( 'Matt Mullenweg, 2017', 'gutenberg' ); ?></cite></footer>
</blockquote>
<!-- /wp:quote -->

Expand Down
8 changes: 4 additions & 4 deletions test/integration/blocks-raw-handling.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ describe( 'Blocks raw handling', () => {
mode: 'AUTO',
} ).map( getBlockContent ).join( '' );

expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p>chicken</p><cite>ribs</cite></blockquote>' );
expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p>chicken</p><footer><cite>ribs</cite></footer></blockquote>' );
expect( console ).toHaveLogged();
} );

Expand All @@ -157,7 +157,7 @@ describe( 'Blocks raw handling', () => {
mode: 'AUTO',
} ).map( getBlockContent ).join( '' );

expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p>ribs</p><cite>ribs</cite></blockquote>' );
expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p>ribs</p><footer><cite>ribs</cite></footer></blockquote>' );
expect( console ).toHaveLogged();
} );

Expand All @@ -167,7 +167,7 @@ describe( 'Blocks raw handling', () => {
mode: 'AUTO',
} ).map( getBlockContent ).join( '' );

expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p>chicken</p><p>ribs</p><cite>ribs</cite></blockquote>' );
expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p>chicken</p><p>ribs</p><footer><cite>ribs</cite></footer></blockquote>' );
expect( console ).toHaveLogged();
} );

Expand All @@ -177,7 +177,7 @@ describe( 'Blocks raw handling', () => {
mode: 'AUTO',
} ).map( getBlockContent ).join( '' );

expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p></p><cite>ribs</cite></blockquote>' );
expect( filtered ).toBe( '<blockquote class="wp-block-quote"><p></p><footer><cite>ribs</cite></footer></blockquote>' );
expect( console ).toHaveLogged();
} );

Expand Down
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__quote__style-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:core/quote -->
<blockquote class="wp-block-quote"><p>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.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
<blockquote class="wp-block-quote"><p>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.</p><footer><cite>Matt Mullenweg, 2017</cite></footer></blockquote>
<!-- /wp:core/quote -->
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__quote__style-1.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
"citation": "Matt Mullenweg, 2017"
},
"innerBlocks": [],
"originalContent": "<blockquote class=\"wp-block-quote\"><p>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.</p><cite>Matt Mullenweg, 2017</cite></blockquote>"
"originalContent": "<blockquote class=\"wp-block-quote\"><p>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.</p><footer><cite>Matt Mullenweg, 2017</cite></footer></blockquote>"
}
]
4 changes: 2 additions & 2 deletions test/integration/full-content/fixtures/core__quote__style-1.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
"blockName": "core/quote",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n<blockquote class=\"wp-block-quote\"><p>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.</p><cite>Matt Mullenweg, 2017</cite></blockquote>\n",
"innerHTML": "\n<blockquote class=\"wp-block-quote\"><p>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.</p><footer><cite>Matt Mullenweg, 2017</cite></footer></blockquote>\n",
"innerContent": [
"\n<blockquote class=\"wp-block-quote\"><p>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.</p><cite>Matt Mullenweg, 2017</cite></blockquote>\n"
"\n<blockquote class=\"wp-block-quote\"><p>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.</p><footer><cite>Matt Mullenweg, 2017</cite></footer></blockquote>\n"
]
},
{
Expand Down
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__quote__style-1.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>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.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
<blockquote class="wp-block-quote"><p>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.</p><footer><cite>Matt Mullenweg, 2017</cite></footer></blockquote>
<!-- /wp:quote -->
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__quote__style-2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:core/quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
<blockquote class="wp-block-quote is-style-large"><p>There is no greater agony than bearing an untold story inside you.</p><footer><cite>Maya Angelou</cite></footer></blockquote>
<!-- /wp:core/quote -->
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__quote__style-2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
"className": "is-style-large"
},
"innerBlocks": [],
"originalContent": "<blockquote class=\"wp-block-quote is-style-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>"
"originalContent": "<blockquote class=\"wp-block-quote is-style-large\"><p>There is no greater agony than bearing an untold story inside you.</p><footer><cite>Maya Angelou</cite></footer></blockquote>"
}
]
4 changes: 2 additions & 2 deletions test/integration/full-content/fixtures/core__quote__style-2.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
"className": "is-style-large"
},
"innerBlocks": [],
"innerHTML": "\n<blockquote class=\"wp-block-quote is-style-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>\n",
"innerHTML": "\n<blockquote class=\"wp-block-quote is-style-large\"><p>There is no greater agony than bearing an untold story inside you.</p><footer><cite>Maya Angelou</cite></footer></blockquote>\n",
"innerContent": [
"\n<blockquote class=\"wp-block-quote is-style-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>\n"
"\n<blockquote class=\"wp-block-quote is-style-large\"><p>There is no greater agony than bearing an untold story inside you.</p><footer><cite>Maya Angelou</cite></footer></blockquote>\n"
]
},
{
Expand Down
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__quote__style-2.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
<blockquote class="wp-block-quote is-style-large"><p>There is no greater agony than bearing an untold story inside you.</p><footer><cite>Maya Angelou</cite></footer></blockquote>
<!-- /wp:quote -->