{"id":82,"date":"2024-10-03T12:37:20","date_gmt":"2024-10-03T16:37:20","guid":{"rendered":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/?page_id=82"},"modified":"2026-01-27T13:37:10","modified_gmt":"2026-01-27T18:37:10","slug":"viewstyle","status":"publish","type":"page","link":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/handbook\/wp-core\/block-architecture\/viewstyle\/","title":{"rendered":"viewStyle (Frontend Styling)"},"content":{"rendered":"\n<p>Block type frontend styles definition. They will be enqueued only when viewing the content on the front of the site.<\/p>\n\n\n\n<p>Frontend-only styles are especially useful for interactive blocks, to style parts that will only be visible after a user performs some action and where those styles will never be needed in the editor. You can start with using the&nbsp;<code>style<\/code>&nbsp;property to put all your common styles in one stylesheet. Only when you need editor-specific styling or frontend-specific styling, you can expand to&nbsp;<code>editorStyle<\/code>&nbsp;and&nbsp;<code>viewStyle<\/code>, but still keep the common part of your styling in the main stylesheet.<\/p>\n\n\n\n<p id=\"block-ef4598e5-eace-4f7a-8501-9d295638d5a8\">See:<\/p>\n\n\n\n<ul id=\"block-d89cf57a-ead1-4724-8dcc-9085dff295ad\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/#view-style\">WordPress Developer Resources: File structure of a block<\/a><\/li><li><a href=\"https:\/\/github.com\/bu-ist\/responsive-child-starter-3x-block-editor\/blob\/3507757ce684b1242a3bbed0a883a7934637f766\/src\/blocks\/theme-testblock-1\/block.json#L15\">block.json example<\/a><\/li><li><a href=\"https:\/\/github.com\/bu-ist\/responsive-child-starter-3x-block-editor\/blob\/develop\/src\/blocks\/theme-testblock-1\/view.scss\">view.scss example<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Block type frontend styles definition. They will be enqueued only when viewing the content on the front of the site. Frontend-only styles are especially useful for interactive blocks, to style parts that will only be visible after a user performs some action and where those styles will never be needed in the editor. You can [&hellip;]<\/p>\n","protected":false},"author":3670,"featured_media":0,"parent":98,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"status-is-a-reserved-term":[],"assignee":[],"_links":{"self":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/82"}],"collection":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/users\/3670"}],"replies":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":6,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":751,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/82\/revisions\/751"}],"up":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/98"}],"wp:attachment":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"status-is-a-reserved-term","embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/status-is-a-reserved-term?post=82"},{"taxonomy":"assignee","embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/assignee?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}