Making Marketers Delight 100% Gutenberg ready

2-backend-css.php

<?php
add_action(
	'enqueue_block_editor_assets',
	function () {
		$theme = wp_get_theme();
		wp_enqueue_style(
		'block-md-custom-css', '/wp-content/themes/md-child/custom-editor.css?v=1'
		);
	}
);
?>

3-custom-editor.css

/* Mostly replaces some default theme css that is loaded in block-editor */
@media all and (min-width: 900px) {
                #editor .alignfull,#editor .aligncenter.wrap,#editor .alignleft.wrap,div.editor-styles-wrapper .alignfull,div.editor-styles-wrapper .aligncenter.wrap,div.editor-styles-wrapper .alignleft.wrap, .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper > :where(:not(.alignleft):not(.alignright):not(.alignfull)), .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
                    max-width:inherit;
                }

                #editor .alignwide,#editor .aligncenter.wrap-small,#editor .alignleft.wrap-small,div.editor-styles-wrapper .wp-block[data-align="wide"],div.editor-styles-wrapper .alignwide,div.editor-styles-wrapper .aligncenter.wrap-small,div.editor-styles-wrapper .alignleft.wrap-small {
                    max-width: inherit;
                }

                .md-editor-full div.editor-styles-wrapper .alignwide,div.editor-styles-wrapper .wp-block[data-align="wide"],.md-editor-full div.editor-styles-wrapper .aligncenter.wrap-small,.md-editor-full div.editor-styles-wrapper .alignleft.wrap-small {
                    max-width: inherit;
                }
            }
 /* GenerateBlocks and alignment fixes /
.wp-block.gb-root-block-generateblocks-container[data-align="full"], div.editor-styles-wrapper .wp-block.alignfull, .wp-block[data-align="full"]{
	max-width:none!important;
}
div.editor-styles-wrapper .wp-block.alignwide, .wp-block.gb-root-block-generateblocks-container[data-align="wide"], .wp-block[data-align="wide"]{
	max-width:1148px!important;
}

4-image-sizes.php

<?php
// Adds important images sizes to image size dropdowns

add_filter( 'image_size_names_choose','md_custom_image_sizes' );

function md_custom_image_sizes( $sizes ) {
	return array_merge( $sizes, array(
	//Add your custom sizes here
	'md-full' => __( 'MD Full' ),
	'md-banner' => __( 'MD Banner' ),
	'md-block' => __( 'MD Block' ),
	'1200w' => __( 'Width 1200' ),
	'1200-crop' => __( 'Square 1200' ),
	)
					 );
}
add_action( 'init', function() {
add_image_size( '1200w', 1200, false ); // important for native responsive images
add_image_size( '1200-crop', 1200, 1200, true ); // important for native responsive images
remove_image_size( '1536x1536' );             // 2 x Medium Large (1536 x 1536) waste of storage
remove_image_size( '2048x2048' );             // 2 x Large (2048 x 2048) waste of storage
} );
?>

theme.json

{
    "version": 2,
    "settings": {
      "color": {
        "defaultPalette": false, /* removes default colors */
        "duotone": [], /* removes duotone */
        "customDuotone": false, /* removes duotone */
        "defaultGradients": false, /* removes default gradients */
        "palette": [
		{
            "name": "Primary",
            "slug": "primary",
            "color": "#c0392b" /* these taken from md_colors settings */
        },
        {
            "name": "Secondary",
            "slug": "secondary",
            "color": "#43a047" 
        },
          {
            "name": "Tertiary",
            "slug": "tertiary",
            "color": "#001e12"
          },
          {
            "name": "Action",
            "slug": "action",
            "color": "#1944a8"
          },
          {
            "name": "Accent",
            "slug": "accent",
            "color": "#ffd700"
          },
          {
            "name": "White",
            "slug": "white",
            "color": "#ffffff"
          },
          {
            "name": "Text Secondary",
            "slug": "text-sec",
            "color": "#555555"
          },
          {
            "name": "Button Secondary",
            "slug": "button-sec",
            "color": "#001947"
          },
          {
            "name": "Almond",
            "slug": "almond",
            "color": "#ffebcd"
          },
          {
            "name": "Bodified",
            "slug": "bodified",
            "color": "#faf8f6"
          },
          {
            "name": "BlueAlice",
            "slug": "aliceblue",
            "color": "#f0f8ff"
          },
          {
            "name": "Peach",
            "slug": "peach",
            "color": "#ffdab9"
          },
          {
            "name": "Thistle",
            "slug": "thistle",
            "color": "#d8bfd8"
          },
          {
            "name": "Yellow Green",
            "slug": "yellow-green",
            "color": "#9acd32"
          },
			{
            "name": "Bordered",
            "slug": "bordered",
            "color": "#dddddd"
          }
        ]
      },
      "appearanceTools": true,
      "spacing": {
        "blockGap": true,
        "margin": true,
        "padding": true,
        "units": ["%","px","em","rem","vh","vw"]
        },
      "typography": {
        "customFontSize": true,
        "customLineHeight": true,
        "dropCap": true,
        "fontSizes": [
          {
            "size": "15px",
            "name": "Small",
            "slug": "small"
          },
          {
            "size": "18px",
            "name": "Medium",
            "slug": "medium"
          },
			{
			"size": "26px",
            "name": "Medium Large",
            "slug": "medium-large"
          },
          {
            "size": "36px",
            "name": "Large",
            "slug": "large"
          },
          {
            "size": "42px",
            "name": "Extra Large",
            "slug": "x-large"
          }
        ]
      },
      "layout": {
        "contentSize": "700px",
        "wideSize": "1148px"
      },
      "typography": {
        "fontFamilies": [
            {
                "fontFamily": "ZeroSansWeb, ui-sans-serif, system-ui, sans-serif", /* @TODO */
                "slug": "sans-fonts",
                "name": "Sans fonts"
            },
            {
                "fontFamily": "Iowan, Charter, Georgia, serif",
                "slug": "serif-fonts",
                "name": "Serif Fonts"
            }
        ]
    }
    },
    "styles": {
		"blocks": {
			"core/group": {
				"spacing": {
					"margin": {
						"bottom": "1em"
					},
					"padding": { // very important
						"top": "2em",
						"bottom": "2em",
						"left":"1em",
						"right":"1em"
					}
				}
			},
			"core/image": {
				"spacing": {
					"margin": {
						"top": "1em",
						"bottom":"1em"
					}
				}
			}
	},
	"spacing": {
      "blockGap": "2em" /* change as per your spacing needs 2em is great btw */
    },
      "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#c0392b" /* appears native in backend and front end */
            },
			"border":{
				"radius": "5px"
			}
        },
        "link": {
            "color": {
                "text": "#c0392b"
            }
        }
    }
    }
  }