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

Jump to bottom

Add aside wrapper to pullquote #9599

Merged
merged 5 commits into from
Sep 12, 2018
Merged

Add aside wrapper to pullquote #9599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
67afd73
Add aside wrapper to pullquote
Sep 4, 2018
fd89ccf
Figure.
Sep 4, 2018
fb5b435
Fix for frontend.
jasmussen Sep 4, 2018
04afef1
Added deprecation artifacts
jorgefilipecosta Sep 10, 2018
fc1eac0
Updated test fixtures
jorgefilipecosta Sep 10, 2018
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
4 changes: 2 additions & 2 deletions packages/block-library/src/pullquote/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
transform: translateX(-50%);
}

& > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
& > .editor-rich-text p {
& blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
& blockquote > .editor-rich-text p {
font-size: 24px;
line-height: 1.6;
}
Expand Down
69 changes: 43 additions & 26 deletions packages/block-library/src/pullquote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,48 +55,65 @@ export const settings = {
const { value, citation } = attributes;

return (
<blockquote className={ className }>
<RichText
multiline="p"
value={ toRichTextValue( value ) }
onChange={
( nextValue ) => setAttributes( {
value: fromRichTextValue( nextValue ),
} )
}
/* translators: the text of the quotation */
placeholder={ __( 'Write quote…' ) }
wrapperClassName="block-library-pullquote__content"
/>
{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
<figure className={ className }>
<blockquote>
<RichText
value={ citation }
/* translators: the individual or entity quoted */
placeholder={ __( 'Write citation…' ) }
multiline="p"
value={ toRichTextValue( value ) }
onChange={
( nextCitation ) => setAttributes( {
citation: nextCitation,
( nextValue ) => setAttributes( {
value: fromRichTextValue( nextValue ),
} )
}
className="wp-block-pullquote__citation"
/* translators: the text of the quotation */
placeholder={ __( 'Write quote…' ) }
wrapperClassName="block-library-pullquote__content"
/>
) }
</blockquote>
{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
<RichText
value={ citation }
/* translators: the individual or entity quoted */
placeholder={ __( 'Write citation…' ) }
onChange={
( nextCitation ) => setAttributes( {
citation: nextCitation,
} )
}
className="wp-block-pullquote__citation"
/>
) }
</blockquote>
</figure>
);
},

save( { attributes } ) {
const { value, citation } = attributes;

return (
<blockquote>
<RichText.Content value={ toRichTextValue( value ) } />
{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
</blockquote>
<figure>
<blockquote>
<RichText.Content value={ toRichTextValue( value ) } />
{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
</blockquote>
</figure>
);
},

deprecated: [ {
attributes: {
...blockAttributes,
Copy link
Member

Choose a reason for hiding this comment

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

Minor: Spread operator is not necessary here (and has a small performance cost), vs. just assigning directly as attributes: blockAttributes

Copy link
Member

Choose a reason for hiding this comment

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

If the blockAttributes variable was just called attributes, you could make it even shorter:
attributes,

},
save( { attributes } ) {
const { value, citation } = attributes;
return (
<blockquote>
<RichText.Content value={ toRichTextValue( value ) } />
{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
</blockquote>
);
},
}, {
attributes: {
...blockAttributes,
citation: {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/pullquote/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@

&.alignleft,
&.alignright {
max-width: 400px;
max-width: $content-width / 2;

> p {
p {
font-size: 20px;
}
}

> p {
p {
font-size: 24px;
line-height: 1.6;
}
Expand Down
50 changes: 26 additions & 24 deletions packages/block-library/src/pullquote/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`core/pullquote block edit matches snapshot 1`] = `
<blockquote
<figure
class="wp-block-pullquote"
>
<div
class="block-library-pullquote__content editor-rich-text"
>
<div>
<blockquote>
<div
class="block-library-pullquote__content editor-rich-text"
>
<div>
<div
class="components-autocomplete"
>
<div>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-label="Write quote…"
aria-multiline="true"
class="editor-rich-text__tinymce"
contenteditable="true"
data-is-placeholder-visible="true"
role="textbox"
/>
<div
class="editor-rich-text__tinymce"
class="components-autocomplete"
>
<p>
Write quote…
</p>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-label="Write quote…"
aria-multiline="true"
class="editor-rich-text__tinymce"
contenteditable="true"
data-is-placeholder-visible="true"
role="textbox"
/>
<div
class="editor-rich-text__tinymce"
>
<p>
Write quote…
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</blockquote>
</blockquote>
</figure>
`;
8 changes: 5 additions & 3 deletions test/integration/full-content/fixtures/core__pullquote.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!-- wp:core/pullquote -->
<blockquote class="wp-block-pullquote">
<p>Testing pullquote block...</p><cite>...with a caption</cite>
</blockquote>
<figure class="wp-block-pullquote">
<blockquote>
<p>Testing pullquote block...</p><cite>...with a caption</cite>
</blockquote>
</figure>
<!-- /wp:core/pullquote -->
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__pullquote.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@
]
},
"innerBlocks": [],
"originalContent": "<blockquote class=\"wp-block-pullquote\">\n<p>Testing pullquote block...</p><cite>...with a caption</cite>\n</blockquote>"
"originalContent": "<figure class=\"wp-block-pullquote\">\n <blockquote>\n <p>Testing pullquote block...</p><cite>...with a caption</cite>\n </blockquote>\n</figure>"
}
]
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__pullquote.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"blockName": "core/pullquote",
"attrs": null,
"innerBlocks": [],
"innerHTML": "\n<blockquote class=\"wp-block-pullquote\">\n<p>Testing pullquote block...</p><cite>...with a caption</cite>\n</blockquote>\n"
"innerHTML": "\n<figure class=\"wp-block-pullquote\">\n <blockquote>\n <p>Testing pullquote block...</p><cite>...with a caption</cite>\n </blockquote>\n</figure>\n"
},
{
"attrs": {},
Expand Down
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__pullquote.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:pullquote -->
<blockquote class="wp-block-pullquote"><p>Testing pullquote block...</p><cite>...with a caption</cite></blockquote>
<figure class="wp-block-pullquote"><blockquote><p>Testing pullquote block...</p><cite>...with a caption</cite></blockquote></figure>
<!-- /wp:pullquote -->
12 changes: 7 additions & 5 deletions test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<!-- wp:core/pullquote -->
<blockquote class="wp-block-pullquote">
<p>Paragraph <strong>one</strong></p>
<p>Paragraph two</p>
<cite>by whomever</cite>
</blockquote>
<figure class="wp-block-pullquote">
<blockquote>
<p>Paragraph <strong>one</strong></p>
<p>Paragraph two</p>
<cite>by whomever</cite>
</blockquote>
</figure>
<!-- /wp:core/pullquote -->
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,6 @@
]
},
"innerBlocks": [],
"originalContent": "<blockquote class=\"wp-block-pullquote\">\n <p>Paragraph <strong>one</strong></p>\n <p>Paragraph two</p>\n <cite>by whomever</cite>\n</blockquote>"
"originalContent": "<figure class=\"wp-block-pullquote\">\n <blockquote>\n <p>Paragraph <strong>one</strong></p>\n <p>Paragraph two</p>\n <cite>by whomever</cite>\n\t</blockquote>\n</figure>"
}
]
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"blockName": "core/pullquote",
"attrs": null,
"innerBlocks": [],
"innerHTML": "\n<blockquote class=\"wp-block-pullquote\">\n <p>Paragraph <strong>one</strong></p>\n <p>Paragraph two</p>\n <cite>by whomever</cite>\n</blockquote>\n"
"innerHTML": "\n<figure class=\"wp-block-pullquote\">\n <blockquote>\n <p>Paragraph <strong>one</strong></p>\n <p>Paragraph two</p>\n <cite>by whomever</cite>\n\t</blockquote>\n</figure>\n"
},
{
"attrs": {},
Expand Down
2 changes: 1 addition & 1 deletion test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:pullquote -->
<blockquote class="wp-block-pullquote"><p>Paragraph <strong>one</strong></p><p>Paragraph two</p><cite>by whomever</cite></blockquote>
<figure class="wp-block-pullquote"><blockquote><p>Paragraph <strong>one</strong></p><p>Paragraph two</p><cite>by whomever</cite></blockquote></figure>
<!-- /wp:pullquote -->