search

liip / bootstrap-blocks-wordpress-plugin

Bootstrap Gutenberg Blocks for WordPress
https://wordpress.org/plugins/wp-bootstrap-blocks/
280 stars 60 forks source link

add_theme_support( 'align-wide' ); #14

Closed unsalkorkmaz closed 5 years ago

unsalkorkmaz commented 5 years ago

Hi, add_theme_support( 'align-wide' ); This code adds full width support to images etc.. More info: https://developer.wordpress.org/block-editor/developers/themes/theme-support/#wide-alignment

It seems we have to add data-align="full" to wp-block container in gutenberg for showing in 100% width. I didn't inspect all codes so please forgive me for not finding proper solution. What is your solution for this problem in gutenberg?

tschortsch commented 5 years ago

During block registration (registerBlockType()) you can enable the align feature by adding it to the supports property -> see https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#supports-optional.

This is how we did it in the row block: https://github.com/liip/bootstrap-blocks-wordpress-plugin/blob/master/src/row/block.js#L132

unsalkorkmaz commented 5 years ago

Well.. I mean when you select "fluid" option.. nothing happens

tschortsch commented 5 years ago

What do you mean by "nothing happens"? Doesn't it stretch the block in the editor? Or doesn't it add the data-align="full" attribute? Maybe you missed adding the wp-edit-blocks style dependency while loading your block styles? See: https://github.com/liip/bootstrap-blocks-wordpress-plugin/blob/master/src/class-wp-bootstrap-blocks.php#L164

unsalkorkmaz commented 5 years ago

Let me ask: When you create a container, there is a "fluid" option in sidebar. What intended when you click to it? Does it becomes 100% width? Nothing happens to me in gutenberg tbh

tschortsch commented 5 years ago

ah sorry. now I get it. If you select the fluid option in the container block it gets rendered with the container-fluid class from bootstrap (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin/blob/master/src/templates/container.php#L28). Sadly we didn't implement any style change in the editor. That's why "nothing happens" in Gutenberg when you select this option.

unsalkorkmaz commented 5 years ago

Yep.. so somehow, we have to relate "align full" & "fluid".

tschortsch commented 5 years ago

What do you mean by relate? If you would like a full-width block just don't wrap it in a container. We implemented a container-like behavior (minus margin left and right) in the row block if you set it to align full.

unsalkorkmaz commented 5 years ago

What was in my mind for container: When you click to "fluid", auto select "align full" in gutenberg too.

If its absurd or not intended, you can close this topic. Sorry for your time btw.

tschortsch commented 5 years ago

Hmm I think there is a difference between align full and container-fluid. In my opinion align full should use the full width of the screen (without any padding). container-fluid does the same but respects the gutter (padding) of the grid.