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.

Sign up for GitHub

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

Jump to bottom

Update Post Author block to use __experimentalColor and __experimentalLineHeight #23044

Merged
merged 11 commits into from
Jul 20, 2020
Merged

Update Post Author block to use __experimentalColor and __experimentalLineHeight #23044

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
55c199b
add the new support flag
Addison-Stavlo Jun 9, 2020
16cb05f
remove the old
Addison-Stavlo Jun 9, 2020
319c117
remove unnecessary attributes
Addison-Stavlo Jun 9, 2020
ddd51f6
updated colors in php
Addison-Stavlo Jun 9, 2020
d17d371
add link color support
Addison-Stavlo Jun 9, 2020
b84f453
update background classname
Addison-Stavlo Jun 11, 2020
d4bcbfd
update from master
Addison-Stavlo Jul 14, 2020
2a33335
gutting the unnecessary
Addison-Stavlo Jul 14, 2020
fdbdaef
add style rules to add the set link color
Addison-Stavlo Jul 16, 2020
c3c40a5
Merge branch 'master' into update/post-author-block-experimental-colors
Addison-Stavlo Jul 16, 2020
ab224b2
remove important style
Addison-Stavlo Jul 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 6 additions & 13 deletions packages/block-library/src/post-author/block.json
View file
Open in desktop
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
View file
Open in desktop
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 •
edited
Loading

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
View file
Open in desktop
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
View file
Open in desktop
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
4 changes: 3 additions & 1 deletion packages/block-library/src/post-author/style.scss
View file
Open in desktop
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,8 @@
font-weight: bold;
margin: 0;
}
}

.wp-block-post-author.has-link-color a {
color: var(--wp--style--color--link) !important;
}