react - Hook into viewport change?

admin管理员组

文章数量:1122832

i have create a component that will update the viewport "Mobile, Tablet, Desktop" above.

Of course, the user could also change the viewport on the top, but than my settings not synchron to the change.

Is it possible to hook into the JavaScript function() of the above viewport switch? (please see the picture below)

i have create a component that will update the viewport "Mobile, Tablet, Desktop" above.

Of course, the user could also change the viewport on the top, but than my settings not synchron to the change.

Is it possible to hook into the JavaScript function() of the above viewport switch? (please see the picture below)

• react

Share Improve this question asked Apr 4, 2024 at 19:35 Sam Weiss-GamtschiSam Weiss-Gamtschi 133 bronze badges 4

• instead of maintaining your own state, it would be better to pull the data from the central data store, that way it will always be correct. Trying to watch the value and update your own separate tracking state is significantly harder and less reliable, and brittle since this control is not the only way to change the preview viewport – Tom J Nowell ♦ Commented Apr 4, 2024 at 19:47
• Did you mean __experimentalGetPreviewDeviceType to pull the data from central data ? – Sam Weiss-Gamtschi Commented Apr 4, 2024 at 22:25
• yes, you should never be watching UI components to trigger state changes elsewhere. The UI and its DOM elements are disposable/temporary, then can and do get discarded and recreated regularly, and they're generated out of the data, not the other way around. This is why using event handlers doesn't work reliably, but also why the GB devs didn't add JS hooks and filters to every button, because you're not supposed to – Tom J Nowell ♦ Commented Apr 5, 2024 at 11:47
• Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Bot Commented Apr 11, 2024 at 16:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

There is no dedicated hook or event for this to listen for. Instead use the same data core uses to figure this out:

select( 'core/editor' ).getDeviceType()

e.g. in a react component:

const { deviceType } = useSelect( ( select ) => select( 'core/editor' ).getDeviceType(), [] );
return <h1>{ deviceType }</h1>;

Then you can declare deviceType a dependency on any effect or reducer hooks you have

Did you mean __experimentalGetPreviewDeviceType to pull the data from central data ? –

If you do this you'll get a warning that it's deprecated and to use getDeviceType instead.

If you wanted to instead try to listen for the change of the event without using useSelect, you'd need to:

• register to watch core/editor via wp.data's subscribe method
• every time core/editor changes you'd need to double check the device type value to see if it has changed ( you can't subscribe to portions of the store, it's only the entire store )
• when the store changes, and the device type no longer matches your own copy, update your copy of the data
  • note that this copy would need to be in a data store, it can't be in react state
  • you would then need useSelect to fetch your copy, so why bother?
• double check this on every WP release and Gutenberg plugin update as it might change

What Are Device Types?

This may not work how you expect it to, there are 3 device types values, Mobile, Desktop, and Tablet, which are fed into useResizeCanvas:

https://github.com/WordPress/gutenberg/blob/89e926db36949c9c409825fa810b0073421696e0/packages/block-editor/src/components/use-resize-canvas/index.js#L13

This hook then hardcodes the canvas size of the editor based on those 3 strings. There's no configuring these to match your themes breakpoints, and there's no "system" to hook into, or ways to add more.

None of this translates to the PHP/server side, or shows up in themes. There are no ways to store settings on a site/block/template for each device type, it's just how the editor knows which canvas size to show

本文标签： reactHook into viewport change