tweak layout styles, move layout metabox into theme

assets/scss/editor-layout.scss

@@ -0,0 +1,7 @@
+@import "partials/base";
+
+.full-width-content .editor-styles-wrapper .wp-block,
+.full-width-content .editor-styles-wrapper .editor-post-title__block.wp-block,
+.full-width-content .editor-styles-wrapper .wp-block-group:not(.narrow) .wp-block-group__inner-container {
+	max-width: $grid-width;
+}

assets/scss/partials/_layout.scss

@@ -27,7 +27,7 @@ input[type="search"] {
 		padding: 48px 0;
 	}
 
-	.singular.full-width-content & > .wrap {
+	.singular.content & > .wrap {
 		max-width: map-get( $breakpoints, 'content-width' );
 	}
 }

assets/scss/partials/_singular.scss

@@ -23,7 +23,7 @@
 	}
 
 	.full-width-content &,
-	.wide-content & {
+	.content & {
 		&.alignwide {
 			margin: calc( 2 * #{$block-margin} ) calc(50% - 50vw);
 			max-width: 100vw;

inc/acf.php

@@ -25,7 +25,6 @@ public function __construct() {
 
 		// Dynamic options
 		add_filter( 'acf/load_field', array( $this, 'dynamic_layouts' ) );
-		add_filter( 'acf/load_field/name=ea_page_layout', array( $this, 'page_layout' ) );
 	}
 
 	/**
@@ -87,20 +86,5 @@ function dynamic_layouts( $field ) {
 
 		return $field;
 	}
-
-	/**
-	 * Page Layout
-	 *
-	 */
-	function page_layout( $field ) {
-		$field['choices'] = [];
-		$layouts = ea_page_layout_options();
-		foreach( $layouts as $layout ) {
-			$label = str_replace( '-', ' ', $layout );
-			$field['choices'][ $layout ] = ucwords( $label );
-		}
-		return $field;
-	}
-
 }
 new BE_ACF_Customizations();

inc/layouts.php

@@ -8,6 +8,113 @@
  * @license      GPL-2.0+
 **/
 
+/**
+ * Layout Options
+ *
+ */
+function ea_page_layout_options() {
+	return [
+		'content-sidebar',
+		'content',
+		'full-width-content',
+	];
+}
+
+/**
+ * Gutenberg layout style
+ *
+ */
+function ea_editor_layout_style() {
+	wp_enqueue_style( 'ea-editor-layout', get_stylesheet_directory_uri() . '/assets/css/editor-layout.css', [], filemtime( get_stylesheet_directory() . '/assets/css/editor-layout.css' ) );
+}
+add_action( 'enqueue_block_editor_assets', 'ea_editor_layout_style' );
+
+/**
+ * Editor layout class
+ * @link https://www.billerickson.net/change-gutenberg-content-width-to-match-layout/
+ *
+ * @param string $classes
+ * @return string
+ */
+function ea_editor_layout_class( $classes ) {
+	$screen = get_current_screen();
+	if( ! $screen->is_block_editor() )
+		return $classes;
+
+	$post_id = isset( $_GET['post'] ) ? intval( $_GET['post'] ) : false;
+	$layout = ea_page_layout( $post_id );
+
+	$classes .= ' ' . $layout . ' ';
+	return $classes;
+}
+add_filter( 'admin_body_class', 'ea_editor_layout_class' );
+
+
+/**
+ * Layout Metabox (ACF)
+ *
+ */
+function ea_page_layout_metabox() {
+
+	if( ! function_exists('acf_add_local_field_group') )
+		return;
+
+	$choices = [];
+	$layouts = ea_page_layout_options();
+	foreach( $layouts as $layout ) {
+		$label = str_replace( '-', ' ', $layout );
+		$choices[ $layout ] = ucwords( $label );
+	}
+
+	acf_add_local_field_group(array(
+		'key' => 'group_5dd714b369526',
+		'title' => 'Page Layout',
+		'fields' => array(
+			array(
+				'key' => 'field_5dd715a02eaf0',
+				'label' => 'Page Layout',
+				'name' => 'ea_page_layout',
+				'type' => 'select',
+				'instructions' => '',
+				'required' => 0,
+				'conditional_logic' => 0,
+				'wrapper' => array(
+					'width' => '',
+					'class' => '',
+					'id' => '',
+				),
+				'choices' => $choices,
+				'default_value' => array(
+				),
+				'allow_null' => 1,
+				'multiple' => 0,
+				'ui' => 0,
+				'return_format' => 'value',
+				'ajax' => 0,
+				'placeholder' => '',
+			),
+		),
+		'location' => array(
+			array(
+				array(
+					'param' => 'post_type',
+					'operator' => '==',
+					'value' => 'page',
+				),
+			),
+		),
+		'menu_order' => 0,
+		'position' => 'side',
+		'style' => 'default',
+		'label_placement' => 'top',
+		'instruction_placement' => 'label',
+		'hide_on_screen' => '',
+		'active' => true,
+		'description' => '',
+	));
+}
+add_action( 'acf/init', 'ea_page_layout_metabox' );
+
 /**
 * Register widget area.
 *
@@ -58,29 +165,18 @@ function ea_widget_area_args( $args = array() ) {
 
 }
 
-/**
- * Layout Options
- *
- */
-function ea_page_layout_options() {
-	return [
-		'content-sidebar',
-		'wide-content',
-		'full-width-content',
-	];
-}
-
 /**
 * Page Layout
 *
 */
-function ea_page_layout() {
+function ea_page_layout( $id = false ) {
 
 	$available_layouts = ea_page_layout_options();
 	$layout = 'content-sidebar';
 
-	if( is_singular() ) {
-		$selected = get_post_meta( get_the_ID(), 'ea_page_layout', true );
+	if( is_singular() || $id ) {
+		$id = $id ? intval( $id ) : get_the_ID();
+		$selected = get_post_meta( $id, 'ea_page_layout', true );
 		if( !empty( $selected ) && in_array( $selected, $available_layouts ) )
 			$layout = $selected;
 	}
@@ -108,9 +204,9 @@ function ea_return_content_sidebar() {
 }
 
 /**
-* Return Sidebar Content
+* Return Content
 * used when filtering 'ea_page_layout'
 */
-function ea_return_sidebar_content() {
-	return 'sidebar-content';
+function ea_return_content() {
+	return 'content';
 }

inc/wordpress-cleanup.php

@@ -68,7 +68,7 @@ function ea_clean_body_classes( $classes ) {
 		'admin-bar',
 		'full-width-content',
 		'content-sidebar',
-		'wide-content',
+		'content',
 	];
 
 	return array_intersect( $classes, $allowed_classes );