From 1e8c93e937ac6a50a77eecfae43ea8b769fa5012 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 14 Jul 2020 18:31:50 -0400 Subject: [PATCH 01/12] add text align --- .../block-library/src/post-excerpt/block.json | 11 ++- .../block-library/src/post-excerpt/edit.js | 78 ++++++++++++------- .../block-library/src/post-excerpt/index.php | 9 ++- 3 files changed, 69 insertions(+), 29 deletions(-) diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index c94a5f8d2175f..1dfad5f634c26 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 @@ -18,6 +21,12 @@ "postId" ], "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 49a370c488b62..35b2a87031659 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -1,9 +1,19 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { useEntityProp, useEntityId } 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'; @@ -26,7 +36,7 @@ function usePostContentExcerpt( wordCount ) { } function PostExcerptEditor( { - attributes: { wordCount, moreText, showMoreOnNewLine }, + attributes: { align, wordCount, moreText, showMoreOnNewLine }, setAttributes, isSelected, } ) { @@ -38,6 +48,14 @@ function PostExcerptEditor( { const postContentExcerpt = usePostContentExcerpt( wordCount ); return ( <> + + + setAttributes( { align: newAlign } ) + } + /> + { ! excerpt && ( @@ -62,19 +80,36 @@ function PostExcerptEditor( { /> - - { ! showMoreOnNewLine && ' ' } - { showMoreOnNewLine ? ( -

+

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

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

+ ) : ( -

- ) : ( - - setAttributes( { moreText: newMoreText } ) - } - /> - ) } + ) } +
); } diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index fe1a62c1fa4ab..48ef0cde64e89 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 . '

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

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

' . '
'; } remove_filter( From 1af97c833048944bd5949c5bc4a24df79fdc53bb Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 14 Jul 2020 18:56:11 -0400 Subject: [PATCH 02/12] add wrapper and line-height inherit --- packages/block-library/src/post-excerpt/edit.js | 2 +- packages/block-library/src/post-excerpt/index.php | 4 ++-- packages/block-library/src/post-excerpt/style.scss | 6 ++++++ packages/block-library/src/style.scss | 1 + 4 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 packages/block-library/src/post-excerpt/style.scss diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 35b2a87031659..c1a3241ca2898 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -99,7 +99,7 @@ function PostExcerptEditor( { /> { ! showMoreOnNewLine && ' ' } { showMoreOnNewLine ? ( -

+

', esc_attr( $classes) ) . '

' . get_the_excerpt( $block->context['postId'] ); + $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 . '

' . '
'; } 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 0000000000000..1c14b85d54dde --- /dev/null +++ b/packages/block-library/src/post-excerpt/style.scss @@ -0,0 +1,6 @@ +.wp-block-post-excerpt { + .wp-block-post-excerpt__excerpt, + .wp-block-post-excerpt__more-text { + line-height: inherit; + } +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 605843d78d665..9550ae321299f 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 From 691c73f35030621c20b6cb30c16f0e227e402cc1 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 14 Jul 2020 19:10:09 -0400 Subject: [PATCH 03/12] php format --- packages/block-library/src/post-excerpt/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index cbcbc47151f32..403346f5ef87a 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -29,11 +29,11 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { ); $classes = 'wp-block-post-excerpt'; - if( isset($attributes['align']) ) { + if ( isset( $attributes['align'] ) ) { $classes .= ' has-text-align-' . $attributes['align']; } - $output = sprintf('
', esc_attr( $classes) ) . '

' . get_the_excerpt( $block->context['postId'] ); + $output = sprintf( '

', esc_attr( $classes ) ) . '

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

' . '

' . $more_text . '

'; } else { From 2311564734a8f9bacdd1c51e0482424fec439fcb Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 15 Jul 2020 13:10:18 -0400 Subject: [PATCH 04/12] get this working in site editor? --- .../block-library/src/post-excerpt/block.json | 3 +- .../block-library/src/post-excerpt/edit.js | 30 ++++++++++++------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index 1dfad5f634c26..392c9cf20e5b0 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/packages/block-library/src/post-excerpt/block.json @@ -18,7 +18,8 @@ } }, "usesContext": [ - "postId" + "postId", + "postType" ], "supports": { "html": false, diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index c1a3241ca2898..a87bf7cae6d21 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -6,7 +6,7 @@ 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 { AlignmentToolbar, @@ -17,11 +17,12 @@ import { 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 ) { @@ -39,13 +40,19 @@ function PostExcerptEditor( { 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 ( <> @@ -128,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' ); + // } return ( ); } From c4770413c7cee12086358a52022dfd3b902aeb11 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 15 Jul 2020 18:30:01 -0400 Subject: [PATCH 05/12] set initial readMore, get rid of extra parent component --- .../block-library/src/post-excerpt/edit.js | 37 +++++++------------ 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index a87bf7cae6d21..7966f494a0df1 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useEntityProp } from '@wordpress/core-data'; -import { useMemo } from '@wordpress/element'; +import { useMemo, useEffect } from '@wordpress/element'; import { AlignmentToolbar, BlockControls, @@ -36,12 +36,19 @@ function usePostContentExcerpt( wordCount, postId, postType ) { }, [ rawPostContent, wordCount ] ); } -function PostExcerptEditor( { +export default function PostExcerptEdit( { attributes: { align, wordCount, moreText, showMoreOnNewLine }, setAttributes, isSelected, context: { postId, postType }, } ) { + // Set the initial moreText based on local. + useEffect( () => { + if ( moreText === null || moreText === undefined ) { + setAttributes( { moreText: __( 'Read more…' ) } ); + } + }, [] ); + const [ excerpt, setExcerpt ] = useEntityProp( 'postType', postType, @@ -99,7 +106,11 @@ function PostExcerptEditor( { } placeholder={ postContentExcerpt } value={ - excerpt || ( isSelected ? '' : postContentExcerpt ) + excerpt || + ( isSelected + ? '' + : postContentExcerpt || + __( 'No post excerpt found' ) ) } onChange={ setExcerpt } keepPlaceholderOnFocus @@ -130,23 +141,3 @@ function PostExcerptEditor( { ); } - -export default function PostExcerptEdit( { - attributes, - setAttributes, - isSelected, - context, -} ) { - // This check doesn't work in site editor? always false. - // if ( ! useEntityId( 'postType', 'post' ) ) { - // return __( 'Post Excerpt' ); - // } - return ( - - ); -} From 55357ca651bdef5fb7cab75de3d7d9658bcc4ab2 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 15 Jul 2020 19:49:08 -0400 Subject: [PATCH 06/12] styles to ensure link color is shown --- packages/block-library/src/post-excerpt/editor.scss | 13 +++++++++++-- packages/block-library/src/post-excerpt/style.scss | 4 ++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-excerpt/editor.scss b/packages/block-library/src/post-excerpt/editor.scss index 8d36110746aef..439ea2002ee6c 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/style.scss b/packages/block-library/src/post-excerpt/style.scss index 1c14b85d54dde..27b21db7b212c 100644 --- a/packages/block-library/src/post-excerpt/style.scss +++ b/packages/block-library/src/post-excerpt/style.scss @@ -4,3 +4,7 @@ line-height: inherit; } } + +.wp-block-post-excerpt.has-link-color a { + color: var(--wp--style--color--link) !important; +} From a62b280836f1f903c71b5e0367a49083abbc9d1a Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 15 Jul 2020 19:59:11 -0400 Subject: [PATCH 07/12] no elipsis --- packages/block-library/src/post-excerpt/edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 7966f494a0df1..c633c16f5b9c8 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -45,7 +45,8 @@ export default function PostExcerptEdit( { // Set the initial moreText based on local. useEffect( () => { if ( moreText === null || moreText === undefined ) { - setAttributes( { moreText: __( 'Read more…' ) } ); + // eslint-disable-next-line @wordpress/i18n-ellipsis + setAttributes( { moreText: __( 'Read more...' ) } ); } }, [] ); From 29f30d559c5994a607930001e03938dcbd4ce295 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 15 Jul 2020 20:09:36 -0400 Subject: [PATCH 08/12] dont initialize for now /shrug --- packages/block-library/src/post-excerpt/edit.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index c633c16f5b9c8..5d56157923a1a 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useEntityProp } from '@wordpress/core-data'; -import { useMemo, useEffect } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import { AlignmentToolbar, BlockControls, @@ -42,14 +42,6 @@ export default function PostExcerptEdit( { isSelected, context: { postId, postType }, } ) { - // Set the initial moreText based on local. - useEffect( () => { - if ( moreText === null || moreText === undefined ) { - // eslint-disable-next-line @wordpress/i18n-ellipsis - setAttributes( { moreText: __( 'Read more...' ) } ); - } - }, [] ); - const [ excerpt, setExcerpt ] = useEntityProp( 'postType', postType, From 404fe649074abcc7fa52f476ae8cf41183111655 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 16 Jul 2020 13:32:38 -0400 Subject: [PATCH 09/12] add custom warning if no post found in context --- .../block-library/src/post-excerpt/edit.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 5d56157923a1a..bdde9941a123e 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -13,6 +13,7 @@ import { BlockControls, InspectorControls, RichText, + Warning, } from '@wordpress/block-editor'; import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -36,7 +37,7 @@ function usePostContentExcerpt( wordCount, postId, postType ) { }, [ rawPostContent, wordCount ] ); } -export default function PostExcerptEdit( { +function PostExcerptEditor( { attributes: { align, wordCount, moreText, showMoreOnNewLine }, setAttributes, isSelected, @@ -134,3 +135,24 @@ export default function PostExcerptEdit( { ); } + +export default function PostExcerptEdit( { + attributes, + setAttributes, + isSelected, + context, +} ) { + if ( ! context.postType || ! context.postId ) { + return ( + { __( 'Post excerpt block: no post found.' ) } + ); + } + return ( + + ); +} From 1c32d9bed7493a01c4dedc385345970b6160633f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 16 Jul 2020 14:08:35 -0400 Subject: [PATCH 10/12] more simple error fix --- .../block-library/src/post-excerpt/edit.js | 28 +++---------------- 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index bdde9941a123e..621357a3ce130 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -13,18 +13,19 @@ import { BlockControls, InspectorControls, RichText, - Warning, } from '@wordpress/block-editor'; import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; function usePostContentExcerpt( wordCount, postId, postType ) { - const [ , , { raw: rawPostContent } ] = useEntityProp( + // Don't destrcuture items from content here, it can be undefined. + const [ , , content ] = useEntityProp( 'postType', postType, 'content', postId ); + const rawPostContent = content?.raw; return useMemo( () => { if ( ! rawPostContent ) { return ''; @@ -37,7 +38,7 @@ function usePostContentExcerpt( wordCount, postId, postType ) { }, [ rawPostContent, wordCount ] ); } -function PostExcerptEditor( { +export default function PostExcerptEdit( { attributes: { align, wordCount, moreText, showMoreOnNewLine }, setAttributes, isSelected, @@ -135,24 +136,3 @@ function PostExcerptEditor( { ); } - -export default function PostExcerptEdit( { - attributes, - setAttributes, - isSelected, - context, -} ) { - if ( ! context.postType || ! context.postId ) { - return ( - { __( 'Post excerpt block: no post found.' ) } - ); - } - return ( - - ); -} From 58219749b864a5dbb28d6facc8c96ed624ec5d62 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 16 Jul 2020 14:12:22 -0400 Subject: [PATCH 11/12] actually we need this warning... otherwise user can edit what cannot be dirtied/saved --- .../block-library/src/post-excerpt/edit.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 621357a3ce130..8877297b20bd4 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -13,6 +13,7 @@ import { BlockControls, InspectorControls, RichText, + Warning, } from '@wordpress/block-editor'; import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -38,7 +39,7 @@ function usePostContentExcerpt( wordCount, postId, postType ) { }, [ rawPostContent, wordCount ] ); } -export default function PostExcerptEdit( { +function PostExcerptEditor( { attributes: { align, wordCount, moreText, showMoreOnNewLine }, setAttributes, isSelected, @@ -136,3 +137,24 @@ export default function PostExcerptEdit( { ); } + +export default function PostExcerptEdit( { + attributes, + setAttributes, + isSelected, + context, +} ) { + if ( ! context.postType || ! context.postId ) { + return ( + { __( 'Post excerpt block: no post found.' ) } + ); + } + return ( + + ); +} From b0a3cf8ed9943534de5404e9bcd921cc138e3ad3 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 20 Jul 2020 12:15:45 -0400 Subject: [PATCH 12/12] get rid of important --- packages/block-library/src/post-excerpt/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-excerpt/style.scss b/packages/block-library/src/post-excerpt/style.scss index 27b21db7b212c..4200447754ec0 100644 --- a/packages/block-library/src/post-excerpt/style.scss +++ b/packages/block-library/src/post-excerpt/style.scss @@ -5,6 +5,7 @@ } } -.wp-block-post-excerpt.has-link-color a { - color: var(--wp--style--color--link) !important; +.wp-block-post-excerpt.has-link-color a, +.wp-block-post-excerpt.has-background.has-link-color a { + color: var(--wp--style--color--link); }