diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 6a59b0fe5f1b32..dd7a983f9761cc 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" @@ -35,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 e45932907251ff..a9d5a66eb07089 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -1,37 +1,28 @@ /** * External dependencies */ -import { forEach } from 'lodash'; +import { forEach, groupBy } from 'lodash'; import classnames from 'classnames'; /** * WordPress dependencies */ -import { useRef } from '@wordpress/element'; +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'; -const DEFAULT_AVATAR_SIZE = 24; +const DEFAULT_CONTRAST_CHECK_FONT_SIZE = 12; -function PostAuthorEdit( { - isSelected, - fontSize, - setFontSize, - context, - attributes, - setAttributes, -} ) { +function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) { const { postType, postId } = context; const { authorId, authorDetails, authors } = useSelect( @@ -56,6 +47,26 @@ function PostAuthorEdit( { 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, @@ -72,7 +83,7 @@ function PostAuthorEdit( { { backgroundColor: true, textColor: true, - fontSize: fontSize.size, + fontSize: contrastCheckFontSize, }, ], colorDetector: { targetRef: ref }, @@ -80,7 +91,7 @@ function PostAuthorEdit( { initialOpen: true, }, }, - [ fontSize.size ] + [ contrastCheckFontSize ] ); const { align, showAvatar, showBio, byline } = attributes; @@ -95,17 +106,13 @@ function PostAuthorEdit( { } ); } - let avatarSize = DEFAULT_AVATAR_SIZE; - if ( !! attributes.avatarSize ) { - avatarSize = attributes.avatarSize; - } - - const blockClassNames = classnames( 'wp-block-post-author', { - [ fontSize.class ]: fontSize.class, - } ); - const blockInlineStyles = { - fontSize: fontSize.size ? fontSize.size + 'px' : undefined, - }; + const classNames = useMemo( () => { + return { + block: classnames( 'wp-block-post-author', { + [ `has-text-align-${ align }` ]: align, + } ), + }; + }, [ align ] ); return ( <> @@ -153,12 +160,6 @@ function PostAuthorEdit( { } /> - - - { InspectorControlsColorPanel } @@ -180,19 +181,15 @@ function PostAuthorEdit( { -
+
{ showAvatar && authorDetails && (
{ @@ -205,12 +202,6 @@ 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 } ) @@ -221,7 +212,7 @@ function PostAuthorEdit( { { authorDetails?.name }

{ showBio && ( -

+

{ 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( '
', $class_attribute, $style_attribute ) . - ( ! empty( $attributes['showAvatar'] ) ? '' : '' ) . - '' . + ( ! empty( $attributes['showAvatar'] ) ? '' : '' ) . + sprintf( '
', $content_class_attribute, $content_style_attribute ) . + ( ! empty( $byline ) ? '' : '' ) . + '' . + ( ! empty( $attributes['showBio'] ) ? '' : '' ) . + '
' . '
'; } diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss index 86df3428831421..53fe560773d7a6 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 { @@ -15,7 +15,8 @@ } &__bio { - margin-top: $grid-unit-10; + margin-bottom: $grid-unit-10; + font-size: 0.7em; } &__content { diff --git a/packages/e2e-tests/fixtures/blocks/core__post-author.json b/packages/e2e-tests/fixtures/blocks/core__post-author.json index f780184a547e9c..b5f4fcb918a997 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": "" }