Gutenberg is about to be added in WordPress 5.0 (April 2018 or later).

I started preparing "blocks" for it and one problem I see is that the same "block" can now be inserted on e.g.:

  1. A page template that has 1000px wide content area.
  2. A page template that has 800px wide content area + 200px wide sidebar area.

That makes @media queries not suitable to create proper responsive behaviors. If my "block" has 400px, 600px, 800px and 1000px min-width breakpoints then the "sidebar template" will be rendering the 1000px version of the block when it should be rendering the 800px version of that block.

Hence, I'm thinking of implementing @element queries (such as https://github.com/marcj/css-element-queries) in my plugin but I worry about security issues (since it's JavaScript parsing CSS) and not adhering to WordPress plugin submission standards.

Does anyone have any ideas how the WordPress community (plugin developers) should deal with such situation?

  • Curious to know what you implemented to resolve this. As I dive more deeply into Gutenberg I'm seeing plenty of divergent path options for creating custom blocks. But in the end, the output is markup and the appropriate CSS can be enqueued per block to solve the responsive challenges you highlighted in your Q above. – jdm2112 Jul 9 at 15:54

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.