From 0fcbec0105011a1580e1b93bb48eeb66dad78e6e Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 17:04:38 -0400 Subject: [PATCH 01/30] added more font sizes to control --- .../block-library/src/post-author/edit.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index e45932907251f..6615316fce17c 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -28,6 +28,10 @@ function PostAuthorEdit( { isSelected, fontSize, setFontSize, + bylineFontSize, + setBylineFontSize, + bioFontSize, + setBioFontSize, context, attributes, setAttributes, @@ -154,10 +158,21 @@ function PostAuthorEdit( { /> +

{ __( 'Name Size' ) }

+

{ __( 'Bio Size' ) }

+ +

{ __( 'Byline Size' ) }

+ @@ -233,4 +248,8 @@ function PostAuthorEdit( { ); } -export default withFontSizes( 'fontSize' )( PostAuthorEdit ); +export default withFontSizes( + 'fontSize', + 'bylineFontSize', + 'bioFontSize' +)( PostAuthorEdit ); From 9c84c8ba66fc277d6a4060ba707644309bbde131 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 17:13:58 -0400 Subject: [PATCH 02/30] reorg panel bodys --- packages/block-library/src/post-author/edit.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 6615316fce17c..80171594894ef 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -157,18 +157,19 @@ function PostAuthorEdit( { } /> - -

{ __( 'Name Size' ) }

+ -

{ __( 'Bio Size' ) }

+ + -

{ __( 'Byline Size' ) }

+ + Date: Wed, 3 Jun 2020 17:32:32 -0400 Subject: [PATCH 03/30] separated inline styles for editor pieces --- .../block-library/src/post-author/edit.js | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 80171594894ef..f4b60a5f59db9 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -107,9 +107,16 @@ function PostAuthorEdit( { const blockClassNames = classnames( 'wp-block-post-author', { [ fontSize.class ]: fontSize.class, } ); - const blockInlineStyles = { + + const authorInlineStyles = { fontSize: fontSize.size ? fontSize.size + 'px' : undefined, }; + const bioInlineStyles = { + fontSize: bioFontSize.size ? bioFontSize.size + 'px' : undefined, + }; + const bylineInlineStyles = { + fontSize: bylineFontSize.size ? bylineFontSize.size + 'px' : undefined, + }; return ( <> @@ -201,7 +208,6 @@ function PostAuthorEdit( { className={ classnames( blockClassNames, { [ `has-text-align-${ align }` ]: align, } ) } - style={ blockInlineStyles } > { showAvatar && authorDetails && (
@@ -221,23 +227,24 @@ function PostAuthorEdit( { className="wp-block-post-author__byline" multiline={ false } placeholder={ __( 'Write byline …' ) } - withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/strikethrough', - ] } value={ byline } onChange={ ( value ) => setAttributes( { byline: value } ) } + style={ bylineInlineStyles } /> ) } -

+

{ authorDetails?.name }

{ showBio && ( -

+

{ authorDetails?.description }

) } From 521d081a3f24f14e2c56e83360a1caf98ebf4afc Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 17:55:05 -0400 Subject: [PATCH 04/30] added fontSizes to attributes --- packages/block-library/src/post-author/block.json | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 6a59b0fe5f1b3..e3c13f4d9c357 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -28,6 +28,15 @@ }, "customTextColor": { "type": "string" + }, + "fontSize": { + "type": "string" + }, + "bioFontSize": { + "type": "string" + }, + "bylineFontSize": { + "type": "string" } }, "context": [ From c61cd039f5905867c997d69f4d346078938e1dbe Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 18:14:20 -0400 Subject: [PATCH 05/30] added custom sizes to attributes --- packages/block-library/src/post-author/block.json | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index e3c13f4d9c357..bb5d77b29897c 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -32,11 +32,20 @@ "fontSize": { "type": "string" }, + "customFontSize": { + "type": "number" + }, "bioFontSize": { "type": "string" }, + "customBioFontSize": { + "type": "number" + }, "bylineFontSize": { "type": "string" + }, + "customBylineFontSize": { + "type": "number" } }, "context": [ From 03cea3d715888d8227393d560638e7aa847b83f9 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 19:35:14 -0400 Subject: [PATCH 06/30] color parity between front end and editor --- packages/block-library/src/post-author/editor.scss | 1 - packages/block-library/src/post-author/index.php | 6 ------ 2 files changed, 7 deletions(-) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index 65c919a25155c..c45e9b4ff2294 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -5,7 +5,6 @@ } .wp-block-post-author__byline { - color: $dark-gray-300; font-size: $default-font-size; margin-top: 0; position: relative; diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 111926ed1590b..8920012f8b37e 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -40,12 +40,6 @@ function post_author_build_css_colors( $attributes ) { $has_named_background_color = array_key_exists( 'backgroundColor', $attributes ); $has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes ); - // If has background color. - if ( $has_custom_background_color || $has_named_background_color ) { - // Add has-background-color class. - $colors['css_classes'][] = 'has-background-color'; - } - if ( $has_named_background_color ) { // Add the background-color class. $colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); From 5df1635f02ddfe4ece5e600d140dffa66cebc4e6 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 20:34:59 -0400 Subject: [PATCH 07/30] applied font size selections to front end --- .../block-library/src/post-author/index.php | 62 ++++++++++++++++--- 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 8920012f8b37e..240082ea9b552 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -60,7 +60,15 @@ function post_author_build_css_colors( $attributes ) { */ function post_author_build_css_font_sizes( $attributes ) { // CSS classes. - $font_sizes = array( + $name_font_sizes = array( + 'css_classes' => array(), + 'inline_styles' => '', + ); + $bio_font_sizes = array( + 'css_classes' => array(), + 'inline_styles' => '', + ); + $byline_font_sizes = array( 'css_classes' => array(), 'inline_styles' => '', ); @@ -70,13 +78,39 @@ function post_author_build_css_font_sizes( $attributes ) { if ( $has_named_font_size ) { // Add the font size class. - $font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['fontSize'] ); + $name_font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['fontSize'] ); } elseif ( $has_custom_font_size ) { // Add the custom font size inline style. - $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customFontSize'] ); + $name_font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customFontSize'] ); + } + + $has_named_bio_font_size = array_key_exists( 'bioFontSize', $attributes ); + $has_custom_bio_font_size = array_key_exists( 'customBioFontSize', $attributes ); + + if ( $has_named_bio_font_size ) { + // Add the font size class. + $bio_font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['bioFontSize'] ); + } elseif ( $has_custom_bio_font_size ) { + // Add the custom font size inline style. + $bio_font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customBioFontSize'] ); + } + + $has_named_byline_font_size = array_key_exists( 'bylineFontSize', $attributes ); + $has_custom_byline_font_size = array_key_exists( 'customBylineFontSize', $attributes ); + + if ( $has_named_byline_font_size ) { + // Add the font size class. + $byline_font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['bylineFontSize'] ); + } elseif ( $has_custom_byline_font_size ) { + // Add the custom font size inline style. + $byline_font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customBylineFontSize'] ); } - return $font_sizes; + return array( + 'name' => $name_font_sizes, + 'bio' => $bio_font_sizes, + 'byline' => $byline_font_sizes, + ); } /** @@ -107,7 +141,6 @@ function render_block_core_post_author( $attributes, $content, $block ) { $font_sizes = post_author_build_css_font_sizes( $attributes ); $classes = array_merge( $colors['css_classes'], - $font_sizes['css_classes'], array( 'wp-block-post-author' ), isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(), isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(), @@ -115,16 +148,25 @@ function render_block_core_post_author( $attributes, $content, $block ) { ); $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); - $style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] ) - ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) ) + $style_attribute = $colors['inline_styles'] + ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) ) : ''; + $name_class_attribute = sprintf( ' class="wp-block-post-author__name %s"', esc_attr( implode( ' ', $font_sizes['name']['css_classes'] ) ) ); + $name_style_attribute = $font_sizes['name']['inline_styles'] ? sprintf( 'style="%s"', esc_attr( $font_sizes['name']['inline_styles'] ) ) : ''; + + $bio_class_attribute = sprintf( ' class="wp-block-post-author__bio %s"', esc_attr( implode( ' ', $font_sizes['bio']['css_classes'] ) ) ); + $bio_style_attribute = $font_sizes['bio']['inline_styles'] ? sprintf( 'style="%s"', esc_attr( $font_sizes['bio']['inline_styles'] ) ) : ''; + + $byline_class_attribute = sprintf( ' class="wp-block-post-author__byline %s"', esc_attr( implode( ' ', $font_sizes['byline']['css_classes'] ) ) ); + $byline_style_attribute = $font_sizes['byline']['inline_styles'] ? sprintf( 'style="%s"', esc_attr( $font_sizes['byline']['inline_styles'] ) ) : ''; + return sprintf( '
', $class_attribute, $style_attribute ) . ( ! empty( $attributes['showAvatar'] ) ? '
' . $avatar . '
' : '' ) . '
' . - ( ! empty( $byline ) ? '

' . $byline . '

' : '' ) . - '

' . get_the_author_meta( 'display_name', $author_id ) . '

' . - ( ! empty( $attributes['showBio'] ) ? '

' . get_the_author_meta( 'user_description', $author_id ) . '

' : '' ) . + ( ! empty( $byline ) ? sprintf( '

', $byline_class_attribute, $byline_style_attribute ) . $byline . '

' : '' ) . + sprintf( '

', $name_class_attribute, $name_style_attribute ) . get_the_author_meta( 'display_name', $author_id ) . '

' . + ( ! empty( $attributes['showBio'] ) ? sprintf( '

', $bio_class_attribute, $bio_style_attribute ) . get_the_author_meta( 'user_description', $author_id ) . '

' : '' ) . '
' . '
'; } From 136ecc5b254f523e8a1472f6d04bd0c8e852c563 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 20:46:58 -0400 Subject: [PATCH 08/30] formatting? --- packages/block-library/src/post-author/index.php | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 240082ea9b552..e24f12e50c6c3 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -107,8 +107,8 @@ function post_author_build_css_font_sizes( $attributes ) { } return array( - 'name' => $name_font_sizes, - 'bio' => $bio_font_sizes, + 'name' => $name_font_sizes, + 'bio' => $bio_font_sizes, 'byline' => $byline_font_sizes, ); } @@ -148,9 +148,7 @@ function render_block_core_post_author( $attributes, $content, $block ) { ); $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); - $style_attribute = $colors['inline_styles'] - ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) ) - : ''; + $style_attribute = $colors['inline_styles'] ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) ) : ''; $name_class_attribute = sprintf( ' class="wp-block-post-author__name %s"', esc_attr( implode( ' ', $font_sizes['name']['css_classes'] ) ) ); $name_style_attribute = $font_sizes['name']['inline_styles'] ? sprintf( 'style="%s"', esc_attr( $font_sizes['name']['inline_styles'] ) ) : ''; From e2be769b4d143f23e03bf90fab74f66752f6dc28 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 3 Jun 2020 20:54:58 -0400 Subject: [PATCH 09/30] php format --- packages/block-library/src/post-author/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index e24f12e50c6c3..bc5f3581303d5 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -60,11 +60,11 @@ function post_author_build_css_colors( $attributes ) { */ function post_author_build_css_font_sizes( $attributes ) { // CSS classes. - $name_font_sizes = array( + $name_font_sizes = array( 'css_classes' => array(), 'inline_styles' => '', ); - $bio_font_sizes = array( + $bio_font_sizes = array( 'css_classes' => array(), 'inline_styles' => '', ); From 03816723debdeec7ab534ff5e2cc407850c11382 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 12:58:45 -0400 Subject: [PATCH 10/30] only show text size pickers for active fields --- .../block-library/src/post-author/edit.js | 45 +++++++++++-------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index f4b60a5f59db9..614a77725a224 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -164,24 +164,33 @@ function PostAuthorEdit( { } /> - - - - - - - - - + +
+ { ! RichText.isEmpty( byline ) && ( + + + + ) } + + + + + + { showBio && ( + + + + ) } +
{ InspectorControlsColorPanel } From 723e327e38862e6bad1651671131ee232888140b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 13:31:04 -0400 Subject: [PATCH 11/30] add site editor classes for editor styles --- packages/block-library/src/post-author/editor.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index c45e9b4ff2294..78e6a651ca09f 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -1,4 +1,5 @@ -.block-editor__container .wp-block-post-author { +.block-editor__container .wp-block-post-author, +.edit-site-visual-editor .wp-block-post-author { display: flex; flex-wrap: wrap; line-height: 1.5; @@ -16,18 +17,21 @@ flex-basis: 0; } -.block-editor__container .wp-block-post-author__avatar img { +.block-editor__container .wp-block-post-author__avatar img, +.edit-site-visual-editor .wp-block-post-author__avatar img { margin: 0; } -.block-editor__container .wp-block-post-author__name { +.block-editor__container .wp-block-post-author__name, +.edit-site-visual-editor .wp-block-post-author__name { margin: 0; margin-top: -$grid-unit-20/2; margin-bottom: -$grid-unit-20/2; font-weight: bold; } -.block-editor__container .wp-block-post-author__bio { +.block-editor__container .wp-block-post-author__bio, +.edit-site-visual-editor .wp-block-post-author__bio { margin: 0; margin-top: $grid-unit-20; } From e0b57f341b92e0c3158ca92c392b3978ae8d2fc4 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 13:56:25 -0400 Subject: [PATCH 12/30] more editor/FE parity --- packages/block-library/src/post-author/editor.scss | 7 ++----- packages/block-library/src/post-author/style.scss | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index 78e6a651ca09f..a5348f5a72ee9 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -24,14 +24,11 @@ .block-editor__container .wp-block-post-author__name, .edit-site-visual-editor .wp-block-post-author__name { - margin: 0; - margin-top: -$grid-unit-20/2; - margin-bottom: -$grid-unit-20/2; + margin: -$grid-unit-10 0; font-weight: bold; } .block-editor__container .wp-block-post-author__bio, .edit-site-visual-editor .wp-block-post-author__bio { - margin: 0; - margin-top: $grid-unit-20; + margin: 0 0 $grid-unit-10; } diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index 86df342883142..c07be6dc3b639 100644 --- a/packages/block-library/src/post-author/style.scss +++ b/packages/block-library/src/post-author/style.scss @@ -15,7 +15,7 @@ } &__bio { - margin-top: $grid-unit-10; + margin-bottom: $grid-unit-10; } &__content { @@ -25,7 +25,7 @@ &__name { font-weight: bold; - margin: 0; + margin: -$grid-unit-10 0; } } From e12fbb1798701db5fccf22e7f860f88bf170601c Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 14:08:36 -0400 Subject: [PATCH 13/30] fontsize fixes in editor --- .../block-library/src/post-author/edit.js | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 614a77725a224..350b4652f3f10 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -105,9 +105,21 @@ function PostAuthorEdit( { } const blockClassNames = classnames( 'wp-block-post-author', { + [ `has-text-align-${ align }` ]: align, + } ); + + const authorClassNames = classnames( 'wp-block-post-author__name', { [ fontSize.class ]: fontSize.class, } ); + const bioClassNames = classnames( 'wp-block-post-author__bio', { + [ bioFontSize.class ]: bioFontSize.class, + } ); + + const bylineClassNames = classnames( 'wp-block-post-author__byline', { + [ bylineFontSize.class ]: bylineFontSize.class, + } ); + const authorInlineStyles = { fontSize: fontSize.size ? fontSize.size + 'px' : undefined, }; @@ -212,12 +224,7 @@ function PostAuthorEdit( { -
+
{ showAvatar && authorDetails && (
) }

{ authorDetails?.name }

{ showBio && (

{ authorDetails?.description } From 250238afb13e4040d1e0e7d2a189d6b0ad2c5c39 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 14:19:47 -0400 Subject: [PATCH 14/30] refactored editor font sizes to usememo --- .../block-library/src/post-author/edit.js | 73 +++++++++++-------- 1 file changed, 41 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 350b4652f3f10..cd26806023e71 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useRef } from '@wordpress/element'; +import { useRef, useMemo } from '@wordpress/element'; import { AlignmentToolbar, BlockControls, @@ -104,31 +104,40 @@ function PostAuthorEdit( { avatarSize = attributes.avatarSize; } - const blockClassNames = classnames( 'wp-block-post-author', { - [ `has-text-align-${ align }` ]: align, - } ); + const classNames = useMemo( () => { + return { + block: classnames( 'wp-block-post-author', { + [ `has-text-align-${ align }` ]: align, + } ), + name: classnames( 'wp-block-post-author__name', { + [ fontSize.class ]: fontSize.class, + } ), + bio: classnames( 'wp-block-post-author__bio', { + [ bioFontSize.class ]: bioFontSize.class, + } ), + byline: classnames( 'wp-block-post-author__byline', { + [ bylineFontSize.class ]: bylineFontSize.class, + } ), + }; + }, [ align, fontSize.class, bioFontSize.class, bylineFontSize.class ] ); - const authorClassNames = classnames( 'wp-block-post-author__name', { - [ fontSize.class ]: fontSize.class, - } ); - - const bioClassNames = classnames( 'wp-block-post-author__bio', { - [ bioFontSize.class ]: bioFontSize.class, - } ); - - const bylineClassNames = classnames( 'wp-block-post-author__byline', { - [ bylineFontSize.class ]: bylineFontSize.class, - } ); - - const authorInlineStyles = { - fontSize: fontSize.size ? fontSize.size + 'px' : undefined, - }; - const bioInlineStyles = { - fontSize: bioFontSize.size ? bioFontSize.size + 'px' : undefined, - }; - const bylineInlineStyles = { - fontSize: bylineFontSize.size ? bylineFontSize.size + 'px' : undefined, - }; + const inlineStyles = useMemo( () => { + return { + name: { + fontSize: fontSize.size ? fontSize.size + 'px' : undefined, + }, + bio: { + fontSize: bioFontSize.size + ? bioFontSize.size + 'px' + : undefined, + }, + byline: { + fontSize: bylineFontSize.size + ? bylineFontSize.size + 'px' + : undefined, + }, + }; + }, [ fontSize.size, bioFontSize.size, bylineFontSize.size ] ); return ( <> @@ -224,7 +233,7 @@ function PostAuthorEdit( { -

+
{ showAvatar && authorDetails && (
setAttributes( { byline: value } ) } - style={ bylineInlineStyles } + style={ inlineStyles.byline } /> ) }

{ authorDetails?.name }

{ showBio && (

{ authorDetails?.description }

From 49af117ac9659413b2ad3e5a6ae0c580b81ef962 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 15:16:45 -0400 Subject: [PATCH 15/30] change to correct classname for text alignment --- packages/block-library/src/post-author/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index bc5f3581303d5..4dc2098da391b 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -144,7 +144,7 @@ function render_block_core_post_author( $attributes, $content, $block ) { array( 'wp-block-post-author' ), isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(), isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(), - isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array() + isset( $attributes['align'] ) ? array( 'has-text-align-' . $attributes['align'] ) : array() ); $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); From e99b3ae66c01a3ccddafddfea61e49418fd535a5 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 17:45:32 -0400 Subject: [PATCH 16/30] add default size for author font --- packages/block-library/src/post-author/block.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index bb5d77b29897c..a7d6e2d036a65 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -30,7 +30,8 @@ "type": "string" }, "fontSize": { - "type": "string" + "type": "string", + "default": "large" }, "customFontSize": { "type": "number" From 4e8e8c5aba4c5c9214f53cb76c10f0e9f35a7623 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 18:08:22 -0400 Subject: [PATCH 17/30] define some defaults --- packages/block-library/src/post-author/block.json | 6 ++++-- packages/block-library/src/post-author/edit.js | 13 ++++--------- packages/block-library/src/post-author/editor.scss | 2 +- packages/block-library/src/post-author/style.scss | 2 +- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index a7d6e2d036a65..3228135926b8d 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -6,10 +6,12 @@ "type": "string" }, "avatarSize": { - "type": "number" + "type": "number", + "default": 48 }, "showAvatar": { - "type": "boolean" + "type": "boolean", + "default": true }, "showBio": { "type": "boolean" diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index cd26806023e71..19fd9cdfc1e7c 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -22,8 +22,6 @@ import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -const DEFAULT_AVATAR_SIZE = 24; - function PostAuthorEdit( { isSelected, fontSize, @@ -99,11 +97,6 @@ function PostAuthorEdit( { } ); } - let avatarSize = DEFAULT_AVATAR_SIZE; - if ( !! attributes.avatarSize ) { - avatarSize = attributes.avatarSize; - } - const classNames = useMemo( () => { return { block: classnames( 'wp-block-post-author', { @@ -237,9 +230,11 @@ function PostAuthorEdit( { { showAvatar && authorDetails && (
{ diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index a5348f5a72ee9..e9d0ce6990c84 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -24,7 +24,7 @@ .block-editor__container .wp-block-post-author__name, .edit-site-visual-editor .wp-block-post-author__name { - margin: -$grid-unit-10 0; + margin: 0; font-weight: bold; } diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index c07be6dc3b639..7587e1ff5e003 100644 --- a/packages/block-library/src/post-author/style.scss +++ b/packages/block-library/src/post-author/style.scss @@ -25,7 +25,7 @@ &__name { font-weight: bold; - margin: -$grid-unit-10 0; + margin: 0; } } From 458e09582995ed4122104bcd8de188921fcff638 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 19:56:34 -0400 Subject: [PATCH 18/30] weird parity mismatch fix --- packages/block-library/src/post-author/editor.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index e9d0ce6990c84..29bb5edc51411 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -15,6 +15,8 @@ .wp-block-post-author__content { flex-grow: 1; flex-basis: 0; + // To fix unknown space added in editor + margin-bottom: -$grid-unit-10; } .block-editor__container .wp-block-post-author__avatar img, @@ -22,6 +24,12 @@ margin: 0; } +.block-editor__container .wp-block-post-author__avatar, +.edit-site-visual-editor .wp-block-post-author__avatar { + // To fix unknown space added in editor + margin-bottom: -$grid-unit-10; +} + .block-editor__container .wp-block-post-author__name, .edit-site-visual-editor .wp-block-post-author__name { margin: 0; From 039c4f500a46a67e1d0861e82d2cb06f869b23c5 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 4 Jun 2020 20:16:57 -0400 Subject: [PATCH 19/30] remove default fontSize, ruins customFontSize =( --- packages/block-library/src/post-author/block.json | 3 +-- packages/block-library/src/post-author/editor.scss | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 3228135926b8d..ea50e30c49c88 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -32,8 +32,7 @@ "type": "string" }, "fontSize": { - "type": "string", - "default": "large" + "type": "string" }, "customFontSize": { "type": "number" diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index 29bb5edc51411..d5615beb11030 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -15,8 +15,6 @@ .wp-block-post-author__content { flex-grow: 1; flex-basis: 0; - // To fix unknown space added in editor - margin-bottom: -$grid-unit-10; } .block-editor__container .wp-block-post-author__avatar img, From 49c0e79fb62452d2ea7411b373ae2e07c0e7fb70 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 15:04:27 -0400 Subject: [PATCH 20/30] replace fontSize implementation with __experimentalFontSize --- .../block-library/src/post-author/block.json | 21 +--- .../block-library/src/post-author/edit.js | 95 ++----------------- .../block-library/src/post-author/index.php | 64 +++---------- 3 files changed, 26 insertions(+), 154 deletions(-) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index ea50e30c49c88..dd7a983f9761c 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -30,24 +30,6 @@ }, "customTextColor": { "type": "string" - }, - "fontSize": { - "type": "string" - }, - "customFontSize": { - "type": "number" - }, - "bioFontSize": { - "type": "string" - }, - "customBioFontSize": { - "type": "number" - }, - "bylineFontSize": { - "type": "string" - }, - "customBylineFontSize": { - "type": "number" } }, "context": [ @@ -55,6 +37,7 @@ "postId" ], "supports": { - "html": false + "html": false, + "__experimentalFontSize": true } } diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 19fd9cdfc1e7c..090b3ca52de5c 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -11,29 +11,16 @@ import { useRef, useMemo } from '@wordpress/element'; import { AlignmentToolbar, BlockControls, - FontSizePicker, InspectorControls, RichText, __experimentalUseColors, BlockColorsStyleSelector, - withFontSizes, } from '@wordpress/block-editor'; import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -function PostAuthorEdit( { - isSelected, - fontSize, - setFontSize, - bylineFontSize, - setBylineFontSize, - bioFontSize, - setBioFontSize, - context, - attributes, - setAttributes, -} ) { +function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { const { postType, postId } = context; const { authorId, authorDetails, authors } = useSelect( @@ -74,7 +61,7 @@ function PostAuthorEdit( { { backgroundColor: true, textColor: true, - fontSize: fontSize.size, + // fontSize: fontSize.size, }, ], colorDetector: { targetRef: ref }, @@ -82,7 +69,8 @@ function PostAuthorEdit( { initialOpen: true, }, }, - [ fontSize.size ] + // [ fontSize.size ] + [] ); const { align, showAvatar, showBio, byline } = attributes; @@ -102,35 +90,8 @@ function PostAuthorEdit( { block: classnames( 'wp-block-post-author', { [ `has-text-align-${ align }` ]: align, } ), - name: classnames( 'wp-block-post-author__name', { - [ fontSize.class ]: fontSize.class, - } ), - bio: classnames( 'wp-block-post-author__bio', { - [ bioFontSize.class ]: bioFontSize.class, - } ), - byline: classnames( 'wp-block-post-author__byline', { - [ bylineFontSize.class ]: bylineFontSize.class, - } ), }; - }, [ align, fontSize.class, bioFontSize.class, bylineFontSize.class ] ); - - const inlineStyles = useMemo( () => { - return { - name: { - fontSize: fontSize.size ? fontSize.size + 'px' : undefined, - }, - bio: { - fontSize: bioFontSize.size - ? bioFontSize.size + 'px' - : undefined, - }, - byline: { - fontSize: bylineFontSize.size - ? bylineFontSize.size + 'px' - : undefined, - }, - }; - }, [ fontSize.size, bioFontSize.size, bylineFontSize.size ] ); + }, [ align ] ); return ( <> @@ -178,33 +139,6 @@ function PostAuthorEdit( { } /> - -
- { ! RichText.isEmpty( byline ) && ( - - - - ) } - - - - - - { showBio && ( - - - - ) } -
{ InspectorControlsColorPanel } @@ -244,27 +178,20 @@ function PostAuthorEdit( { { ( ! RichText.isEmpty( byline ) || isSelected ) && ( setAttributes( { byline: value } ) } - style={ inlineStyles.byline } /> ) } -

+

{ authorDetails?.name }

{ showBio && ( -

+

{ authorDetails?.description }

) } @@ -276,8 +203,4 @@ function PostAuthorEdit( { ); } -export default withFontSizes( - 'fontSize', - 'bylineFontSize', - 'bioFontSize' -)( PostAuthorEdit ); +export default PostAuthorEdit; diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 4dc2098da391b..0dbca932925e8 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -60,57 +60,29 @@ function post_author_build_css_colors( $attributes ) { */ function post_author_build_css_font_sizes( $attributes ) { // CSS classes. - $name_font_sizes = array( - 'css_classes' => array(), - 'inline_styles' => '', - ); - $bio_font_sizes = array( - 'css_classes' => array(), - 'inline_styles' => '', - ); - $byline_font_sizes = array( + $font_sizes = array( 'css_classes' => array(), 'inline_styles' => '', ); + $has_named_font_size = array_key_exists( 'fontSize', $attributes ); - $has_custom_font_size = array_key_exists( 'customFontSize', $attributes ); + $has_custom_font_size = array_key_exists( 'style', $attributes ) + && array_key_exists( 'typography', $attributes['style']) + && array_key_exists( 'fontSize', $attributes['style']['typography']); if ( $has_named_font_size ) { // Add the font size class. - $name_font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['fontSize'] ); + $font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['fontSize'] ); } elseif ( $has_custom_font_size ) { // Add the custom font size inline style. - $name_font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customFontSize'] ); + $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['style']['typography']['fontSize'] ); } $has_named_bio_font_size = array_key_exists( 'bioFontSize', $attributes ); $has_custom_bio_font_size = array_key_exists( 'customBioFontSize', $attributes ); - if ( $has_named_bio_font_size ) { - // Add the font size class. - $bio_font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['bioFontSize'] ); - } elseif ( $has_custom_bio_font_size ) { - // Add the custom font size inline style. - $bio_font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customBioFontSize'] ); - } - - $has_named_byline_font_size = array_key_exists( 'bylineFontSize', $attributes ); - $has_custom_byline_font_size = array_key_exists( 'customBylineFontSize', $attributes ); - - if ( $has_named_byline_font_size ) { - // Add the font size class. - $byline_font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['bylineFontSize'] ); - } elseif ( $has_custom_byline_font_size ) { - // Add the custom font size inline style. - $byline_font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customBylineFontSize'] ); - } - - return array( - 'name' => $name_font_sizes, - 'bio' => $bio_font_sizes, - 'byline' => $byline_font_sizes, - ); + return $font_sizes; } /** @@ -141,6 +113,7 @@ function render_block_core_post_author( $attributes, $content, $block ) { $font_sizes = post_author_build_css_font_sizes( $attributes ); $classes = array_merge( $colors['css_classes'], + $font_sizes['css_classes'], array( 'wp-block-post-author' ), isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(), isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(), @@ -148,23 +121,16 @@ function render_block_core_post_author( $attributes, $content, $block ) { ); $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); - $style_attribute = $colors['inline_styles'] ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) ) : ''; - - $name_class_attribute = sprintf( ' class="wp-block-post-author__name %s"', esc_attr( implode( ' ', $font_sizes['name']['css_classes'] ) ) ); - $name_style_attribute = $font_sizes['name']['inline_styles'] ? sprintf( 'style="%s"', esc_attr( $font_sizes['name']['inline_styles'] ) ) : ''; - - $bio_class_attribute = sprintf( ' class="wp-block-post-author__bio %s"', esc_attr( implode( ' ', $font_sizes['bio']['css_classes'] ) ) ); - $bio_style_attribute = $font_sizes['bio']['inline_styles'] ? sprintf( 'style="%s"', esc_attr( $font_sizes['bio']['inline_styles'] ) ) : ''; - - $byline_class_attribute = sprintf( ' class="wp-block-post-author__byline %s"', esc_attr( implode( ' ', $font_sizes['byline']['css_classes'] ) ) ); - $byline_style_attribute = $font_sizes['byline']['inline_styles'] ? sprintf( 'style="%s"', esc_attr( $font_sizes['byline']['inline_styles'] ) ) : ''; + $style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] ) + ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles']) ) + : ''; return sprintf( '
', $class_attribute, $style_attribute ) . ( ! empty( $attributes['showAvatar'] ) ? '
' . $avatar . '
' : '' ) . '
' . - ( ! empty( $byline ) ? sprintf( '

', $byline_class_attribute, $byline_style_attribute ) . $byline . '

' : '' ) . - sprintf( '

', $name_class_attribute, $name_style_attribute ) . get_the_author_meta( 'display_name', $author_id ) . '

' . - ( ! empty( $attributes['showBio'] ) ? sprintf( '

', $bio_class_attribute, $bio_style_attribute ) . get_the_author_meta( 'user_description', $author_id ) . '

' : '' ) . + ( ! empty( $byline ) ? '

' . $byline . '

' : '' ) . + '

' . get_the_author_meta( 'display_name', $author_id ) . '

' . + ( ! empty( $attributes['showBio'] ) ? '

' . get_the_author_meta( 'user_description', $author_id ) . '

' : '' ) . '
' . '
'; } From f08f7f2b855e50a388af8fd64f0580a3f4e16454 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 15:20:39 -0400 Subject: [PATCH 21/30] relative font sizes for other sections --- packages/block-library/src/post-author/editor.scss | 4 +++- packages/block-library/src/post-author/style.scss | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index d5615beb11030..1d5ea56deca23 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -6,7 +6,8 @@ } .wp-block-post-author__byline { - font-size: $default-font-size; + // font-size: $default-font-size; + font-size: 0.5em; margin-top: 0; position: relative; font-style: normal; @@ -37,4 +38,5 @@ .block-editor__container .wp-block-post-author__bio, .edit-site-visual-editor .wp-block-post-author__bio { margin: 0 0 $grid-unit-10; + font-size: 0.7em; } diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index 7587e1ff5e003..53fe560773d7a 100644 --- a/packages/block-library/src/post-author/style.scss +++ b/packages/block-library/src/post-author/style.scss @@ -7,7 +7,7 @@ width: 100%; margin-top: 0; margin-bottom: 0; - font-size: 0.8em; + font-size: 0.5em; } &__avatar { @@ -16,6 +16,7 @@ &__bio { margin-bottom: $grid-unit-10; + font-size: 0.7em; } &__content { From 5aa9fca1712efda24a0dd76df761f2265d0e0bc2 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 15:21:28 -0400 Subject: [PATCH 22/30] derp a comment --- packages/block-library/src/post-author/editor.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index 1d5ea56deca23..3ae9972338082 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -6,7 +6,6 @@ } .wp-block-post-author__byline { - // font-size: $default-font-size; font-size: 0.5em; margin-top: 0; position: relative; From 5b044d73c02defc8423c3fcabb746ad57b3befd4 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 16:25:19 -0400 Subject: [PATCH 23/30] updated fontSize being fed to contrastCheckers --- .../block-library/src/post-author/edit.js | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 090b3ca52de5c..a9d5a66eb0708 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { forEach } from 'lodash'; +import { forEach, groupBy } from 'lodash'; import classnames from 'classnames'; /** @@ -20,6 +20,8 @@ import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +const DEFAULT_CONTRAST_CHECK_FONT_SIZE = 12; + function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { const { postType, postId } = context; @@ -45,6 +47,26 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { const { editEntityRecord } = useDispatch( 'core' ); + // Need font size in number form for named presets to be used in contrastCheckers. + const { fontSizes } = useSelect( ( select ) => + select( 'core/block-editor' ).getSettings() + ); + const fontSizeIndex = useMemo( () => groupBy( fontSizes, 'slug' ), [ + fontSizes, + ] ); + const contrastCheckFontSize = useMemo( + () => + // Custom size if set. + attributes.style?.typography?.fontSize || + // Size of preset/named value if set. + fontSizeIndex[ attributes.fontSize ]?.[ 0 ].size || + DEFAULT_CONTRAST_CHECK_FONT_SIZE, + [ + attributes.style?.typography?.fontSize, + attributes.fontSize, + fontSizeIndex, + ] + ); const ref = useRef(); const { TextColor, @@ -61,7 +83,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { { backgroundColor: true, textColor: true, - // fontSize: fontSize.size, + fontSize: contrastCheckFontSize, }, ], colorDetector: { targetRef: ref }, @@ -69,8 +91,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { initialOpen: true, }, }, - // [ fontSize.size ] - [] + [ contrastCheckFontSize ] ); const { align, showAvatar, showBio, byline } = attributes; From b34e3d0b8065a3253d7bd364c8d5415cec300260 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 16:27:03 -0400 Subject: [PATCH 24/30] php format --- packages/block-library/src/post-author/index.php | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 0dbca932925e8..04a30ea7e8f2f 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -60,16 +60,15 @@ function post_author_build_css_colors( $attributes ) { */ function post_author_build_css_font_sizes( $attributes ) { // CSS classes. - $font_sizes = array( + $font_sizes = array( 'css_classes' => array(), 'inline_styles' => '', ); - $has_named_font_size = array_key_exists( 'fontSize', $attributes ); $has_custom_font_size = array_key_exists( 'style', $attributes ) - && array_key_exists( 'typography', $attributes['style']) - && array_key_exists( 'fontSize', $attributes['style']['typography']); + && array_key_exists( 'typography', $attributes['style'] ) + && array_key_exists( 'fontSize', $attributes['style']['typography'] ); if ( $has_named_font_size ) { // Add the font size class. @@ -122,7 +121,7 @@ function render_block_core_post_author( $attributes, $content, $block ) { $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); $style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] ) - ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles']) ) + ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) ) : ''; return sprintf( '
', $class_attribute, $style_attribute ) . From 84a9ca4e646d9b8a619d5ca7cf642996265768be Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 18:10:47 -0400 Subject: [PATCH 25/30] remove unused declarations --- packages/block-library/src/post-author/index.php | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 04a30ea7e8f2f..9127480c50c78 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -78,9 +78,6 @@ function post_author_build_css_font_sizes( $attributes ) { $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['style']['typography']['fontSize'] ); } - $has_named_bio_font_size = array_key_exists( 'bioFontSize', $attributes ); - $has_custom_bio_font_size = array_key_exists( 'customBioFontSize', $attributes ); - return $font_sizes; } From d0c441240fbd72a2c31a5f664c471f787f38e6b5 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 18:38:11 -0400 Subject: [PATCH 26/30] fix font colors with has-background-color class --- .../block-library/src/post-author/index.php | 41 ++++++++++++++----- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 9127480c50c78..c223557e30568 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -13,7 +13,11 @@ * @return array Colors CSS classes and inline styles. */ function post_author_build_css_colors( $attributes ) { - $colors = array( + $text_colors = array( + 'css_classes' => array(), + 'inline_styles' => '', + ); + $background_colors = array( 'css_classes' => array(), 'inline_styles' => '', ); @@ -25,30 +29,39 @@ function post_author_build_css_colors( $attributes ) { // If has text color. if ( $has_custom_text_color || $has_named_text_color ) { // Add has-text-color class. - $colors['css_classes'][] = 'has-text-color'; + $text_colors['css_classes'][] = 'has-text-color'; } if ( $has_named_text_color ) { // Add the color class. - $colors['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] ); + $text_colors['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] ); } elseif ( $has_custom_text_color ) { // Add the custom color inline style. - $colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] ); + $text_colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] ); } // Background color. $has_named_background_color = array_key_exists( 'backgroundColor', $attributes ); $has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes ); + // If has background color. + if ( $has_custom_background_color || $has_named_background_color ) { + // Add has-background-color class. + $background_colors['css_classes'][] = 'has-background-color'; + } + if ( $has_named_background_color ) { // Add the background-color class. - $colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); + $background_colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); } elseif ( $has_custom_background_color ) { // Add the custom background-color inline style. - $colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] ); + $background_colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] ); } - return $colors; + return array( + 'text' => $text_colors, + 'background' => $background_colors, + ); } /** @@ -108,7 +121,7 @@ function render_block_core_post_author( $attributes, $content, $block ) { $colors = post_author_build_css_colors( $attributes ); $font_sizes = post_author_build_css_font_sizes( $attributes ); $classes = array_merge( - $colors['css_classes'], + $colors['background']['css_classes'], $font_sizes['css_classes'], array( 'wp-block-post-author' ), isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(), @@ -117,13 +130,19 @@ function render_block_core_post_author( $attributes, $content, $block ) { ); $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); - $style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] ) - ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) ) + $style_attribute = ( $colors['background']['inline_styles'] || $font_sizes['inline_styles'] ) + ? sprintf( ' style="%s"', esc_attr( $colors['background']['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) ) + : ''; + + // Add text colors on content for higher specificty. Prevents theme override for has-background-color. + $content_class_attribute = sprintf( ' class="wp-block-post-author__content %s"', esc_attr( implode( ' ', $colors['text']['css_classes'] ) ) ); + $content_style_attribute = ( $colors['text']['inline_styles'] ) + ? sprintf( ' style="%s"', esc_attr( $colors['text']['inline_styles'] ) ) : ''; return sprintf( '
', $class_attribute, $style_attribute ) . ( ! empty( $attributes['showAvatar'] ) ? '
' . $avatar . '
' : '' ) . - '
' . + sprintf( '
', $content_class_attribute, $content_style_attribute ) . ( ! empty( $byline ) ? '

' . $byline . '

' : '' ) . '

' . get_the_author_meta( 'display_name', $author_id ) . '

' . ( ! empty( $attributes['showBio'] ) ? '

' . get_the_author_meta( 'user_description', $author_id ) . '

' : '' ) . From d425b8b3f5226dfed411922e8ab256d471638862 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 18:52:32 -0400 Subject: [PATCH 27/30] removed unnecessary classes from editor styles --- .../block-library/src/post-author/editor.scss | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index 3ae9972338082..ccc2fadb8b214 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -1,5 +1,4 @@ -.block-editor__container .wp-block-post-author, -.edit-site-visual-editor .wp-block-post-author { +.wp-block-post-author { display: flex; flex-wrap: wrap; line-height: 1.5; @@ -17,25 +16,21 @@ flex-basis: 0; } -.block-editor__container .wp-block-post-author__avatar img, -.edit-site-visual-editor .wp-block-post-author__avatar img { +.wp-block-post-author__avatar img { margin: 0; } -.block-editor__container .wp-block-post-author__avatar, -.edit-site-visual-editor .wp-block-post-author__avatar { +.wp-block-post-author__avatar { // To fix unknown space added in editor margin-bottom: -$grid-unit-10; } -.block-editor__container .wp-block-post-author__name, -.edit-site-visual-editor .wp-block-post-author__name { +.wp-block-post-author__name { margin: 0; font-weight: bold; } -.block-editor__container .wp-block-post-author__bio, -.edit-site-visual-editor .wp-block-post-author__bio { +.wp-block-post-author__bio { margin: 0 0 $grid-unit-10; font-size: 0.7em; } From a91582890330090eecaf75a019763ada65245b1f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 19:30:12 -0400 Subject: [PATCH 28/30] php format? --- .../block-library/src/post-author/index.php | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index c223557e30568..2a96766c5b6bd 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -80,8 +80,8 @@ function post_author_build_css_font_sizes( $attributes ) { $has_named_font_size = array_key_exists( 'fontSize', $attributes ); $has_custom_font_size = array_key_exists( 'style', $attributes ) - && array_key_exists( 'typography', $attributes['style'] ) - && array_key_exists( 'fontSize', $attributes['style']['typography'] ); + && array_key_exists( 'typography', $attributes['style'] ) + && array_key_exists( 'fontSize', $attributes['style']['typography'] ); if ( $has_named_font_size ) { // Add the font size class. @@ -97,9 +97,9 @@ function post_author_build_css_font_sizes( $attributes ) { /** * Renders the `core/post-author` block on the server. * - * @param array $attributes Block attributes. - * @param string $content Block default content. - * @param WP_Block $block Block instance. + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. * @return string Returns the rendered author block. */ function render_block_core_post_author( $attributes, $content, $block ) { @@ -131,22 +131,22 @@ function render_block_core_post_author( $attributes, $content, $block ) { $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); $style_attribute = ( $colors['background']['inline_styles'] || $font_sizes['inline_styles'] ) - ? sprintf( ' style="%s"', esc_attr( $colors['background']['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) ) - : ''; + ? sprintf( ' style="%s"', esc_attr( $colors['background']['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) ) + : ''; // Add text colors on content for higher specificty. Prevents theme override for has-background-color. $content_class_attribute = sprintf( ' class="wp-block-post-author__content %s"', esc_attr( implode( ' ', $colors['text']['css_classes'] ) ) ); $content_style_attribute = ( $colors['text']['inline_styles'] ) - ? sprintf( ' style="%s"', esc_attr( $colors['text']['inline_styles'] ) ) - : ''; + ? sprintf( ' style="%s"', esc_attr( $colors['text']['inline_styles'] ) ) + : ''; return sprintf( '
', $class_attribute, $style_attribute ) . - ( ! empty( $attributes['showAvatar'] ) ? '
' . $avatar . '
' : '' ) . - sprintf( '
', $content_class_attribute, $content_style_attribute ) . - ( ! empty( $byline ) ? '

' . $byline . '

' : '' ) . - '

' . get_the_author_meta( 'display_name', $author_id ) . '

' . - ( ! empty( $attributes['showBio'] ) ? '

' . get_the_author_meta( 'user_description', $author_id ) . '

' : '' ) . - '
' . + ( ! empty( $attributes['showAvatar'] ) ? '
' . $avatar . '
' : '' ) . + sprintf( '
', $content_class_attribute, $content_style_attribute ) . + ( ! empty( $byline ) ? '

' . $byline . '

' : '' ) . + '

' . get_the_author_meta( 'display_name', $author_id ) . '

' . + ( ! empty( $attributes['showBio'] ) ? '

' . get_the_author_meta( 'user_description', $author_id ) . '

' : '' ) . + '
' . '
'; } From f0e51cc4e5cb8f9c86c2ecc2e8509a03e96bf7fd Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Jun 2020 20:33:31 -0400 Subject: [PATCH 29/30] update test fixture --- packages/e2e-tests/fixtures/blocks/core__post-author.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__post-author.json b/packages/e2e-tests/fixtures/blocks/core__post-author.json index f780184a547e9..b5f4fcb918a99 100644 --- a/packages/e2e-tests/fixtures/blocks/core__post-author.json +++ b/packages/e2e-tests/fixtures/blocks/core__post-author.json @@ -3,7 +3,10 @@ "clientId": "_clientId_0", "name": "core/post-author", "isValid": true, - "attributes": {}, + "attributes": { + "avatarSize": 48, + "showAvatar": true + }, "innerBlocks": [], "originalContent": "" } From 5addca1dd4f97fb308150722f00615e579ecfec8 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 8 Jun 2020 15:25:20 -0400 Subject: [PATCH 30/30] fix editor style regression --- .../block-library/src/post-author/editor.scss | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index ccc2fadb8b214..e57cb18ae2368 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -2,35 +2,35 @@ display: flex; flex-wrap: wrap; line-height: 1.5; -} -.wp-block-post-author__byline { - font-size: 0.5em; - margin-top: 0; - position: relative; - font-style: normal; -} + .wp-block-post-author__byline { + font-size: 0.5em; + margin-top: 0; + position: relative; + font-style: normal; + } -.wp-block-post-author__content { - flex-grow: 1; - flex-basis: 0; -} + .wp-block-post-author__content { + flex-grow: 1; + flex-basis: 0; + } -.wp-block-post-author__avatar img { - margin: 0; -} + .wp-block-post-author__avatar img { + margin: 0; + } -.wp-block-post-author__avatar { - // To fix unknown space added in editor - margin-bottom: -$grid-unit-10; -} + .wp-block-post-author__avatar { + // To fix unknown space added in editor + margin-bottom: -$grid-unit-10; + } -.wp-block-post-author__name { - margin: 0; - font-weight: bold; -} + .wp-block-post-author__name { + margin: 0; + font-weight: bold; + } -.wp-block-post-author__bio { - margin: 0 0 $grid-unit-10; - font-size: 0.7em; + .wp-block-post-author__bio { + margin: 0 0 $grid-unit-10; + font-size: 0.7em; + } }