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

Latest Posts: add grid option and improve front-end rendering #1992

Merged
merged 10 commits into from
Jul 25, 2017

Conversation

mtias
Copy link
Member

@mtias mtias commented Jul 24, 2017

This enhances the latest posts block adding a "grid" layout option.

image

In the future, we'd want to add a columns slider like galleries have.


The front-end rendering seemed quite lackluster and wasn't rendering the date. This also fixes that.

@mtias mtias added [Feature] Blocks Overall functionality of blocks Design labels Jul 24, 2017
$post_date = "<span class='wp-block-latest-posts__post-date'>{$post_the_date}</span>";
}

$posts_content .= "<li><a href='{$post_permalink}'>{$post_title}</a>{$post_date}</li>\n";
Copy link
Member

Choose a reason for hiding this comment

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

The return value of get_permalink() also needs to go through esc_url(), which was missed previously.

The return values of get_the_date() and get_the_title() should probably also go through esc_html().


$posts_content .= "<li><a href='{$post_permalink}'>{$post_title}</a></li>\n";
if ( $attributes['displayPostDate'] ) {
$post_date = "<span class='wp-block-latest-posts__post-date'>{$post_the_date}</span>";
Copy link
Member

Choose a reason for hiding this comment

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

Should not a <time datetime='...'> element be used here?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, sounds like a good update.

}

$class = 'wp-block-latest-posts ' . esc_attr( 'align' . $align );
if ( $attributes['layout'] === 'grid' ) {
Copy link
Member

Choose a reason for hiding this comment

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

Needs condition condition.

@mtias
Copy link
Member Author

mtias commented Jul 24, 2017

Front-end:

image

@melchoyce
Copy link
Contributor

Testing:

image

Changing the number of posts in the Inspector doesn't seem to update the list inside my post content, and the grid is a little wonky.

@mtias
Copy link
Member Author

mtias commented Jul 24, 2017

@melchoyce see #1991

@westonruter westonruter force-pushed the add/latest-posts-grid branch from 534ae27 to 11522a0 Compare July 25, 2017 06:26
@westonruter
Copy link
Member

Rebased to include fix from show-count fix from master. Commit 534ae27c rewritten to c76e54d.

@westonruter
Copy link
Member

Changing the number of posts in the Inspector doesn't seem to update the list inside my post content, and the grid is a little wonky.

Should we prevent flexbox from wrapping entirely until we add support for column counts? How would we know to have a fixed width for a given post in the grid if we don't know the number of columns we intend to show?

@mtias
Copy link
Member Author

mtias commented Jul 25, 2017

I prefer the wrap, even if a bit odd until we add columns, otherwise it can get very squishy:

image

@mtias
Copy link
Member Author

mtias commented Jul 25, 2017

We should get the date format to match (doesn't have to be here).

It would be good to use _wpDateSettings.formats.date at some point.
@mtias
Copy link
Member Author

mtias commented Jul 25, 2017

Updated date format. It'd be nice to use _wpDateSettings.formats.date but PHP and moment.js tokens don't match.

@mtias mtias merged commit 8580da5 into master Jul 25, 2017
@mtias mtias deleted the add/latest-posts-grid branch July 25, 2017 10:00
@westonruter westonruter mentioned this pull request Jul 25, 2017
6 tasks
@melchoyce
Copy link
Contributor

melchoyce commented Jul 25, 2017

I prefer the wrap, even if a bit odd until we add columns, otherwise it can get very squishy:

@mtias Could we try limiting the grid to either two or three columns in a future PR?

@mtias
Copy link
Member Author

mtias commented Jul 25, 2017

I was thinking of adding the column slider. I can see cases where it makes sense to have many in a line, specially if you use the full-width option.

@melchoyce
Copy link
Contributor

Okay, I was thinking just short-term — but it sounds like you're planning on implementing the columns sooner rather than later?

@westonruter
Copy link
Member

Added issue for exporting PHP date format to the client for use by Moment.js: #2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants