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

Update post author block functionality and visual parity #22877

Merged
merged 30 commits into from
Jun 8, 2020
Merged

Update post author block functionality and visual parity #22877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
0fcbec0
added more font sizes to control
Addison-Stavlo Jun 3, 2020
9c84c8b
reorg panel bodys
Addison-Stavlo Jun 3, 2020
ae05c4a
separated inline styles for editor pieces
Addison-Stavlo Jun 3, 2020
521d081
added fontSizes to attributes
Addison-Stavlo Jun 3, 2020
c61cd03
added custom sizes to attributes
Addison-Stavlo Jun 3, 2020
03cea3d
color parity between front end and editor
Addison-Stavlo Jun 3, 2020
5df1635
applied font size selections to front end
Addison-Stavlo Jun 4, 2020
136ecc5
formatting?
Addison-Stavlo Jun 4, 2020
e2be769
php format
Addison-Stavlo Jun 4, 2020
0381672
only show text size pickers for active fields
Addison-Stavlo Jun 4, 2020
723e327
add site editor classes for editor styles
Addison-Stavlo Jun 4, 2020
e0b57f3
more editor/FE parity
Addison-Stavlo Jun 4, 2020
e12fbb1
fontsize fixes in editor
Addison-Stavlo Jun 4, 2020
250238a
refactored editor font sizes to usememo
Addison-Stavlo Jun 4, 2020
49af117
change to correct classname for text alignment
Addison-Stavlo Jun 4, 2020
e99b3ae
add default size for author font
Addison-Stavlo Jun 4, 2020
4e8e8c5
define some defaults
Addison-Stavlo Jun 4, 2020
458e095
weird parity mismatch fix
Addison-Stavlo Jun 4, 2020
039c4f5
remove default fontSize, ruins customFontSize =(
Addison-Stavlo Jun 5, 2020
49c0e79
replace fontSize implementation with __experimentalFontSize
Addison-Stavlo Jun 5, 2020
f08f7f2
relative font sizes for other sections
Addison-Stavlo Jun 5, 2020
5aa9fca
derp a comment
Addison-Stavlo Jun 5, 2020
5b044d7
updated fontSize being fed to contrastCheckers
Addison-Stavlo Jun 5, 2020
b34e3d0
php format
Addison-Stavlo Jun 5, 2020
84a9ca4
remove unused declarations
Addison-Stavlo Jun 5, 2020
d0c4412
fix font colors with has-background-color class
Addison-Stavlo Jun 5, 2020
d425b8b
removed unnecessary classes from editor styles
Addison-Stavlo Jun 5, 2020
a915828
php format?
Addison-Stavlo Jun 5, 2020
f0e51cc
update test fixture
Addison-Stavlo Jun 6, 2020
5addca1
fix editor style regression
Addison-Stavlo Jun 8, 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
9 changes: 6 additions & 3 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 @@ -6,10 +6,12 @@
"type": "string"
},
"avatarSize": {
"type": "number"
"type": "number",
"default": 48
},
"showAvatar": {
"type": "boolean"
"type": "boolean",
"default": true
},
"showBio": {
"type": "boolean"
Expand All @@ -35,6 +37,7 @@
"postId"
],
"supports": {
"html": false
"html": false,
"__experimentalFontSize": true
}
}
89 changes: 40 additions & 49 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,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(
Expand All @@ -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,
Expand All @@ -72,15 +83,15 @@ function PostAuthorEdit( {
{
backgroundColor: true,
textColor: true,
fontSize: fontSize.size,
fontSize: contrastCheckFontSize,
},
],
colorDetector: { targetRef: ref },
colorPanelProps: {
initialOpen: true,
},
},
[ fontSize.size ]
[ contrastCheckFontSize ]
Copy link
Contributor

Choose a reason for hiding this comment

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

We need to change this to __experimentalUseColors.

Copy link
Contributor

Choose a reason for hiding this comment

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

(In a different PR.)

);

const { align, showAvatar, showBio, byline } = attributes;
Expand All @@ -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 (
<>
Expand Down Expand Up @@ -153,12 +160,6 @@ function PostAuthorEdit( {
}
/>
</PanelBody>
<PanelBody title={ __( 'Text settings' ) }>
<FontSizePicker
value={ fontSize.size }
onChange={ setFontSize }
/>
</PanelBody>
</InspectorControls>

{ InspectorControlsColorPanel }
Expand All @@ -180,19 +181,15 @@ function PostAuthorEdit( {

<TextColor>
<BackgroundColor>
<div
ref={ ref }
className={ classnames( blockClassNames, {
[ `has-text-align-${ align }` ]: align,
} ) }
style={ blockInlineStyles }
>
<div ref={ ref } className={ classNames.block }>
{ showAvatar && authorDetails && (
<div className="wp-block-post-author__avatar">
<img
width={ avatarSize }
width={ attributes.avatarSize }
src={
authorDetails.avatar_urls[ avatarSize ]
authorDetails.avatar_urls[
attributes.avatarSize
]
}
alt={ authorDetails.name }
/>
Expand All @@ -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',
] }
Comment on lines -208 to -213
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the reasoning behind this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I figured that if the goal was to have parity with paragraph block's functionalities, that the editable text should be able to have links and the remaining text formatting options. Removing these removes the restrictions and enables them.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think these specific restrictions were put in place because other formatting options don't make sense in the context of a byline.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why restrict it thought? If a user wants a word in their byline to be a link, then all of a sudden a link makes sense in the context of a byline for them. A similar argument for subscript/superscript, etc.

value={ byline }
onChange={ ( value ) =>
setAttributes( { byline: value } )
Expand All @@ -221,7 +212,7 @@ function PostAuthorEdit( {
{ authorDetails?.name }
</p>
{ showBio && (
<p className={ 'wp-block-post-author__bio' }>
<p className="wp-block-post-author__bio">
{ authorDetails?.description }
</p>
) }
Expand All @@ -233,4 +224,4 @@ function PostAuthorEdit( {
);
}

export default withFontSizes( 'fontSize' )( PostAuthorEdit );
export default PostAuthorEdit;
52 changes: 27 additions & 25 deletions packages/block-library/src/post-author/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
63 changes: 39 additions & 24 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 @@ -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' => '',
);
Expand All @@ -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.
Expand All @@ -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,
);
}

/**
Expand All @@ -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;
Expand All @@ -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 ) {
Expand All @@ -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()
Addison-Stavlo marked this conversation as resolved.
Show resolved Hide resolved
);

$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( '<div %1$s %2$s>', $class_attribute, $style_attribute ) .
( ! empty( $attributes['showAvatar'] ) ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
'<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>' : '' ) .
'</div>' .
( ! empty( $attributes['showAvatar'] ) ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
sprintf( '<div %1$s %2$s>', $content_class_attribute, $content_style_attribute ) .
( ! 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>' : '' ) .
'</div>' .
'</div>';
}

Expand Down
Loading