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

Pullquote: use inline rich text instead of multiline #43210

Merged
merged 3 commits into from
Aug 22, 2022
Merged

Pullquote: use inline rich text instead of multiline #43210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c33cfc0
Pullquote: use inline rich text instead of multiline
ellatrix Aug 13, 2022
d773277
Fix deprecations
ellatrix Aug 14, 2022
d1fed2e
Fix e2e snapshot
ellatrix Aug 14, 2022
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
3 changes: 1 addition & 2 deletions packages/block-library/src/pullquote/block.json
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@
"value": { "value": {
"type": "string", "type": "string",
"source": "html", "source": "html",
"selector": "blockquote", "selector": "p",
"multiline": "p",
"__experimentalRole": "content" "__experimentalRole": "content"
}, },
"citation": { "citation": {
Expand Down
148 changes: 113 additions & 35 deletions packages/block-library/src/pullquote/deprecated.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ import {
useBlockProps, useBlockProps,
} from '@wordpress/block-editor'; } from '@wordpress/block-editor';
import { select } from '@wordpress/data'; import { select } from '@wordpress/data';
import {
create,
replace,
toHTMLString,
__UNSTABLE_LINE_SEPARATOR,
} from '@wordpress/rich-text';


/** /**
* Internal dependencies * Internal dependencies
Expand Down Expand Up @@ -58,9 +64,68 @@ function parseBorderColor( styleString ) {
} }
} }


function multilineToInline( value ) {
return toHTMLString( {
value: replace(
create( { html: value, multilineTag: 'p' } ),
new RegExp( __UNSTABLE_LINE_SEPARATOR, 'g' ),
'\n'
),
} );
}

const v5 = {
attributes: {
value: {
type: 'string',
source: 'html',
selector: 'blockquote',
multiline: 'p',
__experimentalRole: 'content',
},
citation: {
type: 'string',
source: 'html',
selector: 'cite',
default: '',
__experimentalRole: 'content',
},
textAlign: {
type: 'string',
},
},
save( { attributes } ) {
const { textAlign, citation, value } = attributes;
const shouldShowCitation = ! RichText.isEmpty( citation );

return (
<figure
{ ...useBlockProps.save( {
className: classnames( {
[ `has-text-align-${ textAlign }` ]: textAlign,
} ),
} ) }
>
<blockquote>
<RichText.Content value={ value } multiline />
{ shouldShowCitation && (
<RichText.Content tagName="cite" value={ citation } />
) }
</blockquote>
</figure>
);
},
migrate( { value, ...attributes } ) {
return {
value: multilineToInline( value ),
...attributes,
};
},
};

// TODO: this is ripe for a bit of a clean up according to the example in https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/#example // TODO: this is ripe for a bit of a clean up according to the example in https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/#example
const deprecated = [
{ const v4 = {
attributes: { attributes: {
...blockAttributes, ...blockAttributes,
}, },
Expand Down Expand Up @@ -92,9 +157,7 @@ const deprecated = [
} ); } );


figureStyles = { figureStyles = {
backgroundColor: backgroundClass backgroundColor: backgroundClass ? undefined : customMainColor,
? undefined
: customMainColor,
}; };
// Is normal style and a custom color is being used ( we can set a style directly with its value) // Is normal style and a custom color is being used ( we can set a style directly with its value)
} else if ( customMainColor ) { } else if ( customMainColor ) {
Expand Down Expand Up @@ -129,16 +192,14 @@ const deprecated = [
> >
<RichText.Content value={ value } multiline /> <RichText.Content value={ value } multiline />
{ ! RichText.isEmpty( citation ) && ( { ! RichText.isEmpty( citation ) && (
<RichText.Content <RichText.Content tagName="cite" value={ citation } />
tagName="cite"
value={ citation }
/>
) } ) }
</blockquote> </blockquote>
</figure> </figure>
); );
}, },
migrate( { migrate( {
value,
className, className,
mainColor, mainColor,
customMainColor, customMainColor,
Expand Down Expand Up @@ -175,6 +236,7 @@ const deprecated = [
} }


return { return {
value: multilineToInline( value ),
className, className,
backgroundColor: isSolidColorStyle ? mainColor : undefined, backgroundColor: isSolidColorStyle ? mainColor : undefined,
borderColor: isSolidColorStyle ? undefined : mainColor, borderColor: isSolidColorStyle ? undefined : mainColor,
Expand All @@ -183,8 +245,9 @@ const deprecated = [
...attributes, ...attributes,
}; };
}, },
}, };
{
const v3 = {
attributes: { attributes: {
...blockAttributes, ...blockAttributes,
// figureStyle is an attribute that never existed. // figureStyle is an attribute that never existed.
Expand Down Expand Up @@ -224,9 +287,7 @@ const deprecated = [
} ); } );


figureStyles = { figureStyles = {
backgroundColor: backgroundClass backgroundColor: backgroundClass ? undefined : customMainColor,
? undefined
: customMainColor,
}; };
// Is normal style and a custom color is being used ( we can set a style directly with its value) // Is normal style and a custom color is being used ( we can set a style directly with its value)
} else if ( customMainColor ) { } else if ( customMainColor ) {
Expand Down Expand Up @@ -269,16 +330,14 @@ const deprecated = [
> >
<RichText.Content value={ value } multiline /> <RichText.Content value={ value } multiline />
{ ! RichText.isEmpty( citation ) && ( { ! RichText.isEmpty( citation ) && (
<RichText.Content <RichText.Content tagName="cite" value={ citation } />
tagName="cite"
value={ citation }
/>
) } ) }
</blockquote> </blockquote>
</figure> </figure>
); );
}, },
migrate( { migrate( {
value,
className, className,
figureStyle, figureStyle,
mainColor, mainColor,
Expand Down Expand Up @@ -321,6 +380,7 @@ const deprecated = [
const borderColor = parseBorderColor( figureStyle ); const borderColor = parseBorderColor( figureStyle );
if ( borderColor ) { if ( borderColor ) {
return { return {
value: multilineToInline( value ),
...attributes, ...attributes,
className, className,
// Block supports: Set style.border.color if a deprecated block has `mainColor`, inline border CSS and is not a solid color style. // Block supports: Set style.border.color if a deprecated block has `mainColor`, inline border CSS and is not a solid color style.
Expand All @@ -333,6 +393,7 @@ const deprecated = [
} }
} }
return { return {
value: multilineToInline( value ),
className, className,
backgroundColor: isSolidColorStyle ? mainColor : undefined, backgroundColor: isSolidColorStyle ? mainColor : undefined,
borderColor: isSolidColorStyle ? undefined : mainColor, borderColor: isSolidColorStyle ? undefined : mainColor,
Expand All @@ -341,8 +402,9 @@ const deprecated = [
...attributes, ...attributes,
}; };
}, },
}, };
{
const v2 = {
attributes: blockAttributes, attributes: blockAttributes,
save( { attributes } ) { save( { attributes } ) {
const { const {
Expand All @@ -359,10 +421,7 @@ const deprecated = [
let figureClass, figureStyles; let figureClass, figureStyles;
// Is solid color style // Is solid color style
if ( isSolidColorStyle ) { if ( isSolidColorStyle ) {
figureClass = getColorClassName( figureClass = getColorClassName( 'background-color', mainColor );
'background-color',
mainColor
);
if ( ! figureClass ) { if ( ! figureClass ) {
figureStyles = { figureStyles = {
backgroundColor: customMainColor, backgroundColor: customMainColor,
Expand Down Expand Up @@ -397,8 +456,7 @@ const deprecated = [
const blockquoteClasses = const blockquoteClasses =
textColor || customTextColor textColor || customTextColor
? classnames( 'has-text-color', { ? classnames( 'has-text-color', {
[ blockquoteTextColorClass ]: [ blockquoteTextColorClass ]: blockquoteTextColorClass,
blockquoteTextColorClass,
} ) } )
: undefined; : undefined;
const blockquoteStyle = blockquoteTextColorClass const blockquoteStyle = blockquoteTextColorClass
Expand All @@ -412,16 +470,14 @@ const deprecated = [
> >
<RichText.Content value={ value } multiline /> <RichText.Content value={ value } multiline />
{ ! RichText.isEmpty( citation ) && ( { ! RichText.isEmpty( citation ) && (
<RichText.Content <RichText.Content tagName="cite" value={ citation } />
tagName="cite"
value={ citation }
/>
) } ) }
</blockquote> </blockquote>
</figure> </figure>
); );
}, },
migrate( { migrate( {
value,
className, className,
mainColor, mainColor,
customMainColor, customMainColor,
Expand Down Expand Up @@ -458,6 +514,7 @@ const deprecated = [
} }


return { return {
value: multilineToInline( value ),
className, className,
backgroundColor: isSolidColorStyle ? mainColor : undefined, backgroundColor: isSolidColorStyle ? mainColor : undefined,
borderColor: isSolidColorStyle ? undefined : mainColor, borderColor: isSolidColorStyle ? undefined : mainColor,
Expand All @@ -466,8 +523,9 @@ const deprecated = [
...attributes, ...attributes,
}; };
}, },
}, };
{
const v1 = {
attributes: { attributes: {
...blockAttributes, ...blockAttributes,
}, },
Expand All @@ -482,8 +540,15 @@ const deprecated = [
</blockquote> </blockquote>
); );
}, },
migrate( { value, ...attributes } ) {
return {
value: multilineToInline( value ),
...attributes,
};
}, },
{ };

const v0 = {
attributes: { attributes: {
...blockAttributes, ...blockAttributes,
citation: { citation: {
Expand All @@ -509,7 +574,20 @@ const deprecated = [
</blockquote> </blockquote>
); );
}, },
migrate( { value, ...attributes } ) {
return {
value: multilineToInline( value ),
...attributes,
};
}, },
]; };


export default deprecated; /**
* New deprecations need to be placed first
* for them to have higher priority.
*
* Old deprecations may need to be updated as well.
*
* See block-deprecation.md
*/
export default [ v5, v4, v3, v2, v1, v0 ];
2 changes: 1 addition & 1 deletion packages/block-library/src/pullquote/edit.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function PullQuoteEdit( {
<BlockQuote> <BlockQuote>
<RichText <RichText
identifier="value" identifier="value"
multiline tagName="p"
value={ value } value={ value }
onChange={ ( nextValue ) => onChange={ ( nextValue ) =>
setAttributes( { setAttributes( {
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/pullquote/edit.native.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ function PullQuoteEdit( props ) {
<BlockQuote textColor={ getTextColor( props ) }> <BlockQuote textColor={ getTextColor( props ) }>
<RichText <RichText
identifier="value" identifier="value"
multiline
value={ value } value={ value }
onChange={ ( nextValue ) => onChange={ ( nextValue ) =>
setAttributes( { setAttributes( {
Expand Down
4 changes: 1 addition & 3 deletions packages/block-library/src/pullquote/index.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -22,12 +22,10 @@ export const settings = {
example: { example: {
attributes: { attributes: {
value: value:
'<p>' +
// translators: Quote serving as example for the Pullquote block. Attributed to Matt Mullenweg. // translators: Quote serving as example for the Pullquote block. Attributed to Matt Mullenweg.
__( __(
'One of the hardest things to do in technology is disrupt yourself.' 'One of the hardest things to do in technology is disrupt yourself.'
) + ),
'</p>',
citation: __( 'Matt Mullenweg' ), citation: __( 'Matt Mullenweg' ),
}, },
}, },
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/pullquote/save.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function save( { attributes } ) {
} ) } } ) }
> >
<blockquote> <blockquote>
<RichText.Content value={ value } multiline /> <RichText.Content tagName="p" value={ value } />
{ shouldShowCitation && ( { shouldShowCitation && (
<RichText.Content tagName="cite" value={ citation } /> <RichText.Content tagName="cite" value={ citation } />
) } ) }
Expand Down
Loading