Come up with a way to support wide width and full width Gutenberg block alignments

[chrisblakley]

The class alignwide on the <figure> wrapping class should extend the image inside beyond the width of the text column. The alignfull class is supposed to extend the image all the way to the outer boundaries of the viewport.

Test it here: https://gearside.com/nebula/test-of-gutenberg-blocks/

[chrisblakley]

This would probably necessitate the removal of the sidebar for starters.

[chrisblakley]

Here's how twentyninteen does it:

.entry .entry-content > *.alignwide,
.entry .entry-summary > *.alignwide {
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

@media only screen and (min-width: 768px) {
  .entry .entry-content > *.alignwide,
  .entry .entry-summary > *.alignwide {
    width: 100%;
    max-width: 100%;
  }
}

.entry .entry-content > *.alignfull,
.entry .entry-summary > *.alignfull {
  position: relative;
  left: -1rem;
  width: calc( 100% + (2 * 1rem));
  max-width: calc( 100% + (2 * 1rem));
  clear: both;
}

@media only screen and (min-width: 768px) {
  .entry .entry-content > *.alignfull,
  .entry .entry-summary > *.alignfull {
    margin-top: calc(2 * 1rem);
    margin-bottom: calc(2 * 1rem);
    left: calc( -12.5% - 75px);
    width: calc( 125% + 150px);
    max-width: calc( 125% + 150px);
  }
}

[chrisblakley]

Here's another, possibly more simple way to do it:

Note: that 'object-fit: cover' is a clever property that I didn't know about. Although- it is not supported in IE at all: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Here's a way for featured text areas:

[patmcneil]

Here is a simple solution for .alignwide:

.alignwide{transform:scale(1.15); margin:3.33em 0;}

Add a breakpoint if needed, but at the minor 1.15 scale, it works fine all the way down to small screen size (without any media query).

[chrisblakley]

Here's how I do it in child themes, but I'm not sure that I want this to be the default setting for Nebula.

<div class="row alignwide-enabled">
	<main id="top" class="col-md-8" role="main">
		<!-- entry content goes here... -->

.alignwide-enabled {justify-content: center;
	.alignwide {
		@include media('lg'){margin-left: -200px; margin-right: -200px;}
	}
}

I will likely add the alignwide-enabled (or maybe call it alignwide-row) to Nebula itself, but it'll require the theme developer to use it on the row and set the main element to something like col-md-8 instead of col. This also would not work with a sidebar at all.

Edit: Here's how I added it to _helpers.scss:

//Enable support for the WordPress alignwide class on a Bootstrap row.
//Remember to add this class to the row and then contain the col class div itself (something like col-md-8 works well).
.alignwide-row {justify-content: center;
	.alignwide {
		@include media('lg'){margin-left: -200px; margin-right: -200px;}
	}
}

[chrisblakley]

As we talk about the block editor integration more and more (as well as within companion plugins) I want to note any features that I may specifically bring into Nebula itself. For example, the Full Width template could be the one we use for this any other block editor features.

The CSS could do the negative margins like above, but the selector could be specific to either .template-full-width or some kind of .allow-wide-width parent selector.

[chrisblakley]

That Full Width template would work for pages, but would not work for posts as single.php would always be the template file. For child theming, we could copy the full width page template and rename to single.php but I'm wondering if there is a better way by default?

[chrisblakley]

This is what I came up with tonight: https://gearside.com/nebula/this-is-an-equivalent-page-that-tests-block-editor-blocks-with-the-full-width-template/

.page-template-block-editor {
	h1 {font-size: 44px; text-align: center;}

	.entry-content,
	.entry-widgets,
	.entry-comments {padding-left: 40px; padding-right: 40px;
		> * {max-width: 640px; margin: 0 auto;} //Better selector for this?

		h2 {font-size: 32px; margin-top: 32px;}
		h3 {margin-top: 32px;}

		p {font-size: 18px; line-height: 32px; margin-top: 32px;}

		figure {margin-top: 32px;}
		img {max-width: 100%;}

		.alignwide {max-width: 900px;}
		.alignfull {max-width: none;
			&.wp-block-image {margin-left: -40px; margin-right: -40px;}
		}
	}
}

<section id="content-section">
	<main id="top" role="main">
		<?php if ( have_posts() ) while ( have_posts() ): the_post(); ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="entry-content">
					<?php the_content(); ?>
				</div>
			</article>

			<?php if ( is_active_sidebar('single-post-widget-area') ): ?>
				<div id="single-post-widget-area" class="entry-widgets">
					<?php dynamic_sidebar('single-post-widget-area'); ?>
				</div>
			<?php endif; ?>

			<div class="entry-comments">
				<?php comments_template(); ?>
			</div>
		<?php endwhile; ?>
	</main><!--/col-->
</section>

If we were going to implement this into Nebula as a whole, it would be a major breaking change that would affect many templates and styles. This would also reduce the usage of Bootstrap considerably in the content areas of templates.

[terencehoverter]

Looks good. I couldn't spot any issues when I tested it in IE 11 and Firefox.