Classes being added to the block outer and not the row.

  • Resolved muzKore

    (@muzoid)


    5 years ago

    Hi.
    Firstly, a big thanks to your for creating this plugin. It had added a lot more functionality to Gutenberg. There is one thing that I have to be honest frustrates me. When I select a row and then click on the Advanced meta tab to add classes to that specific row, it adds them to the outer div not the div that has the ‘row’ class attached. There are buttons to choose hotizontal or verticla alignment but what about space-between and the others or custom ones created by the user? I know it would get really complex to program them all into the interface but it would be great if the Advanced class text area actually added the classes to the row and so people can add the flex utility classes or whatever other classes that they want to the row for maximised flexibility. It does appear to work for the Columns.

    Anyway, to create my own personal workaround, I went int the src/templates/row.php and changed the last 5 lines from

    <div class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
	<div class="<?php echo esc_attr( implode( ' ', $row_classes ) ); ?>">
		<?php echo $content; // phpcs:ignore ?>
	</div>
</div>

    to

    <div class="wp-bootstrap-blocks-row">
	<div class="<?php echo esc_attr( implode( ' ', $row_classes ) ); ?> <?php echo esc_attr( implode( ' ', $classes ) ); ?>">
		<?php echo $content; // phpcs:ignore ?>
	</div>
</div>

    I also emptied the $classes array on line 25. It would be great if theis was part of the plugin if it did not break the roadmap.

    Finally, is there the possibility of being able to add an ID to a block, row, button?

    Cheers and thanks again for the plugin.
    Murray

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor tschortsch

    (@tschortsch)

    Hi @muzoid. Thanks for your suggestions! You’re totally right about the row classes. They should be added to the row div and not the outer div. We have to see if we can make this change without breaking too much. And we already though about adding further flexbox alignment options but didn’t have the time to implement them yet. We’ll take them to our list of features to implement.
    About the ID on a block: This is currently not possible. For me this should be a feature of all Gutenberg blocks anyway (like adding custom classes). That’s why we didn’t implement them for ourselves.

    Thread Starter muzKore

    (@muzoid)

    Cheers @tschortsch. I totally get about not wanting to break the plugin reliability and I appreciate your flexability in considering the implementation of the classes to the inner row div if possible. I really believe that it would seal the deal and open the plugin into a full blown must have for all BS4 WP page authors. As for the ID, your totally right about Gutenberg. It would be great to have WP implement that as some people may want to anchor or target with a scripting language or lib.
    Peace and props.
    Murray

    • This reply was modified 5 years ago by muzKore. Reason: Marked as resolved
    Plugin Author liip

    (@liip)

    @muzoid we just released v1.4.0 of the plugin. The Advanced class is now added to the row block instead of the wrapper block. Hope this helps!

    Agree that this is a good thing, however now there is no way to target the wrapper div. Is that wrapper strictly necessary? When trying to nest this block inside say, a cover block, it seems like an un-classable div wrapping the row isn’t very helpful.

    Plugin Contributor tschortsch

    (@tschortsch)

    I think there are pros and cons for both solutions. Since our blocks are implemented as dynamic blocks there is always the possibility to overwrite the template of them by copying it to your theme (in a directory called wp-bootstrap-blocks/).
    Here is the change we did for this release: https://github.com/liip/bootstrap-blocks-wordpress-plugin/commit/d56c239f4ab05698f0113fdfeb6a833ba3bec655#diff-40f81e285b24057590b34a5d5ab5f204. You can just revert it and everything should work as before.

    Thank you, we will certainly take a look at that. Appreciate the assistance.

    guscampbell

    (@guscampbell)

    I assume this change was implemented in the latest version. The change to the HTML tag has broken my layout, so I’ve had to revert to the earlier plugin version. Can anyone say if this is going to be a permanent change? If so, is it possible for you please suggest the exact files to put in the theme so I can continue to benefit from updates… this would be *super* helpful!

    Plugin Contributor tschortsch

    (@tschortsch)

    Hi @guscampbell. I’m really sorry for that. We should have mentioned in the readme that this layout might break the layout (if you have used the advanced classes of the row block).
    Since we didn’t change anything else on the row block template you can just copy/paste the previous version of it to your theme/wp-bootstrap-blocks/ folder. Here you’ll find the row template of v1.3.1: https://raw.githubusercontent.com/liip/bootstrap-blocks-wordpress-plugin/1.3.1/src/templates/row.php.

    • This reply was modified 5 years ago by tschortsch.
    guscampbell

    (@guscampbell)

    Thanks tschortsch! That theme file is super helpful! I followed the instructions and placed it in theme/wp-bootstrap-blocks/row.php and the update worked a treat! Thanks again!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Classes being added to the block outer and not the row.’ is closed to new replies.