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

[Query block]: Add Posts List variation #26990

Merged
merged 6 commits into from
Nov 17, 2020

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Nov 16, 2020

Description

Resolves: #26193

This PR adds a simple Query block variation of Posts List, which shows latests posts excluding the sticky posts. After selecting this variation from the inserter, the Query's Placeholder is shown to select a 'design'(InnerBlocks actually) variation, like Post Title + Post Excerpt.

In this PR I have also exposed the __experimentalGetMatchingVariation util to have better information in the Placeholder of Query block.

@github-actions
Copy link

github-actions bot commented Nov 16, 2020

Size Change: +295 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-editor/index.js 133 kB -169 B (0%)
build/block-library/index.js 147 kB +177 B (0%)
build/components/index.js 171 kB +263 B (0%)
build/core-data/index.js 14.8 kB +3 B (0%)
build/data-controls/index.js 827 B +6 B (0%)
build/edit-post/style-rtl.css 6.51 kB -3 B (0%)
build/edit-post/style.css 6.49 kB -2 B (0%)
build/edit-site/style-rtl.css 3.98 kB +4 B (0%)
build/edit-site/style.css 3.98 kB +4 B (0%)
build/edit-widgets/style-rtl.css 3.16 kB +6 B (0%)
build/edit-widgets/style.css 3.16 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.77 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.71 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.92 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.9 kB 0 B
build/data/index.js 8.74 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-site/index.js 23.3 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.05 kB 0 B
build/rich-text/index.js 13.3 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@mapk
Copy link
Contributor

mapk commented Nov 16, 2020

Thanks, @ntsekouras!

Can we make sure the Placeholder screen updates to reflect the block name? I noticed the Embed block does this. Example below.

Screen Shot 2020-11-16 at 12 56 55 PM

But this particular block variations isn't acting this way.

posts-list

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>
@ntsekouras
Copy link
Contributor Author

Can we make sure the Placeholder screen updates to reflect the block name? I noticed the Embed block does this. Example below.

I'll check it out @mapk - thanks for reviewing. I'll see what I can do to extend the Variation Picker component.

pages: 1,
offset: 0,
postType: 'post',
categoryIds: [],
Copy link
Member

Choose a reason for hiding this comment

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

It's pretty unfortunate that it needs to be all duplicated here because of how the query object was shaped:

"perPage": null,
"pages": 1,
"offset": 0,
"postType": "post",
"categoryIds": [],
"tagIds": [],
"order": "desc",
"orderBy": "date",
"author": "",
"search": "",
"exclude": [],
"sticky": ""

It raises a question of whether all those settings shouldn't be top-level attributes. It's clearly out of scope for this PR but I wanted to mention it. I understand that it's simpler to pass query through context this way, but at the same time, we lose some benefits that more granular attributes provide, like type validation, the flexibility to change the default value without breaking backward compatibility, less metadata saved in the content when defaults are used. An interesting fact is that the Latest Posts block defines all attributes as top-level fields:

"attributes": {
"categories": {
"type": "array",
"items": {
"type": "object"
}
},
"selectedAuthor": {
"type": "number"
},
"postsToShow": {
"type": "number",
"default": 5
},
"displayPostContent": {
"type": "boolean",
"default": false
},
"displayPostContentRadio": {
"type": "string",
"default": "excerpt"
},
"excerptLength": {
"type": "number",
"default": 55
},
"displayAuthor": {
"type": "boolean",
"default": false
},
"displayPostDate": {
"type": "boolean",
"default": false
},
"postLayout": {
"type": "string",
"default": "list"
},
"columns": {
"type": "number",
"default": 3
},
"order": {
"type": "string",
"default": "desc"
},
"orderBy": {
"type": "string",
"default": "date"
},
"displayFeaturedImage": {
"type": "boolean",
"default": false
},
"featuredImageAlign": {
"type": "string",
"enum": [
"left",
"center",
"right"
]
},
"featuredImageSizeSlug": {
"type": "string",
"default": "thumbnail"
},
"featuredImageSizeWidth": {
"type": "number",
"default": null
},
"featuredImageSizeHeight": {
"type": "number",
"default": null
},
"addLinkToFeaturedImage": {
"type": "boolean",
"default": false
}
},

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, I know but this applies for all blocks with object properties. We had discussed that in my PR for this:#26162, but for back compat it was closed.

It raises a question of whether all those settings shouldn't be top-level attributes.

This is something to consider for sure. With my work on Query, I don't think it will have many other properties, so a rework could be considered.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@ntsekouras
Copy link
Contributor Author

ntsekouras commented Nov 17, 2020

Can we make sure the Placeholder screen updates to reflect the block name? I noticed the Embed block does this. Example below.

Hey @mapk - I checked again the code for embed block and variations and there is no way we can know if we came to the Placeholder from a block variation. I had started exploring this(to know if it came from a variation) here: #26105 but after discussions seemed better to close it.

With embed block the case is different because we have a unique attribute (providerNameSlug) that allows to match the variation, because it's provided in every embed variation. So for now for Query, this is not possible..

--edit: Actually I exposed and used the simple implementation for matching a block variation and now is showing the variation's title in the Placeholder.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Let's move forward with the current implementation if @mapk is fine with how it works at the moment.

I think that using __experimentalGetMatchingVariation is fine for now. Assuming it turns out to be useful as a general-purpose utility, we might need to convert it to a store selector at some point.

Copy link
Contributor

@mapk mapk left a comment

Choose a reason for hiding this comment

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

Looks good, @ntsekouras!

I think that icon for the block is getting over used, but we can revisit that in another PR.

Screen Shot 2020-11-17 at 7 28 05 AM

@ntsekouras ntsekouras merged commit 63bfdcb into master Nov 17, 2020
@ntsekouras ntsekouras deleted the add/query-variation-posts-list branch November 17, 2020 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Loop Affects the Query Loop Block
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a Posts List
3 participants