From 49592a34a2624b1de5916cdca4e732034320b523 Mon Sep 17 00:00:00 2001
From: Sami Keijonen <sami.keijonen@foxnet.fi>
Date: Sat, 11 Nov 2017 19:14:35 +0200
Subject: [PATCH 1/2] Use div in text columns and create responsive grid.

---
 blocks/library/text-columns/index.js          |  8 ++---
 blocks/library/text-columns/style.scss        | 34 +++++++------------
 blocks/test/fixtures/core__text-columns.html  |  4 +--
 blocks/test/fixtures/core__text-columns.json  |  2 +-
 .../fixtures/core__text-columns.parsed.json   |  2 +-
 .../core__text-columns.serialized.html        |  4 +--
 6 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/blocks/library/text-columns/index.js b/blocks/library/text-columns/index.js
index b94546ace21826..ab209b2e4c3693 100644
--- a/blocks/library/text-columns/index.js
+++ b/blocks/library/text-columns/index.js
@@ -81,7 +81,7 @@ registerBlockType( 'core/text-columns', {
 					/>
 				</InspectorControls>
 			),
-			<section className={ `${ className } align${ width } columns-${ columns }` } key="block">
+			<div className={ `${ className } align${ width } columns-${ columns }` } key="block">
 				{ times( columns, ( index ) =>
 					<div className="wp-block-column" key={ `column-${ index }` }>
 						<Editable
@@ -102,20 +102,20 @@ registerBlockType( 'core/text-columns', {
 						/>
 					</div>
 				) }
-			</section>,
+			</div>,
 		];
 	},
 
 	save( { attributes } ) {
 		const { width, content, columns } = attributes;
 		return (
-			<section className={ `align${ width } columns-${ columns }` }>
+			<div className={ `align${ width } columns-${ columns }` }>
 				{ times( columns, ( index ) =>
 					<div className="wp-block-column" key={ `column-${ index }` }>
 						<p>{ content && content[ index ].children }</p>
 					</div>
 				) }
-			</section>
+			</div>
 		);
 	},
 } );
diff --git a/blocks/library/text-columns/style.scss b/blocks/library/text-columns/style.scss
index a795f562015e7e..ac020c6d670de6 100644
--- a/blocks/library/text-columns/style.scss
+++ b/blocks/library/text-columns/style.scss
@@ -1,31 +1,23 @@
 .wp-block-text-columns {
 	display: flex;
+	flex-wrap: wrap;
+	margin-left: -1.5em;
 
-	&.aligncenter {
-		display: flex;
+	.wp-block-column {
+		flex: 1 0 8em;
+		margin-left: 1.5em;
 	}
+}
 
-	.wp-block-column {
-		box-sizing: border-box;
-		margin: 0 16px;
-		padding: 0;
+@supports (grid-area: auto) {
+	.wp-block-text-columns {
+		display: grid;
+		grid-gap: 1.5em;
+		grid-template-columns: repeat( auto-fit,minmax( 8em, 1fr ) );
+		margin-left: 0;
 
-		&:first-child {
+		.wp-block-column {
 			margin-left: 0;
 		}
-
-		&:last-child {
-			margin-right: 0;
-		}
-	}
-
-	&.columns-2 .wp-block-column {
-		width: calc( 100% / 2 );
-	}
-	&.columns-3 .wp-block-column {
-		width: calc( 100% / 3 );
-	}
-	&.columns-4 .wp-block-column {
-		width: calc( 100% / 4 );
 	}
 }
diff --git a/blocks/test/fixtures/core__text-columns.html b/blocks/test/fixtures/core__text-columns.html
index fcd9d49a9e79d3..a273839c397652 100644
--- a/blocks/test/fixtures/core__text-columns.html
+++ b/blocks/test/fixtures/core__text-columns.html
@@ -1,10 +1,10 @@
 <!-- wp:core/text-columns {"width":"center"} -->
-<section class="wp-block-text-columns aligncenter columns-2">
+<div class="wp-block-text-columns aligncenter columns-2">
     <div class="wp-block-column">
         <p>One</p>
     </div>
     <div class="wp-block-column">
         <p>Two</p>
     </div>
-</section>
+</div>
 <!-- /wp:core/text-columns -->
diff --git a/blocks/test/fixtures/core__text-columns.json b/blocks/test/fixtures/core__text-columns.json
index ef3ee780fa930f..f0caa26a89003a 100644
--- a/blocks/test/fixtures/core__text-columns.json
+++ b/blocks/test/fixtures/core__text-columns.json
@@ -19,6 +19,6 @@
             "columns": 2,
             "width": "center"
         },
-        "originalContent": "<section class=\"wp-block-text-columns aligncenter columns-2\">\n    <div class=\"wp-block-column\">\n        <p>One</p>\n    </div>\n    <div class=\"wp-block-column\">\n        <p>Two</p>\n    </div>\n</section>"
+        "originalContent": "<div class=\"wp-block-text-columns aligncenter columns-2\">\n    <div class=\"wp-block-column\">\n        <p>One</p>\n    </div>\n    <div class=\"wp-block-column\">\n        <p>Two</p>\n    </div>\n</div>"
     }
 ]
diff --git a/blocks/test/fixtures/core__text-columns.parsed.json b/blocks/test/fixtures/core__text-columns.parsed.json
index a7c458a517c2b5..a03bb73ef01121 100644
--- a/blocks/test/fixtures/core__text-columns.parsed.json
+++ b/blocks/test/fixtures/core__text-columns.parsed.json
@@ -5,7 +5,7 @@
             "width": "center"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<section class=\"wp-block-text-columns aligncenter columns-2\">\n    <div class=\"wp-block-column\">\n        <p>One</p>\n    </div>\n    <div class=\"wp-block-column\">\n        <p>Two</p>\n    </div>\n</section>\n"
+        "innerHTML": "\n<div class=\"wp-block-text-columns aligncenter columns-2\">\n    <div class=\"wp-block-column\">\n        <p>One</p>\n    </div>\n    <div class=\"wp-block-column\">\n        <p>Two</p>\n    </div>\n</div>\n"
     },
     {
         "attrs": {},
diff --git a/blocks/test/fixtures/core__text-columns.serialized.html b/blocks/test/fixtures/core__text-columns.serialized.html
index cfed9fc433e6a9..34ce5cd31ac624 100644
--- a/blocks/test/fixtures/core__text-columns.serialized.html
+++ b/blocks/test/fixtures/core__text-columns.serialized.html
@@ -1,10 +1,10 @@
 <!-- wp:text-columns {"width":"center"} -->
-<section class="wp-block-text-columns aligncenter columns-2">
+<div class="wp-block-text-columns aligncenter columns-2">
     <div class="wp-block-column">
         <p>One</p>
     </div>
     <div class="wp-block-column">
         <p>Two</p>
     </div>
-</section>
+</div>
 <!-- /wp:text-columns -->

From b65c74d8ee22bc71d9fd1a36664fcbfeab6b3a59 Mon Sep 17 00:00:00 2001
From: Sami Keijonen <sami.keijonen@foxnet.fi>
Date: Sun, 31 Dec 2017 22:23:48 +0200
Subject: [PATCH 2/2] Remove responsive grid CSS.

---
 blocks/library/text-columns/style.scss | 34 ++++++++++++++++----------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/blocks/library/text-columns/style.scss b/blocks/library/text-columns/style.scss
index ac020c6d670de6..a795f562015e7e 100644
--- a/blocks/library/text-columns/style.scss
+++ b/blocks/library/text-columns/style.scss
@@ -1,23 +1,31 @@
 .wp-block-text-columns {
 	display: flex;
-	flex-wrap: wrap;
-	margin-left: -1.5em;
 
-	.wp-block-column {
-		flex: 1 0 8em;
-		margin-left: 1.5em;
+	&.aligncenter {
+		display: flex;
 	}
-}
 
-@supports (grid-area: auto) {
-	.wp-block-text-columns {
-		display: grid;
-		grid-gap: 1.5em;
-		grid-template-columns: repeat( auto-fit,minmax( 8em, 1fr ) );
-		margin-left: 0;
+	.wp-block-column {
+		box-sizing: border-box;
+		margin: 0 16px;
+		padding: 0;
 
-		.wp-block-column {
+		&:first-child {
 			margin-left: 0;
 		}
+
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+
+	&.columns-2 .wp-block-column {
+		width: calc( 100% / 2 );
+	}
+	&.columns-3 .wp-block-column {
+		width: calc( 100% / 3 );
+	}
+	&.columns-4 .wp-block-column {
+		width: calc( 100% / 4 );
 	}
 }