diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 3ea69f0d1b9368..31260f8268365f 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" } }, "usesContext": [ @@ -38,6 +26,11 @@ ], "supports": { "html": false, - "__experimentalFontSize": true + "__experimentalFontSize": true, + "__experimentalColor": { + "gradients": true, + "linkColor": true + }, + "__experimentalLineHeight": true } } diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index b3fd9da17d8db3..42a0bac318a97d 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 || __( 'Post Author' ) } -

- { showBio && ( -

- { authorDetails?.description } -

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

+ { authorDetails?.name || __( 'Post Author' ) } +

+ { showBio && ( +

+ { authorDetails?.description } +

+ ) } +
+
); } diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index e57cb18ae23680..82ba9174743dee 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; @@ -34,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/index.php b/packages/block-library/src/post-author/index.php index 2a96766c5b6bdd..e53fc6869ed128 100644 --- a/packages/block-library/src/post-author/index.php +++ b/packages/block-library/src/post-author/index.php @@ -5,95 +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( 'customTextColor', $attributes ); - - // 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['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. - $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'] ); - } - - 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. * @@ -117,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(), @@ -130,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 53fe560773d7a6..89798aaf31e6bf 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,9 @@ font-weight: bold; margin: 0; } +} +.wp-block-post-author.has-link-color a, +.wp-block-post-author.has-background.has-link-color a { + color: var(--wp--style--color--link); }