Add classname to Gutenberg block wrapper in the editor?
1
I'm trying to create custom columns block in Gutenberg.
Is it possible to add class to the wrapper of the element in the editor based on the attributes? I'd like to switch ??? to class based e.g. columns-4. Otherwise it's not possible to use flex.
<div id="..." class="wp-block editor-block-list__block ???" data-type="my-blocks/column" tabindex="0" aria-label="Block: Single Column">
<div>
<div class="this-can-be-set-in-edit-or-attributes">
...
</div>
</div>
</div>
block-editor
asked 3 hours ago
Runnick
169316
add a comment |
1
I'm trying to create custom columns block in Gutenberg.
Is it possible to add class to the wrapper of the element in the editor based on the attributes? I'd like to switch ??? to class based e.g. columns-4. Otherwise it's not possible to use flex.
<div id="..." class="wp-block editor-block-list__block ???" data-type="my-blocks/column" tabindex="0" aria-label="Block: Single Column">
<div>
<div class="this-can-be-set-in-edit-or-attributes">
...
</div>
</div>
</div>
block-editor
asked 3 hours ago
Runnick
169316
If I understand correctly, the existing columns block built in already uses flex
– Tom J Nowell♦
1 hour ago
add a comment |
1
1
1
I'm trying to create custom columns block in Gutenberg.
Is it possible to add class to the wrapper of the element in the editor based on the attributes? I'd like to switch ??? to class based e.g. columns-4. Otherwise it's not possible to use flex.
<div id="..." class="wp-block editor-block-list__block ???" data-type="my-blocks/column" tabindex="0" aria-label="Block: Single Column">
<div>
<div class="this-can-be-set-in-edit-or-attributes">
...
</div>
</div>
</div>
block-editor
asked 3 hours ago
Runnick
169316
I'm trying to create custom columns block in Gutenberg.
Is it possible to add class to the wrapper of the element in the editor based on the attributes? I'd like to switch ??? to class based e.g. columns-4. Otherwise it's not possible to use flex.
<div id="..." class="wp-block editor-block-list__block ???" data-type="my-blocks/column" tabindex="0" aria-label="Block: Single Column">
<div>
<div class="this-can-be-set-in-edit-or-attributes">
...
</div>
</div>
</div>
block-editor
block-editor
asked 3 hours ago
Runnick
169316
asked 3 hours ago
Runnick
169316
asked 3 hours ago
Runnick
169316
asked 3 hours ago
Runnick
169316
asked 3 hours ago
Runnick
169316
169316
If I understand correctly, the existing columns block built in already uses flex
– Tom J Nowell♦
1 hour ago
add a comment |
If I understand correctly, the existing columns block built in already uses flex
– Tom J Nowell♦
1 hour ago
If I understand correctly, the existing columns block built in already uses flex
– Tom J Nowell♦
1 hour ago
If I understand correctly, the existing columns block built in already uses flex
– Tom J Nowell♦
1 hour ago
add a comment |
1 Answer
1
active
oldest
votes
2
Actually it can be done with the filter:
const { createHigherOrderComponent } = wp.compose;
const withCustomClassName = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
if(props.attributes.size) {
return <BlockListBlock { ...props } className={ "block-" + props.attributes.size } />;
} else {
return <BlockListBlock {...props} />
}
};
}, 'withClientIdClassName' );
wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
answered 3 hours ago
Runnick
169316
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "110"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f324091%2fadd-classname-to-gutenberg-block-wrapper-in-the-editor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Actually it can be done with the filter:
const { createHigherOrderComponent } = wp.compose;
const withCustomClassName = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
if(props.attributes.size) {
return <BlockListBlock { ...props } className={ "block-" + props.attributes.size } />;
} else {
return <BlockListBlock {...props} />
}
};
}, 'withClientIdClassName' );
wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
answered 3 hours ago
Runnick
169316
add a comment |
2
Actually it can be done with the filter:
const { createHigherOrderComponent } = wp.compose;
const withCustomClassName = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
if(props.attributes.size) {
return <BlockListBlock { ...props } className={ "block-" + props.attributes.size } />;
} else {
return <BlockListBlock {...props} />
}
};
}, 'withClientIdClassName' );
wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
answered 3 hours ago
Runnick
169316
add a comment |
2
2
2
Actually it can be done with the filter:
const { createHigherOrderComponent } = wp.compose;
const withCustomClassName = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
if(props.attributes.size) {
return <BlockListBlock { ...props } className={ "block-" + props.attributes.size } />;
} else {
return <BlockListBlock {...props} />
}
};
}, 'withClientIdClassName' );
wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
answered 3 hours ago
Runnick
169316
Actually it can be done with the filter:
const { createHigherOrderComponent } = wp.compose;
const withCustomClassName = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
if(props.attributes.size) {
return <BlockListBlock { ...props } className={ "block-" + props.attributes.size } />;
} else {
return <BlockListBlock {...props} />
}
};
}, 'withClientIdClassName' );
wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
answered 3 hours ago
Runnick
169316
answered 3 hours ago
Runnick
169316
answered 3 hours ago
Runnick
169316
answered 3 hours ago
Runnick
169316
169316
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to WordPress Development Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f324091%2fadd-classname-to-gutenberg-block-wrapper-in-the-editor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If I understand correctly, the existing columns block built in already uses flex
– Tom J Nowell♦
1 hour ago