From 55c199bf68f062e50f26c4e394b21738676a15db Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 9 Jun 2020 15:34:21 -0400 Subject: [PATCH 1/9] add the new support flag --- packages/block-library/src/post-author/block.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index dd7a983f9761c..f3f047ba3258b 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -38,6 +38,10 @@ ], "supports": { "html": false, - "__experimentalFontSize": true + "__experimentalFontSize": true, + "__experimentalColor": { + "gradients": true, + "linkColor": true + } } } From 16cb05fb35a0fc460b4518393e51b6ccfbce63de Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 9 Jun 2020 15:44:51 -0400 Subject: [PATCH 2/9] remove the old --- .../block-library/src/post-author/edit.js | 138 +++++------------- 1 file changed, 37 insertions(+), 101 deletions(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index a9d5a66eb0708..e89b707b88649 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -1,27 +1,23 @@ /** * External dependencies */ -import { forEach, groupBy } from 'lodash'; +import { forEach } from 'lodash'; import classnames from 'classnames'; /** * WordPress dependencies */ -import { useRef, useMemo } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import { AlignmentToolbar, BlockControls, InspectorControls, RichText, - __experimentalUseColors, - BlockColorsStyleSelector, } from '@wordpress/block-editor'; 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; @@ -47,53 +43,6 @@ 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, - BackgroundColor, - InspectorControlsColorPanel, - ColorPanel, - } = __experimentalUseColors( - [ - { name: 'textColor', property: 'color' }, - { name: 'backgroundColor', className: 'background-color' }, - ], - { - contrastCheckers: [ - { - backgroundColor: true, - textColor: true, - fontSize: contrastCheckFontSize, - }, - ], - colorDetector: { targetRef: ref }, - colorPanelProps: { - initialOpen: true, - }, - }, - [ contrastCheckFontSize ] - ); - const { align, showAvatar, showBio, byline } = attributes; const avatarSizes = []; @@ -162,8 +111,6 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { - { InspectorControlsColorPanel } - - - { ColorPanel } - - - -
- { showAvatar && authorDetails && ( -
- { -
- ) } -
- { ( ! RichText.isEmpty( byline ) || - isSelected ) && ( - - setAttributes( { byline: value } ) - } - /> - ) } -

- { authorDetails?.name } -

- { showBio && ( -

- { authorDetails?.description } -

- ) } -
+
+ { showAvatar && authorDetails && ( +
+ {
- - + ) } +
+ { ( ! RichText.isEmpty( byline ) || isSelected ) && ( + + setAttributes( { byline: value } ) + } + /> + ) } +

+ { authorDetails?.name } +

+ { showBio && ( +

+ { authorDetails?.description } +

+ ) } +
+
); } From 319c1173ea4ce0e40894a198366e826ac15ecd70 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 9 Jun 2020 15:45:55 -0400 Subject: [PATCH 3/9] remove unnecessary attributes --- packages/block-library/src/post-author/block.json | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index f3f047ba3258b..4ee33508c5d8b 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -18,18 +18,6 @@ }, "byline": { "type": "string" - }, - "backgroundColor": { - "type": "string" - }, - "textColor": { - "type": "string" - }, - "customBackgroundColor": { - "type": "string" - }, - "customTextColor": { - "type": "string" } }, "context": [ From ddd51f619e26d117de47d4a6332a5801d3078f2e Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 9 Jun 2020 17:06:22 -0400 Subject: [PATCH 4/9] updated colors in php --- .../block-library/src/post-author/index.php | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 2a96766c5b6bd..5529e581be170 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -24,7 +24,9 @@ function post_author_build_css_colors( $attributes ) { // Text color. $has_named_text_color = array_key_exists( 'textColor', $attributes ); - $has_custom_text_color = array_key_exists( 'customTextColor', $attributes ); + $has_custom_text_color = array_key_exists( 'style', $attributes ) + && array_key_exists( 'color', $attributes['style'] ) + && array_key_exists( 'text', $attributes['style']['color'] ); // If has text color. if ( $has_custom_text_color || $has_named_text_color ) { @@ -42,10 +44,18 @@ function post_author_build_css_colors( $attributes ) { // Background color. $has_named_background_color = array_key_exists( 'backgroundColor', $attributes ); - $has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes ); + $has_custom_background_color = array_key_exists( 'style', $attributes ) + && array_key_exists( 'color', $attributes['style'] ) + && array_key_exists( 'background', $attributes['style']['color'] ); + + // Gradient color. + $has_named_gradient = array_key_exists( 'gradient', $attributes ); + $has_custom_gradient = array_key_exists( 'style', $attributes ) + && array_key_exists( 'color', $attributes['style'] ) + && array_key_exists( 'gradient', $attributes['style']['color'] ); // If has background color. - if ( $has_custom_background_color || $has_named_background_color ) { + if ( $has_custom_background_color || $has_named_background_color || $has_named_gradient || $has_custom_gradient ) { // Add has-background-color class. $background_colors['css_classes'][] = 'has-background-color'; } @@ -55,7 +65,11 @@ function post_author_build_css_colors( $attributes ) { $background_colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); } elseif ( $has_custom_background_color ) { // Add the custom background-color inline style. - $background_colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] ); + $background_colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['style']['color']['background'] ); + } elseif( $has_named_gradient ) { + $background_colors['css_classes'][] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] ); + } elseif( $has_custom_gradient ) { + $background_colors['inline_styles'] .= sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); } return array( From d17d371c8d91c12fa64632a1424fc6df5d3f67d1 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 9 Jun 2020 18:03:27 -0400 Subject: [PATCH 5/9] add link color support --- .../block-library/src/post-author/index.php | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 5529e581be170..59f7e03ee063b 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -39,9 +39,26 @@ function post_author_build_css_colors( $attributes ) { $text_colors['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] ); } elseif ( $has_custom_text_color ) { // Add the custom color inline style. - $text_colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] ); + $text_colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['style']['color']['text'] ); } + // Link colors. + $has_link_color = array_key_exists( 'style', $attributes ) + && array_key_exists( 'color', $attributes['style'] ) + && array_key_exists( 'link', $attributes['style']['color'] ); + + if ( $has_link_color ) { + $text_colors['css_classes'][] = 'has-link-color'; + // If link is a named color. + if ( strpos( $attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) { + // Get the name from the string and add proper styles. + $index_to_splice = strrpos( $attributes['style']['color']['link'], '|' ) + 1; + $link_color_name = substr( $attributes['style']['color']['link'], $index_to_splice ); + $text_colors['inline_styles'] .= sprintf( '--wp--style--color--link:var(--wp--preset--color--%s);', $link_color_name ); + } else { + $text_colors['inline_styles'] .= sprintf( '--wp--style--color--link: %s;', $attributes['style']['color']['link'] ); + } + } // Background color. $has_named_background_color = array_key_exists( 'backgroundColor', $attributes ); $has_custom_background_color = array_key_exists( 'style', $attributes ) @@ -65,10 +82,10 @@ function post_author_build_css_colors( $attributes ) { $background_colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); } elseif ( $has_custom_background_color ) { // Add the custom background-color inline style. - $background_colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['style']['color']['background'] ); - } elseif( $has_named_gradient ) { + $background_colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['style']['color']['background'] ); + } elseif ( $has_named_gradient ) { $background_colors['css_classes'][] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] ); - } elseif( $has_custom_gradient ) { + } elseif ( $has_custom_gradient ) { $background_colors['inline_styles'] .= sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); } From b84f453a36ba7374d377124c4c0d02cc2b854728 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 11 Jun 2020 14:18:32 -0400 Subject: [PATCH 6/9] update background classname --- 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 59f7e03ee063b..70deb4611ff40 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -73,8 +73,8 @@ function post_author_build_css_colors( $attributes ) { // If has background color. if ( $has_custom_background_color || $has_named_background_color || $has_named_gradient || $has_custom_gradient ) { - // Add has-background-color class. - $background_colors['css_classes'][] = 'has-background-color'; + // Add has-background class. + $background_colors['css_classes'][] = 'has-background'; } if ( $has_named_background_color ) { From 2a333354bbe6800cc21f609ffd1f1c00f090ac03 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 14 Jul 2020 16:19:51 -0400 Subject: [PATCH 7/9] gutting the unnecessary --- .../block-library/src/post-author/block.json | 3 +- .../block-library/src/post-author/editor.scss | 1 - .../block-library/src/post-author/index.php | 141 +----------------- .../block-library/src/post-author/style.scss | 2 - 4 files changed, 6 insertions(+), 141 deletions(-) diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 9608e33786681..31260f8268365 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -30,6 +30,7 @@ "__experimentalColor": { "gradients": true, "linkColor": true - } + }, + "__experimentalLineHeight": true } } diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index e57cb18ae2368..9a86b22d9c98d 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -1,7 +1,6 @@ .wp-block-post-author { display: flex; flex-wrap: wrap; - line-height: 1.5; .wp-block-post-author__byline { font-size: 0.5em; diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 70deb4611ff40..e53fc6869ed12 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -5,126 +5,6 @@ * @package WordPress */ -/** - * Build an array with CSS classes and inline styles defining the colors - * which will be applied to the navigation markup in the front-end. - * - * @param array $attributes Navigation block attributes. - * @return array Colors CSS classes and inline styles. - */ -function post_author_build_css_colors( $attributes ) { - $text_colors = array( - 'css_classes' => array(), - 'inline_styles' => '', - ); - $background_colors = array( - 'css_classes' => array(), - 'inline_styles' => '', - ); - - // Text color. - $has_named_text_color = array_key_exists( 'textColor', $attributes ); - $has_custom_text_color = array_key_exists( 'style', $attributes ) - && array_key_exists( 'color', $attributes['style'] ) - && array_key_exists( 'text', $attributes['style']['color'] ); - - // If has text color. - if ( $has_custom_text_color || $has_named_text_color ) { - // Add has-text-color class. - $text_colors['css_classes'][] = 'has-text-color'; - } - - if ( $has_named_text_color ) { - // Add the color class. - $text_colors['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] ); - } elseif ( $has_custom_text_color ) { - // Add the custom color inline style. - $text_colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['style']['color']['text'] ); - } - - // Link colors. - $has_link_color = array_key_exists( 'style', $attributes ) - && array_key_exists( 'color', $attributes['style'] ) - && array_key_exists( 'link', $attributes['style']['color'] ); - - if ( $has_link_color ) { - $text_colors['css_classes'][] = 'has-link-color'; - // If link is a named color. - if ( strpos( $attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) { - // Get the name from the string and add proper styles. - $index_to_splice = strrpos( $attributes['style']['color']['link'], '|' ) + 1; - $link_color_name = substr( $attributes['style']['color']['link'], $index_to_splice ); - $text_colors['inline_styles'] .= sprintf( '--wp--style--color--link:var(--wp--preset--color--%s);', $link_color_name ); - } else { - $text_colors['inline_styles'] .= sprintf( '--wp--style--color--link: %s;', $attributes['style']['color']['link'] ); - } - } - // Background color. - $has_named_background_color = array_key_exists( 'backgroundColor', $attributes ); - $has_custom_background_color = array_key_exists( 'style', $attributes ) - && array_key_exists( 'color', $attributes['style'] ) - && array_key_exists( 'background', $attributes['style']['color'] ); - - // Gradient color. - $has_named_gradient = array_key_exists( 'gradient', $attributes ); - $has_custom_gradient = array_key_exists( 'style', $attributes ) - && array_key_exists( 'color', $attributes['style'] ) - && array_key_exists( 'gradient', $attributes['style']['color'] ); - - // If has background color. - if ( $has_custom_background_color || $has_named_background_color || $has_named_gradient || $has_custom_gradient ) { - // Add has-background class. - $background_colors['css_classes'][] = 'has-background'; - } - - if ( $has_named_background_color ) { - // Add the background-color class. - $background_colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); - } elseif ( $has_custom_background_color ) { - // Add the custom background-color inline style. - $background_colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['style']['color']['background'] ); - } elseif ( $has_named_gradient ) { - $background_colors['css_classes'][] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] ); - } elseif ( $has_custom_gradient ) { - $background_colors['inline_styles'] .= sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); - } - - return array( - 'text' => $text_colors, - 'background' => $background_colors, - ); -} - -/** - * Build an array with CSS classes and inline styles defining the font sizes - * which will be applied to the navigation markup in the front-end. - * - * @param array $attributes Navigation block attributes. - * @return array Font size CSS classes and inline styles. - */ -function post_author_build_css_font_sizes( $attributes ) { - // CSS classes. - $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'] ); - - if ( $has_named_font_size ) { - // Add the font size class. - $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['style']['typography']['fontSize'] ); - } - - return $font_sizes; -} - /** * Renders the `core/post-author` block on the server. * @@ -148,12 +28,8 @@ function render_block_core_post_author( $attributes, $content, $block ) { $attributes['avatarSize'] ) : null; - $byline = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false; - $colors = post_author_build_css_colors( $attributes ); - $font_sizes = post_author_build_css_font_sizes( $attributes ); - $classes = array_merge( - $colors['background']['css_classes'], - $font_sizes['css_classes'], + $byline = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false; + $classes = array_merge( array( 'wp-block-post-author' ), isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(), isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(), @@ -161,19 +37,10 @@ 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'] ) ) - : ''; - - // 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 ) . + return sprintf( '
', $class_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 ) . '

' : '' ) . diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index 53fe560773d7a..2f26818dec02a 100644 --- a/packages/block-library/src/post-author/style.scss +++ b/packages/block-library/src/post-author/style.scss @@ -1,7 +1,6 @@ .wp-block-post-author { display: flex; flex-wrap: wrap; - line-height: 1.5; &__byline { width: 100%; @@ -28,5 +27,4 @@ font-weight: bold; margin: 0; } - } From fdbdaef311bfa011161a950c224118e949e17b58 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 15 Jul 2020 20:24:46 -0400 Subject: [PATCH 8/9] add style rules to add the set link color --- packages/block-library/src/post-author/editor.scss | 4 ++++ packages/block-library/src/post-author/style.scss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index 9a86b22d9c98d..82ba9174743de 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -33,3 +33,7 @@ font-size: 0.7em; } } + +.wp-block[data-type="core/post-author"].has-link-color .wp-block-post-author a { + color: var(--wp--style--color--link); +} diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index 2f26818dec02a..b54d4ae73fdbc 100644 --- a/packages/block-library/src/post-author/style.scss +++ b/packages/block-library/src/post-author/style.scss @@ -28,3 +28,7 @@ margin: 0; } } + +.wp-block-post-author.has-link-color a { + color: var(--wp--style--color--link) !important; +} From ab224b23c08f6bda2383780e6f5b01df5556f99b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 20 Jul 2020 12:22:31 -0400 Subject: [PATCH 9/9] remove important style --- packages/block-library/src/post-author/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index b54d4ae73fdbc..89798aaf31e6b 100644 --- a/packages/block-library/src/post-author/style.scss +++ b/packages/block-library/src/post-author/style.scss @@ -29,6 +29,7 @@ } } -.wp-block-post-author.has-link-color a { - color: var(--wp--style--color--link) !important; +.wp-block-post-author.has-link-color a, +.wp-block-post-author.has-background.has-link-color a { + color: var(--wp--style--color--link); }