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

Post excerpt block - add color, fontSize, lineHeight, and text alignment. #23945

Merged
merged 12 commits into from
Jul 20, 2020
Merged

Post excerpt block - add color, fontSize, lineHeight, and text alignment. #23945

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1e8c93e
add text align
Addison-Stavlo Jul 14, 2020
1af97c8
add wrapper and line-height inherit
Addison-Stavlo Jul 14, 2020
691c73f
php format
Addison-Stavlo Jul 14, 2020
2311564
get this working in site editor?
Addison-Stavlo Jul 15, 2020
c477041
set initial readMore, get rid of extra parent component
Addison-Stavlo Jul 15, 2020
55357ca
styles to ensure link color is shown
Addison-Stavlo Jul 15, 2020
a62b280
no elipsis
Addison-Stavlo Jul 15, 2020
29f30d5
dont initialize for now /shrug
Addison-Stavlo Jul 16, 2020
404fe64
add custom warning if no post found in context
Addison-Stavlo Jul 16, 2020
1c32d9b
more simple error fix
Addison-Stavlo Jul 16, 2020
5821974
actually we need this warning... otherwise user can edit what cannot …
Addison-Stavlo Jul 16, 2020
b0a3cf8
get rid of important
Addison-Stavlo Jul 20, 2020
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
14 changes: 12 additions & 2 deletions packages/block-library/src/post-excerpt/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"name": "core/post-excerpt",
"category": "design",
"attributes": {
"align": {
Copy link
Member

Choose a reason for hiding this comment

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

In my opinion, this should most likely not be called align, but rather textAlign. I know align is how the Paragraph block does it, but this is confusing since there is also block alignment, which (if using the supports flag) uses align as its attribute name.

Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo Jul 20, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Agreed, textAlign or alignText would be preferable (I was following the paragraph block's lead at first here). I saw the align support hook is for block alignment as well and noticed the confusion. I wonder how many other blocks have this conflicted naming convention, but we should start updating them.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Or would it be better to similarly update the align hook to be blockAlign or something similar?

If this is more recent than some of the blocks that use align for textAlign, then less people should be effected by the change. That is, Im assuming if we updated the paragraph block's attr name then a user who updates their Gutenberg version will have whatever alignment settings they saved lost?

Copy link
Member

Choose a reason for hiding this comment

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

Is there a compatibility layer for changing a block attribute name? I think there is something for updating a block to a newer version without loosing settings 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is there a compatibility layer for changing a block attribute name? I think there is something for updating a block to a newer version without loosing settings 🤔

That would be good, at the very least for now I will update the FSE blocks that are using align for text alignment to use textAlign

Copy link
Member

Choose a reason for hiding this comment

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

There is indeed a way to easily handle (what would otherwise be backward-incompatible) changes in block attribute schemas:

https://developer.wordpress.org/block-editor/developers/block-api/block-deprecation/

A lot of core blocks already make use this, storing their deprecated versions in a deprecated.js file.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated for the FSE blocks specifically - #24077

"type": "string"
},
"wordCount": {
"type": "number",
"default": 55
Expand All @@ -15,9 +18,16 @@
}
},
"usesContext": [
"postId"
"postId",
"postType"
],
"supports": {
"html": false
"html": false,
"__experimentalFontSize": true,
"__experimentalColor": {
"gradients": true,
"linkColor": true
},
"__experimentalLineHeight": true
}
}
108 changes: 72 additions & 36 deletions packages/block-library/src/post-excerpt/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useEntityProp, useEntityId } from '@wordpress/core-data';
import { useEntityProp } from '@wordpress/core-data';
import { useMemo } from '@wordpress/element';
import { InspectorControls, RichText } from '@wordpress/block-editor';
import {
AlignmentToolbar,
BlockControls,
InspectorControls,
RichText,
} from '@wordpress/block-editor';
import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function usePostContentExcerpt( wordCount ) {
function usePostContentExcerpt( wordCount, postId, postType ) {
const [ , , { raw: rawPostContent } ] = useEntityProp(
'postType',
'post',
'content'
postType,
'content',
postId
);
return useMemo( () => {
if ( ! rawPostContent ) {
Expand All @@ -26,18 +37,32 @@ function usePostContentExcerpt( wordCount ) {
}

function PostExcerptEditor( {
attributes: { wordCount, moreText, showMoreOnNewLine },
attributes: { align, wordCount, moreText, showMoreOnNewLine },
setAttributes,
isSelected,
context: { postId, postType },
} ) {
const [ excerpt, setExcerpt ] = useEntityProp(
'postType',
'post',
'excerpt'
postType,
'excerpt',
postId
);
const postContentExcerpt = usePostContentExcerpt(
wordCount,
postId,
postType
);
const postContentExcerpt = usePostContentExcerpt( wordCount );
return (
<>
<BlockControls>
<AlignmentToolbar
value={ align }
onChange={ ( newAlign ) =>
setAttributes( { align: newAlign } )
}
/>
</BlockControls>
<InspectorControls>
<PanelBody title={ __( 'Post Excerpt Settings' ) }>
{ ! excerpt && (
Expand All @@ -62,19 +87,36 @@ function PostExcerptEditor( {
/>
</PanelBody>
</InspectorControls>
<RichText
className={
! showMoreOnNewLine &&
'wp-block-post-excerpt__excerpt is-inline'
}
placeholder={ postContentExcerpt }
value={ excerpt || ( isSelected ? '' : postContentExcerpt ) }
onChange={ setExcerpt }
keepPlaceholderOnFocus
/>
{ ! showMoreOnNewLine && ' ' }
{ showMoreOnNewLine ? (
<p>
<div
className={ classnames( 'wp-block-post-excerpt', {
[ `has-text-align-${ align }` ]: align,
} ) }
>
<RichText
className={
! showMoreOnNewLine &&
'wp-block-post-excerpt__excerpt is-inline'
}
placeholder={ postContentExcerpt }
value={
excerpt || ( isSelected ? '' : postContentExcerpt )
}
onChange={ setExcerpt }
keepPlaceholderOnFocus
/>
{ ! showMoreOnNewLine && ' ' }
{ showMoreOnNewLine ? (
<p className="wp-block-post-excerpt__more-text">
<RichText
tagName="a"
placeholder={ __( 'Read more…' ) }
value={ moreText }
onChange={ ( newMoreText ) =>
setAttributes( { moreText: newMoreText } )
}
/>
</p>
) : (
<RichText
tagName="a"
placeholder={ __( 'Read more…' ) }
Expand All @@ -83,17 +125,8 @@ function PostExcerptEditor( {
setAttributes( { moreText: newMoreText } )
}
/>
</p>
) : (
<RichText
tagName="a"
placeholder={ __( 'Read more…' ) }
value={ moreText }
onChange={ ( newMoreText ) =>
setAttributes( { moreText: newMoreText } )
}
/>
) }
) }
</div>
</>
);
}
Expand All @@ -102,15 +135,18 @@ export default function PostExcerptEdit( {
attributes,
setAttributes,
isSelected,
context,
} ) {
if ( ! useEntityId( 'postType', 'post' ) ) {
return __( 'Post Excerpt' );
}
// This check doesn't work in site editor? always false.
// if ( ! useEntityId( 'postType', 'post' ) ) {
// return __( 'Post Excerpt' );
// }
Addison-Stavlo marked this conversation as resolved.
Show resolved Hide resolved
return (
<PostExcerptEditor
attributes={ attributes }
setAttributes={ setAttributes }
isSelected={ isSelected }
context={ context }
/>
);
}
11 changes: 8 additions & 3 deletions packages/block-library/src/post-excerpt/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,16 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
$filter_excerpt_length
);

$output = '<p>' . get_the_excerpt( $block->context['postId'] );
$classes = 'wp-block-post-excerpt';
if ( isset( $attributes['align'] ) ) {
$classes .= ' has-text-align-' . $attributes['align'];
}

$output = sprintf( '<div class="%1$s">', esc_attr( $classes ) ) . '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
if ( ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'] ) {
$output .= '</p>' . '<p>' . $more_text . '</p>';
$output .= '</p>' . '<p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';
} else {
$output .= ' ' . $more_text . '</p>';
$output .= ' ' . $more_text . '</p>' . '</div>';
}

remove_filter(
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/post-excerpt/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.wp-block-post-excerpt {
.wp-block-post-excerpt__excerpt,
.wp-block-post-excerpt__more-text {
line-height: inherit;
}
}
1 change: 1 addition & 0 deletions packages/block-library/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
@import "./table/style.scss";
@import "./text-columns/style.scss";
@import "./video/style.scss";
@import "./post-excerpt/style.scss";

// The following selectors have increased specificity (using the :root prefix)
// to assure colors take effect over another base class color, mainly to let
Expand Down