Responsive rules with block themes and theme.json

They’re defined the same way they always have been, in a CSS file.

Do what styling you can using the block editor and theme.json then supplement it with additional CSS in a CSS file. You can enqueue it the same was as a classic theme in functions.php, and if it’s a minor change there’s a custom CSS option in the site editors global styles section.

Block styles and block variations may help here by providing useful point and click UIs that automatically add the HTML classes you need so the user doesn’t have to type them out themselves. You might also find that using the built in layout functions might interfere, e.g. if you were defining flexbox layouts and grid layouts for a group block it would not make sense to turn it into a grid/row/stack.

Enqueue your CSS file the same way you would have done in a classic theme, just be sure to also add it as an editor stylesheet so that the site editor displays things correctly.

Related Posts:

  1. WordPress Gutenberg Embed Blocks Are Not Responsive
  2. Once Again: How to Remove Option from Gutenberg Editor for Specific Block in theme.json
  3. How can I add a color picker to a custom Gutenberg block which includes the default system palette from theme.json?
  4. Setting font sizes in theme.json
  5. Is it possible to disable font sizes on sub blocks only?
  6. How to set the background color of a template part (Header/Footer) in Twenty Twentythree?
  7. How to automatically reload style variant .json?
  8. How can I disable fontSizes of the Paragraph block inside the Quote block with theme.json?
  9. Different style options for the same block depending where it is used
  10. Gutenberg – Shadow settings not available (theme.json)
  11. Theme.json: styles.typography.FontFamily renders as default font in front end but not editor
  12. Gutenberg: Block validation failed
  13. Change order/position of Gutenberg inspector control panel
  14. serialize_blocks breaking html tags in content
  15. Hide or show Gutenberg custom block using date range
  16. Use page Title in Gutenberg custom banner block
  17. How to add code to `head` with WordPress 5.9 FSE (Full Site Editing)
  18. Block Editor: add an aria-label to an option inside a SelectControl
  19. How to make the Preview button automatically open new tab?
  20. Gutenberg: How can I disable backspace key from deleting an empty paragraph block?
  21. Possible add color palette for a block’s inner div instead of outer?
  22. Programmatically trigger the gutenberg save
  23. Gutenberg : in the backend, I just want to store a JSON object
  24. wordpress gutenberg url popover custom options
  25. Text Editors Are Hiding Text
  26. Disabling deleting reusable blocks except on the reusable block manager
  27. Gutenberg remove Most Used group
  28. Gutenberg. How To Register A Custom Block Style For Specific Post Type Only
  29. get used blocks in post and detect changing
  30. How to know whether you are editing a page or a post?
  31. Gutenberg get block name
  32. Insert SVG code (not img) in HTML block
  33. How to enable Block Editor on the Posts page
  34. React to a change of the block alignment
  35. Object type for block Attribute (Gutenberg)
  36. Guttenberg Implementation on Front Page
  37. Register multiple styles / scripts in register_block_type
  38. How to automatically remove noreferrer from targetd link rel attribute, on render?
  39. Should there be concern about breaking Gutenberg updates to extended core blocks?
  40. How do I access onMerge, onReplace, onRemove functions for a Rich Text component in Gutenberg block code?
  41. How can Reusable Blocks be fully deleted?
  42. Make a Gutenberg Block that do WP_User_Query
  43. Extend Gutenberg block core/quote block
  44. How to get all attributes of a block in PHP?
  45. Gutenberg Block Get Author Details
  46. Gutenberg Block Toolbar – remove button
  47. WordPress block editor embeds not working in theme (single.php)
  48. Cannot enable Gutenberg editor [closed]
  49. Remove ‘type / to choose a block’ placeholder [duplicate]
  50. Start a line with – without converting to list
  51. Quickest way of developing custom Gutenberg Blocks
  52. How to register two blocks in the same plugin
  53. Gutenberg: always show text color selector in editing bar
  54. How to lock innerBlocks within a block variation?
  55. How to get startIndex and endIndex from the selected block in gutenberg?
  56. Set a minimum and maximum limit of images to select in the MediaUpload component for Block
  57. Compile a blocks src directory and main index.js entry file and output to different build dirs?
  58. Proxy External API request in PHP from Edit.js in Block Plugin
  59. How do I stop a dynamic Gutenberg component from re-rendering on every keystroke?
  60. Leave focus on custom Gutenberg block when pressing enter
  61. How to Analyze Blocks and find Intersection and patterns between pages
  62. WordPress does not hide content after “Read more” block added using gutenberg editor
  63. Issue with translation – Gutenberg
  64. RSS feed WP widget vs Gutenberg Block?
  65. Gutenberg editor failing to load correctly after new theme install
  66. Gutenberg Custom Style problem with background image
  67. Theme options missing from edit page
  68. “Updating failed” if any text includes “$v()”
  69. Disable Font Size for Authors using: add_theme_support(‘disable-custom-font-sizes’);
  70. Multiple checkboxes Gutenberg control
  71. Block validation failed
  72. Loading column block style seperately
  73. How to use react in frontend of dynamic blocks?
  74. Attempting to specify viewScript, in a custom block, results in a register_block_script_handle error
  75. What is the standard way to use the version of React that ships with Gutenberg on the front end?
  76. Restricting core block nested blocks
  77. Is is possible to use Templates with blockprops?
  78. How to add readable name and description to templates?
  79. Errror generated in console leading to block validation failer
  80. Add Custom Block Supports to Core Block
  81. Block validation failed – save content vs post body content
  82. How to propegate changes from block render_callback to other blocks using that callback?
  83. wordpress 6.2 is alignfull and lignwide removed?
  84. How to add “rel=nofollow” for links in latest version of WordPress?
  85. I can’t highlight/select text in the RichText components in my Gutenberg blocks
  86. Lazy load video block while keeping autoplay
  87. Is it possible to add custom Components in the InspectorControls to the new “Styles” Tab?
  88. How to implement Mapbox GL JS with a custom Gutenberg block in FSE?
  89. Hard code block with nested block in front-page.html template
  90. Use a custom block inside another custom block
  91. Controlling or disabling Gutenberg editor panning/focus on a custom slider block
  92. Default value for highorder component in Gutenbrg?
  93. Custom gutenberg block: window.wp.blockEditor returns undefined
  94. How can I add a wrapper class to individual blocks inside of an InnerBlocks component?
  95. how can I remove all default settings in Gutenberg blocks? example core/button
  96. How do i create a switch for responsive devices?
  97. Are shortcodes now allowed in synced blocks?
  98. How to get block editor block inspector attribute value in my react block
  99. Modifying other core editor panels besides Featured Image in the block editor
  100. Detecting whenever a user types – in the Gutenberg editor, and checking if there is a preceding or succeeding – then converting both to an em dash
techhipbettruvabetnorabahisbahis forumutaraftarium24eduseduseduedusedueduseduedusedusedus