Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Post Author block to use __experimentalColor and __experimentalLineHeight #23044

Merged
merged 11 commits into from
Jul 20, 2020
19 changes: 6 additions & 13 deletions packages/block-library/src/post-author/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,6 @@
},
"byline": {
"type": "string"
},
"backgroundColor": {
"type": "string"
},
"textColor": {
"type": "string"
},
"customBackgroundColor": {
"type": "string"
},
"customTextColor": {
"type": "string"
}
},
"usesContext": [
Expand All @@ -38,6 +26,11 @@
],
"supports": {
"html": false,
"__experimentalFontSize": true
"__experimentalFontSize": true,
"__experimentalColor": {
"gradients": true,
"linkColor": true
},
"__experimentalLineHeight": true
}
}
138 changes: 37 additions & 101 deletions packages/block-library/src/post-author/edit.js
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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,
]
);
Comment on lines -50 to -69
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we get the font size stuff out of the box with __experimentalFontSize? Yay! 🎉

Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo Jun 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah! Actually, a lot of that goo you highlighted I had to add when I added the __experimentalFontSize but was still using the HOC for colors and needed them to still 'play nice'. Now that we are using the flag for this color hook as well things work much better out of the box and all this gunk is no longer seems required.

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 = [];
Expand Down Expand Up @@ -162,64 +111,51 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
</PanelBody>
</InspectorControls>

{ InspectorControlsColorPanel }

<BlockControls>
<AlignmentToolbar
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
/>
<BlockColorsStyleSelector
TextColor={ TextColor }
BackgroundColor={ BackgroundColor }
>
{ ColorPanel }
</BlockColorsStyleSelector>
</BlockControls>

<TextColor>
<BackgroundColor>
<div ref={ ref } className={ classNames.block }>
{ showAvatar && authorDetails && (
<div className="wp-block-post-author__avatar">
<img
width={ attributes.avatarSize }
src={
authorDetails.avatar_urls[
attributes.avatarSize
]
}
alt={ authorDetails.name }
/>
</div>
) }
<div className="wp-block-post-author__content">
{ ( ! RichText.isEmpty( byline ) ||
isSelected ) && (
<RichText
className="wp-block-post-author__byline"
multiline={ false }
placeholder={ __( 'Write byline …' ) }
value={ byline }
onChange={ ( value ) =>
setAttributes( { byline: value } )
}
/>
) }
<p className="wp-block-post-author__name">
{ authorDetails?.name || __( 'Post Author' ) }
</p>
{ showBio && (
<p className="wp-block-post-author__bio">
{ authorDetails?.description }
</p>
) }
</div>
<div className={ classNames.block }>
{ showAvatar && authorDetails && (
<div className="wp-block-post-author__avatar">
<img
width={ attributes.avatarSize }
src={
authorDetails.avatar_urls[
attributes.avatarSize
]
}
alt={ authorDetails.name }
/>
</div>
</BackgroundColor>
</TextColor>
) }
<div className="wp-block-post-author__content">
{ ( ! RichText.isEmpty( byline ) || isSelected ) && (
<RichText
className="wp-block-post-author__byline"
multiline={ false }
placeholder={ __( 'Write byline …' ) }
value={ byline }
onChange={ ( value ) =>
setAttributes( { byline: value } )
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I imagine this is unrelated to the PR, but it is really weird that the byline is not persisted across all instances of the same author!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... it was set up as an attribute specific to the block for whatever reason. The bio on the other hand is per author.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interesting :p

}
/>
) }
<p className="wp-block-post-author__name">
{ authorDetails?.name || __( 'Post Author' ) }
</p>
{ showBio && (
<p className="wp-block-post-author__bio">
{ authorDetails?.description }
</p>
) }
</div>
</div>
</>
);
}
Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/post-author/editor.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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);
}
110 changes: 4 additions & 106 deletions packages/block-library/src/post-author/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love how much code we're deleting here 💙

// 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.
*
Expand All @@ -117,32 +28,19 @@ 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(),
isset( $attributes['align'] ) ? array( 'has-text-align-' . $attributes['align'] ) : array()
);

$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( '<div %1$s %2$s>', $class_attribute, $style_attribute ) .
return sprintf( '<div %1$s>', $class_attribute ) .
( ! empty( $attributes['showAvatar'] ) ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
sprintf( '<div %1$s %2$s>', $content_class_attribute, $content_style_attribute ) .
'<div class="wp-block-post-author__content">' .
( ! empty( $byline ) ? '<p class="wp-block-post-author__byline">' . $byline . '</p>' : '' ) .
'<p class="wp-block-post-author__name">' . get_the_author_meta( 'display_name', $author_id ) . '</p>' .
( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . get_the_author_meta( 'user_description', $author_id ) . '</p>' : '' ) .
Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/post-author/style.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.wp-block-post-author {
display: flex;
flex-wrap: wrap;
line-height: 1.5;

&__byline {
width: 100%;
Expand All @@ -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);
}