gutenberg change html attributes of custom block

  • I want to create a custom row/column block (since the core doesn’t offer the features I need) using a wrapper and innerblocks. I want to change the appeareance of the columns in the editor depending on the values set (like the core/columns but with custom values) but I don’t know how to do that. Possible could be a custom class name or custom data-* attributes.

    To clarify: I want these on the parents of the innerblock that are siblings to each other. Otherwise styling wouldn’t work since wordpress wraps the result in multiple children. So just adding a “wrapper” in the return function is not enough.

    This

    <div className="wrap">
	<InnerBlocks />
</div>

    would result in this

    <div class="block-row"> <!-- my parent -->
	<div class="editor-inner-blocks block-editor-inner-blocks">
		<div class="editor-block-list__layout block-editor-block-list__layout">
			<div class="wp-block editor-block-list__block block-editor-block-list__block"> <!-- here I need my custom class/attributes-->
				<div class="editor-block-list__block-edit block-editor-block-list__block-edit">
					<div>
						<div class="wrap"> <!-- here starts the "wrapper" of the innerblock (way too late) -->
							...
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

    Extending the core block would also be an option but they key problem stays that I don’t know how to modify the appeareance since I have no matching selectors in css.

    The only dirty way I know to solve this is by injecting javascript but I guess that’s not the right way to do it.

    • This topic was modified 5 years, 2 months ago by Insomnia88.
    • This topic was modified 5 years, 2 months ago by Insomnia88.
    • This topic was modified 5 years, 2 months ago by Insomnia88. Reason: typo
Viewing 4 replies - 1 through 4 (of 4 total)

  • I do not understand what do you want to achieve. If you want to change the look of columns in the frontend globally then you can do it with CSS, you can also do it per page/post using body.page-id-XXX or body.postid-XXX in selector. Is that what you want to do?

    Thread Starter Insomnia88

    (@insomnia88)

    Yes that is what I want to do but you cannot change something with css if you can’t select it.
    I can also do that as mentioned aove with the help of javascript. Because the wanted “real” wrapper (look at the comments) of the children has a id-attribute called block-xxx. Though it should be possible to change that without using of javascript but jsx or orther built in functions instead.
    An image can be found here: https://i.stack.imgur.com/nchpJ.png
    If you want a live example look at the gutenberg bootstrap plugin – this is the behavior I want to achive (in the most clean way possible).

    • This reply was modified 5 years, 2 months ago by Insomnia88. Reason: typo
    • This reply was modified 5 years, 2 months ago by Insomnia88. Reason: removed some text

    JS is not necessary, beacuse you can always access any single HTML node with proper selector. Still the question for me is what do you want to acheive. Do you want to:
    – make a border around some columns in some posts/pages? You can do that by adding class in theme and specyfing it in Gutenberg (select column, then click Advanced, enter class name in ‘Additional CSS Class(es)’)
    – make a border around all columns in all WP posts and pages?
    – make a border around all columns in single WP post or page?
    – something else?

    Thread Starter Insomnia88

    (@insomnia88)

    Have you looked at the html code and the image I proved above? I want to change the width of the columns like it is shown in the image dynamically. I explained all of that above. Look at the code, look at the image. I can’t explain it any better, sorry.
    This is no newbie but a more “advanced” question targeting the gutenberg block api and dynamically created blockes (by me).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘gutenberg change html attributes of custom block’ is closed to new replies.