Skip to content

Commit

Permalink
Update Post Author block to use __experimentalColor and __experimenta…
Browse files Browse the repository at this point in the history 
…lLineHeight (#23044)

* add the new support flag

* remove the old

* remove unnecessary attributes

* updated colors in php

* add link color support

* update background classname

* gutting the unnecessary

* add style rules to add the set link color

* remove important style
  • Loading branch information
@Addison-Stavlo
Addison-Stavlo authored Jul 20, 2020
1 parent 5221168 commit 85bc090
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 222 deletions.
19 changes: 6 additions & 13 deletions packages/block-library/src/post-author/block.json
View file
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
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,
]
);
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 } )
}
/>
) }
<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
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
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 ) {
// 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
View file
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);
}

0 comments on commit 85bc090

Please sign in to comment.