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

Latest Posts Block: Make author's byline dynamic and add spacing control to layout #36472

Closed
wants to merge 8 commits into from
Closed

Latest Posts Block: Make author's byline dynamic and add spacing control to layout #36472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e423a3f
new attributes: byline and spacing
shadigaafar Nov 14, 2021
4023795
Update: dynamic byline text and spacing control
shadigaafar Nov 14, 2021
8741431
links disabled
shadigaafar Nov 14, 2021
6f47d42
changing from flex to grid
shadigaafar Nov 14, 2021
6592eff
Merge branch 'WordPress:trunk' into trunk
shadigaafar Nov 24, 2021
b463c43
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into t…
shadigaafar Nov 24, 2021
5cdb783
make elemets wrap, and use 'gap' instead of margin
shadigaafar Nov 24, 2021
f883b6c
Merge branch 'WordPress:trunk' into trunk
shadigaafar Nov 24, 2021
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
7 changes: 7 additions & 0 deletions packages/block-library/src/latest-posts/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,13 @@
"addLinkToFeaturedImage": {
"type": "boolean",
"default": false
},
"byline": {
"type": "string"
},
"spacing": {
"type": "string",
"default": "20px"
}
},
"supports": {
Expand Down
42 changes: 34 additions & 8 deletions packages/block-library/src/latest-posts/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,18 @@ import {
RadioControl,
RangeControl,
Spinner,
TextControl,
ToggleControl,
ToolbarGroup,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';
import {
InspectorControls,
BlockAlignmentToolbar,
BlockControls,
__experimentalImageSizeControl as ImageSizeControl,
__experimentalUnitControl as UnitControl,
useBlockProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -75,6 +77,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
featuredImageSizeWidth,
featuredImageSizeHeight,
addLinkToFeaturedImage,
byline,
spacing,
} = attributes;
const {
imageSizeOptions,
Expand Down Expand Up @@ -260,6 +264,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
setAttributes( { displayPostDate: value } )
}
/>
<TextControl
label={ __( 'Byline Text' ) }
value={ byline }
onChange={ ( value ) => setAttributes( { byline: value } ) }
/>
</PanelBody>

<PanelBody title={ __( 'Featured image settings' ) }>
Expand Down Expand Up @@ -352,7 +361,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
authorList={ authorList ?? [] }
selectedAuthorId={ selectedAuthor }
/>
</PanelBody>

<PanelBody title={ __( 'Layout Settings' ) }>
{ postLayout === 'grid' && (
<RangeControl
label={ __( 'Columns' ) }
Expand All @@ -372,6 +383,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
required
/>
) }
<UnitControl
label={ __( 'Spacing' ) }
value={ spacing }
onChange={ ( value ) =>
setAttributes( { spacing: value } )
}
/>
</PanelBody>
</InspectorControls>
);
Expand Down Expand Up @@ -430,7 +448,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
<BlockControls>
<ToolbarGroup controls={ layoutControls } />
</BlockControls>
<ul { ...blockProps }>
<ul
{ ...blockProps }
style={ postLayout === 'grid' ? { gridGap: spacing } : null }
>
{ displayPosts.map( ( post, i ) => {
const titleTrimmed = invoke( post, [
'title',
Expand Down Expand Up @@ -494,7 +515,14 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
);

return (
<li key={ i }>
<li
key={ i }
style={
postLayout === 'list'
? { marginBottom: spacing }
: null
}
>
{ renderFeaturedImage && (
<div className={ imageClasses }>
{ addLinkToFeaturedImage ? (
Expand All @@ -518,11 +546,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
</a>
{ displayAuthor && currentAuthor && (
<div className="wp-block-latest-posts__post-author">
{ sprintf(
/* translators: byline. %s: current author. */
__( 'by %s' ),
currentAuthor.name
) }
{ byline
? `${ byline } ${ currentAuthor.name }`
: currentAuthor.name }
</div>
) }
{ displayPostDate && post.date_gmt && (
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/latest-posts/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
}
}

.wp-block-latest-posts a {
pointer-events: none;
}

.wp-block-latest-posts li a > div {
display: inline;
}
Expand Down
12 changes: 9 additions & 3 deletions packages/block-library/src/latest-posts/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function render_block_core_latest_posts( $attributes ) {
foreach ( $recent_posts as $post ) {
$post_link = esc_url( get_permalink( $post ) );

$list_items_markup .= '<li>';
$list_items_markup .= isset( $attributes['postLayout'] ) && 'list' === $attributes['postLayout'] ? sprintf('<li style="margin-bottom: %s;">', $attributes['spacing']) : '<li>';

if ( $attributes['displayFeaturedImage'] && has_post_thumbnail( $post ) ) {
$image_style = '';
Expand Down Expand Up @@ -112,7 +112,7 @@ function render_block_core_latest_posts( $attributes ) {
$author_display_name = get_the_author_meta( 'display_name', $post->post_author );

/* translators: byline. %s: current author. */
$byline = sprintf( __( 'by %s' ), $author_display_name );
$byline = isset( $attributes['byline'] ) ? implode(' ', array( $attributes['byline'], $author_display_name ) ): $author_display_name;

if ( ! empty( $author_display_name ) ) {
$list_items_markup .= sprintf(
Expand Down Expand Up @@ -183,8 +183,14 @@ function render_block_core_latest_posts( $attributes ) {
$class .= ' has-author';
}

$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
$inlineStyle = '';

if( isset( $attributes['postLayout'] ) && 'grid' === $attributes['postLayout'] ) {
$gap = $attributes['spacing'];
$inlineStyle .= "grid-gap: $gap;";
}

$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class , 'style' => $inlineStyle) );
return sprintf(
'<ul %1$s>%2$s</ul>',
$wrapper_attributes,
Expand Down
18 changes: 7 additions & 11 deletions packages/block-library/src/latest-posts/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,20 @@
}

&.is-grid {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 1.25em;
padding: 0;

li {
margin: 0 1.25em 1.25em 0;
margin: 0;
width: 100%;
}
}

@include break-small {
@include break-xlarge {
@for $i from 2 through 6 {
&.columns-#{ $i } li {
width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));

&:nth-child( #{ $i }n ) {
margin-right: 0;
}
&.columns-#{ $i } {
grid-template-columns: repeat($i, 1fr);
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/post-template/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,12 @@
margin-left: 0;
list-style: none;
}

.wp-block-post-template {
.is-root-container {
padding-left: 0;
padding-right: 0;
}

}
}
18 changes: 6 additions & 12 deletions packages/block-library/src/post-template/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,18 @@
flex-direction: row;
display: flex;
flex-wrap: wrap;

gap: 1.25em;
li {
margin: 0 0 1.25em 0;
width: 100%;
flex: 1;
min-width: 250px;
margin: 0;
}

@include break-small {
li {
margin-right: 1.25em;
}

@include break-xlarge {
@for $i from 2 through 6 {
&.is-flex-container.columns-#{ $i } > li {
width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));

&:nth-child( #{ $i }n ) {
margin-right: 0;
}
flex: none;
}
}
}
Expand Down