Remove front.css

README.md

@@ -81,3 +81,7 @@ You can test the Layout Grid with:
 
 - `yarn layout`
 - `yarn jest`
+
+You can update the visual snapshots with:
+
+- `yarn jest -u`

blocks/layout-grid/editor.scss

@@ -23,7 +23,7 @@
 }
 
 // 3. Unset margins and paddings for column container.
-.wp-block-jetpack-layout-grid [data-type="jetpack/layout-grid-column"].wp-block { // Selector needs specificity to override.
+.wp-block-jetpack-layout-grid-editor [data-type="jetpack/layout-grid-column"].wp-block { // Selector needs specificity to override.
 	margin: 0;
 	padding-left: 0;
 	padding-right: 0;
@@ -118,7 +118,7 @@
  * Placeholder options
  */
 
-.wp-block-jetpack-layout-grid .block-editor-inner-blocks__template-picker-options {
+.wp-block-jetpack-layout-grid-editor .block-editor-inner-blocks__template-picker-options {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
@@ -213,7 +213,7 @@
 /**
  * Individual column alignment for the editor
  */
-.wp-block-jetpack-layout-grid {
+.wp-block-jetpack-layout-grid-editor {
 	&.are-vertically-aligned-top [data-type="jetpack/layout-grid-column"].wp-block {
 		align-self: flex-start;
 	}

blocks/layout-grid/index.php

@@ -6,30 +6,13 @@
 		'editor_script' => 'block-experiments',
 		'style' => 'block-experiments',
 		'editor_style' => 'block-experiments-editor',
-		'render_callback' => function( $attribs, $content ) {
-			wp_enqueue_style( 'wpcom-layout-grid-front' );
-			return $content;
-		},
 	] );
 
 	register_block_type( 'jetpack/layout-grid-column', [
 		'editor_script' => 'block-experiments',
 		'style' => 'block-experiments',
 		'editor_style' => 'block-experiments-editor',
-		'render_callback' => function( $attribs, $content ) {
-			wp_enqueue_style( 'wpcom-layout-grid-front' );
-			return $content;
-		},
 	] );
 
 	wp_set_script_translations( 'block-experiments', 'layout-grid' );
 } );
-
-add_action( 'wp_enqueue_scripts', function() {
-	wp_register_style(
-		'wpcom-layout-grid-front',
-		plugins_url( 'front.css', __FILE__ ),
-		[], // no dependencies
-		filemtime( plugin_dir_path( __FILE__ ) . 'front.css' )
-	);
-} );

blocks/layout-grid/src/grid-overlay.scss

@@ -74,7 +74,7 @@
 				($grid-gutter-medium / 2) 0 0 0 currentColor;
 			}
 		}
-		
+
 		// Huge gutter.
 		.wp-block-jetpack-layout-gutter__huge & {
 			.is-selected & {

blocks/layout-grid/src/grid-resize.scss

@@ -4,7 +4,7 @@
  * Resize grid overlay
  */
 
-.wp-block-jetpack-layout-grid .wpcom-resize-grid {
+.wp-block-jetpack-layout-grid-editor .wpcom-resize-grid {
 	user-select: none;
 	position: absolute;
 	top: 0;
@@ -19,19 +19,19 @@
 	}
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__none .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
 	grid-gap: $grid-gutter-none;
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__small .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
 	grid-gap: $grid-gutter-small;
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__medium .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
 	grid-gap: $grid-gutter-medium;
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__huge .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
 	grid-gap: $grid-gutter-huge;
 }
 

blocks/layout-grid/src/grid.scss

@@ -5,7 +5,7 @@
  */
 
 // Output editor specific styles.
-.wp-block-jetpack-layout-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
+.wp-block-jetpack-layout-grid-editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	display: grid;
 	grid-gap: 24px;
 	grid-template-columns: $grid-desktop;
@@ -32,24 +32,24 @@
 	overflow-wrap: break-word; // New standard.
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none > .block-editor-inner-blocks > .block-editor-block-list__layout {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__none > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	grid-gap: $grid-gutter-none;
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small > .block-editor-inner-blocks > .block-editor-block-list__layout {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__small > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	grid-gap: $grid-gutter-small;
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium > .block-editor-inner-blocks > .block-editor-block-list__layout {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__medium > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	grid-gap: $grid-gutter-medium;
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge > .block-editor-inner-blocks > .block-editor-block-list__layout {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__huge > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	grid-gap: $grid-gutter-huge;
 }
 
 // Editor grid styles
-.wp-block-jetpack-layout-grid {
+.wp-block-jetpack-layout-grid-editor {
 	// These three rules are only necessary for Safari.
 	// Safari interprets percentages in CSS grid differently.
 	// Flex causes children to "stretch", fixing that interpretation.
@@ -92,15 +92,15 @@
  * Presets for tablet and mobile - switch the number of columns and layout
  */
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-tablet {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-tablet {
 	.wpcom-overlay-grid,
 	.wpcom-resize-grid,
 	> .block-editor-inner-blocks > .block-editor-block-list__layout {
 		grid-template-columns: $grid-tablet;
 	}
 }
 
-.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-mobile {
+.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-mobile {
 	.wpcom-overlay-grid,
 	.wpcom-resize-grid,
 	> .block-editor-inner-blocks > .block-editor-block-list__layout {

blocks/layout-grid/src/grid/edit.js

@@ -242,7 +242,6 @@ class Edit extends Component {
 			setAttributes,
 			updateAlignment,
 			columnAttributes,
-			previewDeviceType,
 		} = this.props;
 		const { viewPort } = this.state;
 		const previewMode = this.getPreviewMode();
@@ -256,7 +255,11 @@ class Edit extends Component {
 		const { gutterSize, addGutterEnds, verticalAlignment } = attributes;
 		const layoutGrid = new LayoutGrid( attributes, previewMode, columns );
 		const classes = classnames(
-			removeGridClasses( className ),
+			removeGridClasses( className ).replace(
+				'layout-grid',
+				'layout-grid-editor'
+			),
+			'wp-block-jetpack-editor',
 			extra,
 			{
 				'wp-block-jetpack-layout-tablet': previewMode === 'Tablet',