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

Update and move some Query filters #25674

Merged
merged 6 commits into from
Sep 29, 2020
Merged

Update and move some Query filters #25674

merged 6 commits into from
Sep 29, 2020

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Sep 28, 2020

Description

Based on many iterations for Query block design here: #25198 and slack channels etc, it seems that filtering will end up in the inspector controls. Although the final design has not yet been found and approved, I think it makes sense to move some of the options we already have in the inspector control to make the Query toolbar less crowded.

This PR also makes a couple of changes.

  1. Change the default template used in Query block from [PostTile, PostContent] to [PostTitle, PostDate, PostExcerpt] that seems to make more sense IMO.
  2. Fix a small bug for waiting the results of tags and categories to show the input control.
  3. Change the inputs posts per page and offset in NumberControls.
  4. Gets the default posts_per_page number from options.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Sep 28, 2020

Size Change: +532 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/a11y/index.js 1.14 kB -1 B
build/block-directory/index.js 8.61 kB +80 B (0%)
build/block-editor/index.js 129 kB +78 B (0%)
build/block-library/editor-rtl.css 8.6 kB +20 B (0%)
build/block-library/editor.css 8.6 kB +19 B (0%)
build/block-library/index.js 135 kB -34 B (0%)
build/components/index.js 168 kB -66 B (0%)
build/components/style-rtl.css 15.4 kB +31 B (0%)
build/components/style.css 15.4 kB +31 B (0%)
build/compose/index.js 9.42 kB +2 B (0%)
build/core-data/index.js 12 kB +27 B (0%)
build/data-controls/index.js 1.27 kB -1 B
build/data/index.js 8.42 kB -13 B (0%)
build/edit-navigation/index.js 10.7 kB +1 B
build/edit-post/index.js 306 kB +1 B
build/edit-site/index.js 20.5 kB -5 B (0%)
build/edit-widgets/index.js 18.1 kB +391 B (2%)
build/edit-widgets/style-rtl.css 2.81 kB +88 B (3%)
build/edit-widgets/style.css 2.81 kB +89 B (3%)
build/editor/index.js 45.4 kB +9 B (0%)
build/format-library/index.js 7.49 kB +1 B
build/rich-text/index.js 13.5 kB -215 B (1%)
build/server-side-render/index.js 2.6 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/annotations/index.js 3.52 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 620 B 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.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/style-rtl.css 7.61 kB 0 B
build/block-library/style.css 7.6 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.5 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/style-rtl.css 6.25 kB 0 B
build/edit-post/style.css 6.24 kB 0 B
build/edit-site/style-rtl.css 3.54 kB 0 B
build/edit-site/style.css 3.54 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/style-rtl.css 3.83 kB 0 B
build/editor/style.css 3.82 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 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 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.55 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 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.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 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.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ItsJonQ
Copy link

ItsJonQ commented Sep 28, 2020

@ntsekouras Haiii! Thanks for looping me into this one.

I can see where you had some trouble with the CSS alignment/widths for these controls x labels.
Inputs and labels have always been a bit random 🙈 . (It's something that I'm hoping will be remedied with the G2 component implementation)

Short note:

Screen Shot 2020-09-28 at 11 44 37 AM

I've made some updates to the base InputControl to accept an labelPosition value of edge, snapping the label and control to the "edges". A new __unstableInputWidth value has been added to allow users to fine-tune widths for the input.

Lastly, spacing for controls have always been determined with <BaseControl />. I've made the update to wrap the items with that in your updated Toolbar UI.

Ideally, you should not have to write custom .scss styles for these things.
Styling (e.g. alignment, width, etc...) should be something that can be adjusted via component props.

Longer notes:

The coupling of labels and controls within Gutenberg's input-based components are too tightly coupled. This leads to either awkward or limited alignment and width styling (both of which you experienced).

Ideally, the widths and alignment for these controls should be standardized, following some sort of grid-based layout (predetermined by the UI system). For advance/custom use cases, the individual "parts" (e.g. Label and InputControl) should be made available as separate pieces, allowing for the user to compose + refine them as needed.

Copy link
Member

@aristath aristath left a comment

Choose a reason for hiding this comment

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

Tested code and confirmed it works.
I did have trouble with an FSE theme and got the This block has encountered an error and cannot be previewed. error on the site-editor screen, but I suppose that is OK?
Since FSE is experimental and this block is also experimental and only available when the FSE experiment is enabled, we don't really have to worry about backwards-compatibility.

Code looks good to me 👍

@ntsekouras
Copy link
Contributor Author

Hey @aristath - thanks for reviewing.

I did have trouble with an FSE theme and got the This block has encountered an error and cannot be previewed. error on the site-editor screen, but I suppose that is OK?

Do you mean with a previous existed query block? I'd like to have a look at it.

Since FSE is experimental and this block is also experimental and only available when the FSE experiment is enabled, we don't really have to worry about backwards-compatibility.

Yes, I think we are okay, since there is going to be a lot of changes soon in Query block.

@aristath
Copy link
Member

Do you mean with a previous existed query block? I'd like to have a look at it.

The issue was in the query block I had in my theme's index.html file (link), you can just install the theme if you want and test it there, or copy-paste the contents of the query in a new post on any theme:

<!-- wp:query {"queryId":1,"query":{"perPage":10,"offset":0,"orderBy":"date"}} -->
<!-- wp:query-loop -->
<!-- wp:post-title {"isLink":true,"linkTarget":"_self"} /-->

<!-- wp:post-content /-->
<!-- /wp:query-loop -->

<!-- wp:query-pagination /-->
<!-- /wp:query -->

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.

4 participants