1:1 Gutenberg ACF Block Styles in the Back End

/**
 *
 * Prerequisites: 
 * (1) All of your Gutenberg block Sass is in its own folder, or somewhere separated from the rest of your Sass. `components/blocks/*` is the location of the Sass in this example.
 * (2) Your variables, mixins, functions, etc. are separated from the rest of your sass. Mixin/variables/function files DO NOT CONTAIN any styling whatsoever -- just definitions.
 * (3) Do not use the class wp-block anywhere in your custom Gutenblock templates.
 *
 * Steps:
 * 1. Create a new file, editor-style.scss, alongside your style.scss -- do not use an underscore to start filename as this is not a partial
 * 2. Import your block Sass, your mixins, variables, and functions, as well as any external libraries, in patterns shown below
 * 3. Compile your assets with your front end build, you should end up with an independent file editor-style.css alongside your style.css in your `/dist/css/` folder
 * 4. Enqueue editor-style.css on the enqueue_block_editor_assets action to get it to output in wp-admin
 * 
 */

// import a custom font if you are using one
@import url('https://fonts.googleapis.com/css2?family=Prompt&wght@100;400;800&display=swap');

// External Libraries -- import any tools you are using from your node_modules here. If you have a lot of node_modules tools to import, it might be best to create a "vendor" Sass file that you can just import once into this Gutenblock editor-style.scss and the main style.scss file.

@import '../node_modules/breakpoint-sass/stylesheets/breakpoint';
@import '../node_modules/sass-toolkit/stylesheets/toolkit';

//Utilities -- import your functions, variables, and everything else you need to use within the blocks that is NOT a style on an element (e.g., do not import buttons here)
@import 'utilities/functions/**/*';
@import 'utilities/variables/**/*';
@import 'utilities/mixins/**/*';

// here is where magic happens -- .wp-block is the wrapper class used in wp-admin to output blocks. Put your gutenberg-specific Sass imported WITHIN the .wp-block wrapper so it doesn't break everything else in the admin area with custom styling.
.wp-block {
	@import 'components/blocks/*';
	// if there's anything else you need to import to make stuff look right (e.g., buttons) import it here.
	@import 'base/elements/buttons';

  	// if you need to add custom styles to make your stuff look right in the admin you can do it here - in this case it was squishing everything down to a tiny percent of the editor and the custom styles look much better when full width
	width: 100%;
	max-width: none;

	.acf-block-preview {
		font-family: 'Prompt', sans-serif;
	}

}

Thank you so much! 🎉