+
{ authorDetails?.description }
) } @@ -233,4 +224,4 @@ function PostAuthorEdit( { ); } -export default withFontSizes( 'fontSize' )( PostAuthorEdit ); +export default PostAuthorEdit; diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss index 65c919a25155cd..e57cb18ae23680 100644 --- a/packages/block-library/src/post-author/editor.scss +++ b/packages/block-library/src/post-author/editor.scss @@ -1,34 +1,36 @@ -.block-editor__container .wp-block-post-author { +.wp-block-post-author { display: flex; flex-wrap: wrap; line-height: 1.5; -} -.wp-block-post-author__byline { - color: $dark-gray-300; - font-size: $default-font-size; - 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; + } -.block-editor__container .wp-block-post-author__avatar img { - margin: 0; -} + .wp-block-post-author__avatar img { + margin: 0; + } -.block-editor__container .wp-block-post-author__name { - margin: 0; - margin-top: -$grid-unit-20/2; - margin-bottom: -$grid-unit-20/2; - font-weight: bold; -} + .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; + } -.block-editor__container .wp-block-post-author__bio { - margin: 0; - margin-top: $grid-unit-20; + .wp-block-post-author__bio { + margin: 0 0 $grid-unit-10; + font-size: 0.7em; + } } diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php index 111926ed1590ba..2a96766c5b6bdd 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,15 +29,15 @@ 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. @@ -43,18 +47,21 @@ function post_author_build_css_colors( $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'; + $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, + ); } /** @@ -72,14 +79,16 @@ function post_author_build_css_font_sizes( $attributes ) { ); $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. $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'] ); + $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['style']['typography']['fontSize'] ); } return $font_sizes; @@ -88,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 ) { @@ -112,26 +121,32 @@ 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(), 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 ) ) ); - $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( '