Wrapping aligned Gutenberg blocks with additional div on a WordPress website front-end.

gutenberg-wide-alignement-wrapper.php

<?php

// IMPORTANT UPDATE 20190307:
// Since WordPress 5.0.0 we can actually use much simpler solution:

/**
 * Applies wrapper div around aligned blocks.
 *
 * Copy this function into your WordPress theme's `functions.php` file
 * and change the `themeprefix` accordingly.
 *
 * @see   https://developer.wordpress.org/reference/hooks/render_block/
 * @link  https://codepen.io/webmandesign/post/gutenberg-full-width-alignment-in-wordpress-themes
 *
 * @param  string $block_content  The block content about to be appended.
 * @param  array  $block          The full block, including name and attributes.
 */
function themeprefix_wrap_alignment( $block_content, $block ) {
	if ( isset( $block['attrs']['align'] ) && in_array( $block['attrs']['align'], array( 'wide', 'full' ) ) ) {
		$block_content = sprintf(
			'<div class="%1$s">%2$s</div>',
			'align-wrap align-wrap-' . esc_attr( $block['attrs']['align'] ),
			$block_content
		);
	}
	return $block_content;
}

add_filter( 'render_block', 'themeprefix_wrap_alignment', 10, 2 );



// OLD CODE (USE BETTER SOLUTION ABOVE):

/**
 * Applies wrapper div around aligned blocks.
 *
 * This is a front-end solution only.
 * In admin, blocks are already being wrapped and we can use attribute
 * selectors of `[data-align="$alignment"]` in our editor stylesheet.
 *
 * Copy this function into your WordPress theme's `functions.php` file
 * and change the `themeprefix` accordingly.
 *
 * @link  https://codepen.io/webmandesign/post/gutenberg-full-width-alignment-in-wordpress-themes
 *
 * @param  string $content  Post content.
 */
function themeprefix_wrap_alignment( $content = '' ) {

	// Requirements check

		if ( ! is_callable( 'has_blocks' ) || ! has_blocks( $content ) ) {
			return $content;
		}


	// Vars

		$current_block = '';
		$content_lines = explode( PHP_EOL, $content );
		$alignments    = (array) apply_filters( 'themeprefix_wrap_alignment/alignments', array( 'full', 'wide' ) );


	// Processing

		foreach ( $content_lines as $line_number => $line_content ) {
			if ( false === strpos( $line_content, '<!-- wp:' ) && false === strpos( $line_content, '<!-- /wp:' ) ) {
				// No block definition HTML comment? Do not process this line.
				continue;
			}

			// Allow bypassing the line with a filter hook.
			$line_content_pre = apply_filters( 'themeprefix_wrap_alignment/line_content_pre', false, $line_content, $line_number );
			if ( is_string( $line_content_pre ) ) {
				$content_lines[ $line_number ] = $line_content_pre;
				continue;
			}

			// Get alignment if set.
			preg_match( '/"align":"([^"]*)"/i', $line_content, $alignment );
			if ( isset( $alignment[1] ) ) {
				$alignment = $alignment[1];
			} else {
				$alignment = '';
			}

			if ( in_array( $alignment, $alignments ) ) {

				/**
				 * Found a block with desired alignment definition?
				 * Do this:
				 * - get and remember block name/key in $current_block variable,
				 * - set a wrapper CSS class,
				 * - open our wrapper div.
				 */
				preg_match( '/wp:(\S+)/', $line_content, $current_block );

				if ( isset( $current_block[1] ) ) {
					$current_block = $current_block[1];
					$class = sprintf(
						(string) apply_filters( 'themeprefix_wrap_alignment/class', 'align-wrap align-wrap-%s', $current_block, $alignment ),
						sanitize_title( $alignment )
					);
					$line_content = str_replace(
						'<!-- wp:',
						'<div class="' . esc_attr( $class ) . '">' . PHP_EOL . '<!-- wp:',
						$line_content
					);
				} else {
					$current_block = '';
				}

			} elseif ( ! empty( $current_block ) && false !== strpos( $line_content, '<!-- /wp:' . $current_block . ' -->' ) ) {

				/**
				 * Have a block name/key saved and found a closing comment for that block?
				 * Do this:
				 * - close our wrapper div,
				 * - reset the $current_block variable.
				 */
				$line_content = str_replace(
					'<!-- /wp:' . $current_block . ' -->',
					'<!-- /wp:' . $current_block . ' -->' . PHP_EOL . '</div><!-- /.align-wrap -->',
					$line_content
				);
				$current_block = '';

			}

			// Replace original line content with modified one.
			$content_lines[ $line_number ] = $line_content;
		}


	// Output

		return implode( PHP_EOL, $content_lines );

} // /themeprefix_wrap_alignment

// Hook before the `do_blocks` is hooked!
add_filter( 'the_content', 'themeprefix_wrap_alignment', 8 );

@chrisvanpatten
Wou, that looks superclean! Thank you for sharing. I wanted to create a function that should work everywhere without any additional libraries. But I will surely have a look at QueryPath as it seems to be very interesting library. Thanks again for sharing both QueryPath info and your code!

Another option would be to use javascript to wrap anything with .alignfull class.

Since it's purely presentational and your site would still work with js disabled this may be a simpler option.

A simple method would be: https://plainjs.com/javascript/manipulation/wrap-an-html-structure-around-an-element-28/

@BinaryMoon Thank you for your input. Yes, JavaScript solution was actually my first bet. But as I didn't like the sudden "jump" in .alignfull elements display caused by JS applying the wrapper only after the page was loaded, I've moved to PHP which prevents such behavior. Besides, the PHP version works with JS disabled too.