{"id":366907,"date":"2026-09-09T01:06:46","date_gmt":"2026-09-08T16:06:46","guid":{"rendered":"https:\/\/ja.wordpress.org\/plugins\/hpcode-responsive-css-for-blocks\/"},"modified":"2026-09-09T01:06:46","modified_gmt":"2026-09-08T16:06:46","slug":"hpcode-responsive-css-for-blocks","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/hpcode-responsive-css-for-blocks\/","author":16888113,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.2","requires":"7.1","requires_php":"7.4","requires_plugins":null,"header_name":"HPcode Responsive CSS for Blocks","header_author":"HPcode","header_description":"Adds a Responsive CSS field to a block's Advanced panel so you can write media queries for a single block.","assets_banners_color":"","last_updated":"2026-09-08 16:06:46","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/hpcode.co.jp\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":0,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","changelog"],"tags":[],"upgrade_notice":[],"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"The Responsive CSS field in a block's Advanced panel, next to core's Custom CSS field.","2":"The field tells you when the input contains no media query, and where that CSS belongs instead."}},"plugin_section":[],"plugin_tags":[],"plugin_category":[],"plugin_contributors":[],"plugin_business_model":[],"class_list":["post-366907","plugin","type-plugin","status-closed","hentry","plugin_committers-haniwaman"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/hpcode-responsive-css-for-blocks.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"\n\n<!--section=description-->\n<p>WordPress 7.0 added a per-block <strong>Custom CSS<\/strong> field. It is meant for flat declarations and does not handle at-rules: a media query typed into it is not applied as written, and no warning is shown.<\/p>\n\n<p>This plugin does not touch core's field. It adds a <strong>separate<\/strong> field, \"Responsive CSS\", in the block's Advanced panel, and takes care of that field from end to end \u2014 the editor canvas and the front end are rendered by the same rules, so the two never fight and no <code>!important<\/code> is needed.<\/p>\n\n<h4>How to use it<\/h4>\n\n<p>Select a block, open <strong>Advanced<\/strong> in the sidebar, and write full media queries. <code>&amp;<\/code> refers to the block:<\/p>\n\n<pre><code>@media (max-width:767px) { &amp; { min-height: 60vh; } }\n@media (min-width:768px) { &amp;::after { width: 12rem; } }\n<\/code><\/pre>\n\n<p>Only the contents of <code>@media<\/code> rules are output. CSS that should apply at every width belongs in core's Custom CSS field.<\/p>\n\n<h4>Permissions and safety<\/h4>\n\n<p>The field is only shown to users who can edit CSS, and, exactly like core does for its own Custom CSS, its contents are stripped on save for users without the <code>edit_css<\/code> capability. Input containing HTML tags is never output, and the field says so while you type. The plugin sends nothing anywhere, stores no options, and adds no admin pages.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Install and activate the plugin.<\/li>\n<li>Edit a post or a template, select a block, and open <strong>Advanced<\/strong> in the block sidebar.<\/li>\n<li>Write your media queries in the <strong>Responsive CSS<\/strong> field.<\/li>\n<\/ol>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First public release.<\/li>\n<\/ul>","raw_excerpt":"Adds a Responsive CSS field to a block's Advanced panel so you can write media queries for a single block.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/366907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=366907"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/haniwaman"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=366907"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=366907"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=366907"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=366907"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=366907"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=366907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}