Make Placeholder component "element-query-like" responsive. #18745

jasmussen · 2019-11-26T10:45:29Z

This PR is courtesy of @jameslnewell who created the initial work in master...jameslnewell:element-queries. I added some additional commits but did not have the necessary access to James' repository, so I pushed it to origin instead. Let there be no doubt, props: @jameslnewell.

What this PR does, is make the <Placeholder /> component responsive using a custom form of element queries.

Before:

After:

The above two screenshots also show why normal responsiveness is not sufficient. The Placeholder component is UI that needs to adapt to various nesting scenarios and dimensions.

To make that happen, I created 3 classes:

Larger than 320px applies size-lg (size large) to the Placeholder component.
Between 320px and 160px applies size-md (size medium)
Below 160px, applies size-sm (size small)

For the time being, this solves a problem with the Placeholder component. However we have many other UI elements that can benefit from responsive improvements, so I would love to hear your thoughts on how we can refactor these utility classes to be perhaps more automated or generic or at the very least easy to apply beyond just this Placeholder component.

Design-wise I leveraged those utility classes to reduce the UI as the component grows smaller, including hiding descriptions and icons when there isn't space. I simply removed the Upload icon — it does not feel like it adds value but in fact adds visual clutter instead. Additionally, I left-aligned the text, Placeholder labels, and buttons. This most literally anchors the content in a way that really helps reduce the visual appearance when more than one placeholder is visible on the page at the same time, which is going to be increasingly likely as templates grow in strength!

Your thoughts are very welcome.

jameslnewell · 2019-11-26T10:54:57Z

packages/components/package.json

@@ -44,6 +44,7 @@
 		"mousetrap": "^1.6.2",
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
+		"react-resize-aware": "^3.0.0-beta.7",


Relying on a beta probably isn't ideal, but their method of measuring DOM changes is superior to other packages like react-use-dimensions because it will trigger an update even when content changes outside of a render() cycle. Maybe react-use-dimensions is enough for this use case 🤷‍♂

Edit: With a polyfill, https://www.npmjs.com/package/@rehooks/component-size could work

Apart from window resizing situations (and we know only devs and designers do that, right? 😂 ) is there any real need to update outside of render? If not, react-use-dimensions seems perfect for what we need. I'd be reluctant to go the component-size route because that polyfill for resize-observer is massive 🙀

Apart from window resizing situations (and we know only devs and designers do that, right? 😂 ) is there any real need to update outside of render?

The update-on-resize is nice, but definitely something we can live without. Worst case, seems like we could apply a transition: width 0.2s ease; and at least have the resizing happen in a way that looks less jarring than an instant snap. 👍 👍

Its not just window resizing that might cause the dimensions to change. If the width of another element grows or shrinks it might change dimensions of this element without this component having been re-rendered. The use of the iframe is a neat way of detecting these layout changes (roughly, when the iframe dimensions change it fires the resize event on the iframe window).

Given the multi-column layouts in the above screenshots, I think this case is probably something that we need to account for?

The polyfill is definitely huge! Can't wait for a native implementation that works in all browsers! Maybe we can offer the library author some assistance to get it out of beta.

Its not just window resizing that might cause the dimensions to change.

This is a good point I had missed. Here's a use-case:

I'll reach out to the developer and see how we might be able to help.

Edit: Or we could refactor to use v2

@jasmussen The author has released a new version for us! Try bumping the version to ^3.0.0.

jasmussen · 2019-11-26T10:55:47Z

As you can see from the deepest nesting level for the image, even more work is necessary, but this is a good start that improves the situation. Likely for the additional work, it might be worth looking at that in light of the new efforts ongoing in #18667.

jameslnewell · 2019-11-26T10:56:22Z

packages/components/src/placeholder/style.scss

@@ -1,15 +1,15 @@
 .components-placeholder {
+	position: relative;


This is required to position and size the resizeListener correctly.

That comment might good in code.

melchoyce · 2019-11-26T17:34:26Z

Tried to see if some other web builders use similar placeholders. Wix, Weebly, and Squarespace pre-fill in placeholders with demo content or fake images, instead of opting for showing buttons like we do, so they aren't much help.

Does any other CMS use block placeholders like we do?

Notion works similarly to us, but has similar responsive problems on the desktop app. Anyone have the mobile app and can check how placeholders work there?

chaselangr · 2019-11-26T19:48:38Z

Mailchimp has a block placeholder that is pretty similar to the WordPress interface. Mailchimp uses a single button for replacing an image rather than options for URL, media library, and direct upload. Personally, I think it would work well if the buttons had the same width/max-width and the text was centered on the button. I think this might add some continuity and possibly make them more accessible for mobile users.

jasmussen · 2019-11-27T10:03:10Z

LivingDocs uses a square cross which is very classic Desktop Publishing-like, but with no buttons.

I think the element query nature, of which this PR is just a very first early attempt, is the key way to improve this, as it allows us to optimize for both large and small contexts.

The thing is, the placeholder or "setup state" for the block is, to many blocks, the best UI to show next steps, when there's space. Take the Cover block, it feels like it's using the color swatches in a really nice way, letting you quickly pick a color and get moving!

ZebulanStanphill · 2019-11-29T02:56:01Z

I like the shift to left-aligned text. It feels slightly cleaner and easier to read to me.

At the smallest breakpoint, I wonder if the placeholder could be reduced to just a single button that says "Add image…" or "Add media…" or something like that, with no placeholder title above. Would that reduce accessibility?

Also, should there be an attempt to make the full placeholder description available at the smaller breakpoints somehow? Perhaps an info icon that opens a pop-up containing the description?

jasmussen · 2019-12-02T09:02:22Z

At the smallest breakpoint, I wonder if the placeholder could be reduced to just a single button that says "Add image…" or "Add media…" or something like that, with no placeholder title above. Would that reduce accessibility?

It seems like it should be fine. The block name, even if a placeholder, will be announced as such, and when you tab into the "Add..." button it's behavior should be clear. Elements that are display: none; will not be announced or focused. Here's the full placeholder:

jasmussen · 2019-12-03T07:39:43Z

What's missing here?

As the conversation continues in #18800, it could make sense to merge this as a first step on the path.

jasmussen · 2019-12-03T07:46:31Z

Rebased and gave it a good squash.

jasmussen · 2019-12-16T07:56:16Z

Thank you @jameslnewell ! I bumped in f26db0c#diff-fcafbf9322186d9a2998fd8c67903791R49. I also gave this a good rebase and a squash to simplify a final review. Let me know if things look as they should!

karmatosed · 2019-12-16T14:51:28Z

Testing this, I would love to see a variation in the 3 button's but for now, with our existing patterns, I think it's ok to ship.

jasmussen · 2019-12-18T19:26:32Z

It looks like the test failure is legitimate:

✕ should not display an instructions element when smaller than 320px (4ms)

It's probably because in the initial version of this PR, the resize-aware was used to simply not output the description node below the 320px breakpoint, but I moved that to be CSS classes with display: none;. @jameslnewell do you think you could help me fix up those tests? I found some copy pasta that I might be able to get to work, but my Jest skills are pretty limited.

youknowriad · 2019-12-19T08:49:57Z

@jasmussen I'll look at the tests.

youknowriad · 2019-12-19T09:05:36Z

I removed the "instructions" hiding unit test because it assumed the hiding was done in JS but it's done in CSS and it's harder to test that way.

youknowriad · 2019-12-19T09:06:43Z

I removed the "instructions" hiding unit test because it assumed the hiding was done in JS but it's done in CSS and it's harder to test that way.

youknowriad

Nice PR

jasmussen · 2019-12-19T09:14:25Z

Thank you Riad, I'll merge when the checks pass. Props @jameslnewell.

vicolaspetru · 2020-01-14T12:40:21Z

After update to 7.2.0, placeholder instructions is hidden, but why? I saw the class .is-small being added to placeholder component.

The token fields looks broken:

aduth · 2020-01-22T20:44:00Z

packages/components/src/placeholder/index.js

+		'components-placeholder',
+		( width >= 320 ? 'is-large' : '' ),
+		( width >= 160 && width < 320 ? 'is-medium' : '' ),
+		( width < 160 ? 'is-small' : '' ),


One thing I note here is that in the documentation of react-resize-aware, it mentions how width would be null the first time the component is rendered:

This object contains the width and height properties, these properties are going to be null before the component rendered, and will return a number after the component rendered.

https://www.npmjs.com/package/react-resize-aware#api

The "fun" thing about null is that, in the context of these sorts of comparisons, it's treated the same as zero (related, specification).

So:

let width = null; console.log( width < 160 ); // true

So we'll always apply the is-small class on the first render, even if it ends up being that the element will actually occupy a large width.

I guess my question is:

Must we have at least one of is-large, is-medium, or is-small, and therefore it would be okay to use is-small as the default until an accurate value can be determined?

Otherwise, would it be more correct to wait to assign any of these modifier classes until the true width can be determined?

For context, I think this may be contributing to some intermittent failures in the end-to-end tests, where we're trying to click "Try again" when an embed fails, but the placement of the button might be shifting around because it is rendered after the "instructions" which are hidden while is-small class is applied.

I've opened #19825 for continued discussion.

This change updates the margins of the notice UI added to block placeholders using the `withNotices` mixin. The update was necessary after #18745 which made the content of block placeholders left-aligned.

jasmussen added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. Needs Technical Feedback Needs testing from a developer perspective. labels Nov 26, 2019

jasmussen requested review from aduth and jorgefilipecosta November 26, 2019 10:45

jasmussen requested review from ajitbohra, chrisvanpatten, ellatrix, talldan and youknowriad as code owners November 26, 2019 10:45

jasmussen self-assigned this Nov 26, 2019

jameslnewell reviewed Nov 26, 2019

View reviewed changes

jasmussen mentioned this pull request Nov 28, 2019

Enhance the Placeholder to better scale and adapt #18800

Closed

jasmussen force-pushed the add/element-queries branch 2 times, most recently from 565ffa8 to 0c2cac0 Compare December 3, 2019 07:46

jameslnewell mentioned this pull request Dec 13, 2019

What tasks are left to do in order to take the library out of beta? FezVrasta/react-resize-aware#39

Closed

jasmussen force-pushed the add/element-queries branch 2 times, most recently from 8b41c29 to 734d155 Compare December 16, 2019 07:54

karmatosed removed the Needs Design Feedback Needs general design feedback. label Dec 16, 2019

James Newell and others added 2 commits December 18, 2019 16:56

Hide Placeholder instructions when smaller than 320px

2468265

React Resize Aware.

e484608

jasmussen force-pushed the add/element-queries branch from 7904999 to e484608 Compare December 18, 2019 15:56

Fix unit tests

3ee7908

youknowriad approved these changes Dec 19, 2019

View reviewed changes

jasmussen merged commit 8b1f05b into master Dec 19, 2019

jasmussen deleted the add/element-queries branch December 19, 2019 09:38

jasmussen mentioned this pull request Dec 20, 2019

Image block: show media library preview as placeholder #15773

Closed

youknowriad added this to the Gutenberg 7.2 milestone Jan 6, 2020

davemart-in mentioned this pull request Jan 16, 2020

Update JP block style consistency after core update Automattic/jetpack#14371

Merged

aduth reviewed Jan 22, 2020

View reviewed changes

aduth mentioned this pull request Jan 22, 2020

Components: Apply width-based modifier classes to Placeholder only when width is known #19825

Merged

thomasguillot mentioned this pull request Jan 24, 2020

UI Quirks Since Gutenberg 7.2 Automattic/newspack-blocks#329

Closed

aduth mentioned this pull request Jan 30, 2020

[RNMobile] Create cross platform useResizeObserver() hook #19918

Merged

6 tasks

This was referenced Feb 4, 2020

Block Placeholder: Notices #19671

Closed

Fix alignment of notice lists in block placeholders #20024

Merged

epiqueras mentioned this pull request Feb 4, 2020

Block Editor: Fix block placeholder notices alignment. #20029

Closed

6 tasks

aduth mentioned this pull request Feb 25, 2020

Why is the horizontal width fixed at 300 pixels in URLInput? #13474

Closed

aduth mentioned this pull request Mar 5, 2020

E2E Tests: Await embed error placeholder size class #20668

Merged

griffbrad mentioned this pull request Aug 4, 2020

Element queries! ItsJonQ/g2#7

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make Placeholder component "element-query-like" responsive. #18745

Make Placeholder component "element-query-like" responsive. #18745

jasmussen commented Nov 26, 2019 •

edited

Loading

jameslnewell Nov 26, 2019 •

edited

Loading

tellthemachines Dec 13, 2019

jasmussen Dec 13, 2019

jameslnewell Dec 13, 2019 •

edited

Loading

jasmussen Dec 13, 2019

jameslnewell Dec 13, 2019 •

edited

Loading

jameslnewell Dec 15, 2019

jasmussen commented Nov 26, 2019

jameslnewell Nov 26, 2019

youknowriad Dec 17, 2019

melchoyce commented Nov 26, 2019

chaselangr commented Nov 26, 2019

jasmussen commented Nov 27, 2019

ZebulanStanphill commented Nov 29, 2019 •

edited

Loading

jasmussen commented Dec 2, 2019

jasmussen commented Dec 3, 2019

jasmussen commented Dec 3, 2019

jasmussen commented Dec 16, 2019

karmatosed commented Dec 16, 2019

jasmussen commented Dec 18, 2019

youknowriad commented Dec 19, 2019

youknowriad commented Dec 19, 2019

youknowriad commented Dec 19, 2019

youknowriad left a comment

jasmussen commented Dec 19, 2019

vicolaspetru commented Jan 14, 2020

aduth Jan 22, 2020

aduth Jan 22, 2020

aduth Jan 22, 2020

		@@ -1,15 +1,15 @@
		.components-placeholder {
		position: relative;

Make Placeholder component "element-query-like" responsive. #18745

Make Placeholder component "element-query-like" responsive. #18745

Conversation

jasmussen commented Nov 26, 2019 • edited Loading

jameslnewell Nov 26, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jameslnewell Dec 13, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jameslnewell Dec 13, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented Nov 26, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

melchoyce commented Nov 26, 2019

chaselangr commented Nov 26, 2019

jasmussen commented Nov 27, 2019

ZebulanStanphill commented Nov 29, 2019 • edited Loading

jasmussen commented Dec 2, 2019

jasmussen commented Dec 3, 2019

jasmussen commented Dec 3, 2019

jasmussen commented Dec 16, 2019

karmatosed commented Dec 16, 2019

jasmussen commented Dec 18, 2019

youknowriad commented Dec 19, 2019

youknowriad commented Dec 19, 2019

youknowriad commented Dec 19, 2019

youknowriad left a comment

Choose a reason for hiding this comment

jasmussen commented Dec 19, 2019

vicolaspetru commented Jan 14, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented Nov 26, 2019 •

edited

Loading

jameslnewell Nov 26, 2019 •

edited

Loading

jameslnewell Dec 13, 2019 •

edited

Loading

jameslnewell Dec 13, 2019 •

edited

Loading

ZebulanStanphill commented Nov 29, 2019 •

edited

Loading