Add support for aligned wide and full images in certain scenarios:

* Full-width images are supported on pages only when no sidebar is active
* Wide-width images are supported on posts and pages when below the sidebar and entry meta.

affinity/assets/js/functions.js

@@ -69,7 +69,7 @@
 				sidebarPosBottom = 0;
 			}
 
-			// Add 'below-entry-meta' to elements below the entry meta.
+			// Add 'below-sidebar' to elements below the sidebar.
 			if ( elementPosTop > sidebarPosBottom ) {
 				element.addClass( 'below-sidebar' );
 			} else {
@@ -132,7 +132,7 @@
 		} );
 	}
 
-	//Apply classes to aligned left and right elements (blockquotes, captions, images)
+	//Apply classes to aligned left, right, wide, and full elements (blockquotes, captions, images)
 	function moveAlignedElements() {
 
 		var ltr = true;
@@ -145,6 +145,9 @@
 				clearTimeout( resizeTimer );
 				resizeTimer = setTimeout( function() {
 
+					belowEntryMetaClass( 'figure.wp-block-image.alignwide' );
+					belowSidebarClass( 'figure.wp-block-image.alignfull, figure.wp-block-image.alignwide' );
+
 					if ( true == ltr ) {
 						belowEntryMetaClass( 'img.alignleft:not( figure > img.alignleft ), figure.alignleft' );
 						belowEntryMetaClass( 'blockquote.alignleft' );
@@ -166,6 +169,9 @@
 				}, 300 );
 			} );
 
+		belowEntryMetaClass( 'figure.wp-block-image.alignwide' );
+		belowSidebarClass( 'figure.wp-block-image.alignfull, figure.wp-block-image.alignwide' );
+
 		if ( true == ltr ) {
 			belowEntryMetaClass( 'img.alignleft:not( figure > img.alignleft ), figure.alignleft' );
 			belowEntryMetaClass( 'blockquote.alignleft' );

affinity/blocks.css

@@ -44,6 +44,31 @@ p.has-drop-cap:not(:focus)::first-letter {
 	display: flex;
 }
 
+/* Full Images */
+
+@media screen and ( min-width: 48em ) {
+	.no-sidebar.page figure.wp-block-image.alignfull {
+		width: 100vw;
+		max-width: 100vw;
+		margin: 0;
+		position: relative;
+		left: 50%;
+		transform: translateX( -50% );
+		
+	}
+}
+
+/* Wide Images */
+
+@media screen and ( min-width: 48em ) {
+	figure.wp-block-image.alignwide.below-sidebar.below-entry-meta {
+		width: 120%;
+		max-width: 120%;
+		margin-left: -10%;
+		margin-right: -10%;
+	}
+}
+
 /* Gallery */
 
 .wp-block-gallery {

affinity/editor-blocks.css

@@ -136,6 +136,12 @@
 	font-style: italic;
 }
 
+@media screen and ( min-width: 48em ) {
+	.edit-post-visual-editor .editor-block-list__block[data-align=wide] {
+		max-width: 860px;
+	}
+}
+
 /*--------------------------------------------------------------
 2.0 General Block Styles
 --------------------------------------------------------------*/
@@ -145,7 +151,6 @@
 body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
 body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
 body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
-	max-width: 747px;
 }
 
 /* Link styles */

affinity/editor-style.css

@@ -30,7 +30,7 @@ body {
 }
 
 body.post-type-page {
-	max-width: 747px;
+	max-width: 716px;
 }
 
 

affinity/functions.php

@@ -40,6 +40,11 @@ function affinity_setup() {
 	 */
 	add_editor_style();
 
+	/*
+	 * Add wide and full images support for Gutenberg
+	 */
+	add_theme_support( 'align-wide' );
+
 	/**
 	 * Add support for core custom logo
 	 * - also see fallback in inc/jetpack.php