{"id":6006,"date":"2020-08-05T17:47:00","date_gmt":"2020-08-05T15:47:00","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=6006"},"modified":"2020-08-05T16:07:42","modified_gmt":"2020-08-05T14:07:42","slug":"block-edit-wrapper-attributes","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/block-edit-wrapper-attributes-6006\/","title":{"rendered":"Change block edit wrapper attributes"},"content":{"rendered":"\n

In Gutenberg, the markup from the edit<\/code> function is wrapped in a few other elements. The outer wrapper of each block has the wp-block<\/code> class and a data-block<\/code> attribute that contains the name of the block with its namespace \u2013 core\/group<\/code> for the group block, for example.<\/p>\n\n\n\n

We can change the attributes of that wrapper, so we could add class names depending on the selected\/changed block options, what could make the styling of blocks in the backend easier.<\/p>\n\n\n\n\n\n\n\n

A way that works for all blocks is the editor.BlockListBlock<\/code> filter. To add a class name that contains the value of an attribute, we could do the following (solution highly inspired by a StackExchange answer<\/a>):<\/p>\n\n\n

const<\/span> { createHigherOrderComponent } = wp.compose;\nconst<\/span> withStyleClasses = createHigherOrderComponent( ( BlockListBlock <\/span>) =><\/span> {\n\treturn<\/span> ( props <\/span>) =><\/span> {\n\t\tif<\/span> ( props.name !== 'my\/block'<\/span> ) {\n\t\t\treturn<\/span> <BlockListBlock<\/span> { ...props<\/span> } \/><\/span><\/span>\n\t\t}\n\n\t\tconst<\/span> {\n\t\t\tmyAttribute,\n\t\t} = props.attributes;\n\n\t\treturn<\/span> <BlockListBlock<\/span> { ...props<\/span> } className<\/span>={<\/span> `my-attribute-<\/span>${ myAttribute<\/span> }` } \/><\/span><\/span>;\n\t};\n}, 'withStyleClasses'<\/span> );\n\nwp.hooks.addFilter( 'editor.BlockListBlock'<\/span>, 'slug\/with-style-classes'<\/span>, withStyleClasses );\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The withStyleClasses<\/code> function, that is hooked to the editor.BlockListBlock<\/code> filter gets the BlockListBlock<\/code> as a parameter. Inside the function, we check if the block identifier is my\/block<\/code>, otherwise we return BlockListBlock<\/code> without any modifications.<\/p>\n\n\n\n
If we have the wanted block, we get the value of the myAttribute<\/code> attribute and add a class name that begins with my-attribute-<\/code> followed by the current value of the attribute.<\/p>\n\n\n\n
In Gutenberg, the markup from the edit function is wrapped in a few other elements. The outer wrapper of each block has the wp-block class and a data-block attribute that contains the name of the block with its namespace \u2013 core\/group for the group block, for example. We can change the attributes of that wrapper, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-6006","post","type-post","status-publish","format-standard","hentry","category-wordpress-snippets"],"wp-worthy-pixel":{"ignored":false,"public":"a903d4b70f214ecca269f86d0ae1b346","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/a903d4b70f214ecca269f86d0ae1b346"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=6006"}],"version-history":[{"count":3,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6006\/revisions"}],"predecessor-version":[{"id":6009,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6006\/revisions\/6009"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=6006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=6006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=6006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Another way that I found<\/a> works with getEditWrapperProps<\/code> when registering a block, but is, at least in my tests, not usable for things like additional classes (because it did not work to add the class to existing ones but only replace existing ones with the new class). But it seems to be very useful for additional data-<\/code> attributes.<\/p>\n","protected":false},"excerpt":{"rendered":"