diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index c94a5f8d2175fa..392c9cf20e5b0a 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/packages/block-library/src/post-excerpt/block.json @@ -2,6 +2,9 @@ "name": "core/post-excerpt", "category": "design", "attributes": { + "align": { + "type": "string" + }, "wordCount": { "type": "number", "default": 55 @@ -15,9 +18,16 @@ } }, "usesContext": [ - "postId" + "postId", + "postType" ], "supports": { - "html": false + "html": false, + "__experimentalFontSize": true, + "__experimentalColor": { + "gradients": true, + "linkColor": true + }, + "__experimentalLineHeight": true } } diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 49a370c488b628..8877297b20bd44 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -1,18 +1,32 @@ +/** + * 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, + Warning, +} from '@wordpress/block-editor'; import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -function usePostContentExcerpt( wordCount ) { - const [ , , { raw: rawPostContent } ] = useEntityProp( +function usePostContentExcerpt( wordCount, postId, postType ) { + // Don't destrcuture items from content here, it can be undefined. + const [ , , content ] = useEntityProp( 'postType', - 'post', - 'content' + postType, + 'content', + postId ); + const rawPostContent = content?.raw; return useMemo( () => { if ( ! rawPostContent ) { return ''; @@ -26,18 +40,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 ( <> + + + setAttributes( { align: newAlign } ) + } + /> + { ! excerpt && ( @@ -62,19 +90,40 @@ function PostExcerptEditor( { /> - - { ! showMoreOnNewLine && ' ' } - { showMoreOnNewLine ? ( -

+

+ + { ! showMoreOnNewLine && ' ' } + { showMoreOnNewLine ? ( +

+ + setAttributes( { moreText: newMoreText } ) + } + /> +

+ ) : ( -

- ) : ( - - setAttributes( { moreText: newMoreText } ) - } - /> - ) } + ) } +
); } @@ -102,15 +142,19 @@ export default function PostExcerptEdit( { attributes, setAttributes, isSelected, + context, } ) { - if ( ! useEntityId( 'postType', 'post' ) ) { - return __( 'Post Excerpt' ); + if ( ! context.postType || ! context.postId ) { + return ( + { __( 'Post excerpt block: no post found.' ) } + ); } return ( ); } diff --git a/packages/block-library/src/post-excerpt/editor.scss b/packages/block-library/src/post-excerpt/editor.scss index 8d36110746aef4..439ea2002ee6ca 100644 --- a/packages/block-library/src/post-excerpt/editor.scss +++ b/packages/block-library/src/post-excerpt/editor.scss @@ -1,3 +1,12 @@ -.wp-block-post-excerpt__excerpt.is-inline { - display: inline-block; +.wp-block-post-excerpt { + + .wp-block-post-excerpt__excerpt.is-inline { + display: inline-block; + } + + +} + +.wp-block[data-type="core/post-excerpt"].has-link-color .wp-block-post-excerpt a { + color: var(--wp--style--color--link); } diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index fe1a62c1fa4ab3..403346f5ef87a6 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -28,11 +28,16 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { $filter_excerpt_length ); - $output = '

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

', esc_attr( $classes ) ) . '

' . get_the_excerpt( $block->context['postId'] ); if ( ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'] ) { - $output .= '

' . '

' . $more_text . '

'; + $output .= '

' . '

' . $more_text . '

'; } else { - $output .= ' ' . $more_text . '

'; + $output .= ' ' . $more_text . '

' . '
'; } remove_filter( diff --git a/packages/block-library/src/post-excerpt/style.scss b/packages/block-library/src/post-excerpt/style.scss new file mode 100644 index 00000000000000..4200447754ec07 --- /dev/null +++ b/packages/block-library/src/post-excerpt/style.scss @@ -0,0 +1,11 @@ +.wp-block-post-excerpt { + .wp-block-post-excerpt__excerpt, + .wp-block-post-excerpt__more-text { + line-height: inherit; + } +} + +.wp-block-post-excerpt.has-link-color a, +.wp-block-post-excerpt.has-background.has-link-color a { + color: var(--wp--style--color--link); +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 605843d78d6650..9550ae321299ff 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -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