[#5] Logo Grid UI (#28)

* [#5] Style logo grid using Tailwind

* Add fix for image size in editor, move style directory

* Create column classes minus gap

* Spacing cleanup

* Nest CSS, add aspect ratio to figure

* Remove call to CSS in block.json

wp-content/themes/wp-starter/blocks/logo-grid/block.json

@@ -5,7 +5,13 @@
   "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" style=\"enable-background:new 0 0 100 100;\" xml:space=\"preserve\" fill=\"currentColor\"><path d=\"M21.9999504,2.5H9.2724771C5.53866,2.5,2.5007522,5.5386629,2.5007522,9.2717257v12.728982  c0,3.7323093,3.0379093,6.7694645,6.7717247,6.7694645h12.7274752c3.7338181,0,6.7702179-3.0363998,6.7702179-6.7694645V9.2717266  c0-3.7330637-3.0363998-6.7717257-6.7702179-6.7717257L21.9999504,2.5z M25.4089966,21.9993877  c0,1.8775406-1.5307522,3.4082928-3.4098015,3.4082928H9.2722874c-1.8812342,0-3.4105558-1.5307522-3.4105558-3.4082928V9.2711592  c0-1.8812332,1.5292845-3.4105549,3.4105558-3.4105549h12.7274761c1.8790264,0,3.4097996,1.5292835,3.4097996,3.4105549  L25.4089966,21.9993877z\"/><path d=\"M90.7275162,2.5h-12.727478c-3.7338104,0-6.7717209,3.0386629-6.7717209,6.7717257v12.728982  c0,3.7323093,3.0379105,6.7694645,6.7717209,6.7694645h12.727478c3.7338257,0,6.7717285-3.0363998,6.7717285-6.7694645V9.2717266  C97.4992447,5.5386629,94.4613419,2.5000007,90.7275162,2.5z M94.1380692,21.9993877  c0,1.8775406-1.529274,3.4082928-3.410553,3.4082928h-12.727478c-1.8797607,0-3.4097977-1.5307522-3.4097977-3.4082928  l0.0007401-12.7282286c0-1.8812332,1.5292816-3.4105549,3.4097977-3.4105549h12.727478  c1.8812332,0,3.410553,1.5292835,3.410553,3.4105549L94.1380692,21.9993877z\"/><path d=\"M56.3637352,2.5H43.6375809c-3.7323074,0-6.7702141,3.0386629-6.7702141,6.7717257v12.728982  c0,3.7323093,3.0379066,6.7694645,6.7702141,6.7694645h12.7269058c3.7338181,0,6.7717247-3.0363998,6.7717247-6.7694645V9.2717266  C63.1347389,5.5386629,60.0967979,2.5000007,56.3637352,2.5z M59.7750435,21.9993877  c0,1.8775406-1.5285492,3.4082928-3.4105568,3.4082928H43.6375809c-1.8812332,0-3.410553-1.5307522-3.410553-3.4082928V9.2711592  c0-1.8812332,1.5292854-3.4105549,3.410553-3.4105549h12.7269058c1.8819733,0,3.4105568,1.5292835,3.4105568,3.4105549V21.9993877z\"/><path d=\"M21.9999504,71.2275696H9.2724771c-3.7338171,0-6.7717247,3.0386581-6.7717247,6.7717209v12.728981  c0,3.7323151,3.0379093,6.7709808,6.7717247,6.7709808h12.7274752c3.7338181,0,6.7702179-3.0386581,6.7702179-6.7717285V77.9992981  c0-3.7330627-3.0363998-6.7717285-6.7702179-6.7717285H21.9999504z M25.4089966,90.7269592  c0,1.8812332-1.5307522,3.410553-3.4098015,3.410553H9.2722874c-1.8812342,0-3.4105558-1.5292892-3.4105558-3.410553V77.9987259  c0-1.8797607,1.5292845-3.408287,3.4105558-3.408287h12.7274761c1.8790264,0,3.4097996,1.5285492,3.4097996,3.408287  L25.4089966,90.7269592z\"/><path d=\"M90.7275162,71.2275696h-12.727478c-3.7338104,0-6.7717209,3.0386581-6.7717209,6.7717209v12.728981  c0,3.7323151,3.0379105,6.7717285,6.7717209,6.7717285h12.727478c3.7338257-0.0007401,6.7717285-3.0394135,6.7717285-6.7724762  V77.9992905C97.4992447,74.2662277,94.4613419,71.2275696,90.7275162,71.2275696z M94.1380692,90.7269592  c0,1.8812332-1.529274,3.410553-3.410553,3.410553h-12.727478c-1.8797607,0-3.4097977-1.5292892-3.4097977-3.410553  l0.0007401-12.7282333c0-1.8797607,1.5292816-3.408287,3.4097977-3.408287h12.727478  c1.8812332,0,3.410553,1.5285492,3.410553,3.408287L94.1380692,90.7269592z\"/><path d=\"M56.3637352,71.2275696H43.6375809c-3.7323074,0-6.7702141,3.0386581-6.7702141,6.7717209v12.728981  c0,3.7323151,3.0379066,6.7717285,6.7702141,6.7717285h12.7269058c3.7338181,0,6.7717247-3.0386581,6.7717247-6.7717285v-12.728981  C63.1347389,74.2662277,60.0967979,71.2275696,56.3637352,71.2275696z M59.7750435,90.7269592  c0,1.8812332-1.5285492,3.410553-3.4105568,3.410553H43.6375809c-1.8812332,0-3.410553-1.5292892-3.410553-3.410553V77.9987259  c0-1.8797607,1.5292854-3.408287,3.410553-3.408287h12.7269058c1.8819733,0,3.4105568,1.5285492,3.4105568,3.408287V90.7269592z\"/><path d=\"M21.9999504,36.8656693H9.2724771c-3.7338171,0-6.7717247,3.0386658-6.7717247,6.7709732v12.7269058  c0,3.7323074,3.0379093,6.7717247,6.7717247,6.7717247h12.7274752c3.7338181,0,6.7702179-3.038662,6.7702179-6.7717247V43.6366425  c0-3.7323074-3.0363998-6.7709732-6.7702179-6.7709732H21.9999504z M25.4089966,56.3631744  c0,1.8819695-1.5307522,3.410553-3.4098015,3.410553H9.2722874c-1.8812342,0-3.4105558-1.5285492-3.4105558-3.410553V43.6370201  c0-1.8819695,1.5292845-3.410553,3.4105558-3.410553h12.7274761c1.8790264,0,3.4097996,1.5285492,3.4097996,3.410553  L25.4089966,56.3631744z\"/><path d=\"M90.7275162,36.8656693h-12.727478c-3.7338104,0-6.7717209,3.0386658-6.7717209,6.7717247v12.7269096  c0,3.7323074,3.0379105,6.7717247,6.7717209,6.7717247h12.727478c3.7338257,0,6.7717285-3.0386658,6.7717285-6.7717247v-12.727478  c0-3.7323074-3.0379028-6.7709694-6.7717285-6.7709694V36.8656693z M94.1380692,56.3631744  c0,1.8819695-1.529274,3.410553-3.410553,3.410553h-12.727478c-1.8797607,0-3.4097977-1.5285492-3.4097977-3.410553  l0.0007401-12.7261543c0-1.8819695,1.5292816-3.410553,3.4097977-3.410553h12.727478  c1.8812332,0,3.410553,1.5285492,3.410553,3.410553L94.1380692,56.3631744z\"/><path d=\"M56.3637352,36.8656693H43.6375809c-3.7323074,0-6.7702141,3.0386658-6.7702141,6.7717247v12.7269096  c0,3.7323074,3.0379066,6.7717247,6.7702141,6.7717247h12.7269058c3.7338181,0,6.7717247-3.0386658,6.7717247-6.7717247v-12.727478  c-0.0014725-3.7323074-3.0394135-6.7709694-6.7724762-6.7709694V36.8656693z M59.7750435,56.3631744  c0,1.8819695-1.5285492,3.410553-3.4105568,3.410553H43.6375809c-1.8812332,0-3.410553-1.5285492-3.410553-3.410553V43.6370201  c0-1.8819695,1.5292854-3.410553,3.410553-3.410553h12.7269058c1.8819733,0,3.4105568,1.5285492,3.4105568,3.410553V56.3631744z\"/></svg>",
   "category": "components",
   "textdomain": "wp-starter",
-  "keywords": ["logos", "grid", "branding", "brand", "partners"],
+  "keywords": [
+    "logos",
+    "grid",
+    "branding",
+    "brand",
+    "partners"
+  ],
   "attributes": {
     "align": {
       "type": "string",
@@ -46,9 +52,6 @@
       "allowCustomContentAndWideSize": false
     }
   },
-  "style": [
-    "file:./style.css"
-  ],
   "acf": {
     "mode": "preview"
   }

wp-content/themes/wp-starter/src/styles/blocks/logo-grid.css

@@ -0,0 +1,20 @@
+@layer components {
+	.acf-block-logo-grid {
+		& figure {
+			@apply flex;
+			@apply aspect-grid-image;
+			@apply basis-1/2-gap lg:basis-1/4-gap;
+
+			& img {
+				@apply block;
+				@apply max-w-full h-full;
+				@apply object-contain;
+			}
+		}
+
+		/* Fix for image sizing in editor */
+		& .components-resizable-box__container {
+			@apply !shrink;
+		}
+	}
+}

wp-content/themes/wp-starter/src/styles/main.css

@@ -9,3 +9,4 @@
 @import "./blocks/buttons.css";
 @import "./blocks/cta.css";
 @import "./blocks/accordion.css";
+@import "./blocks/logo-grid.css";

wp-content/themes/wp-starter/tailwind.config.js

@@ -30,6 +30,9 @@ export default {
 		contentSmall: minBreakpoint.toString(),
 		contentBase: maxBreakpoint.toString(),
 		extend: {
+			aspectRatio: {
+				'grid-image': '5/3',
+			},
 			colors: {
 				transparent: 'transparent',
 				//If you update the names or add more colors you will need to update the file in theme-json/settings/color.js
@@ -40,6 +43,10 @@ export default {
 					900: "#0a0a0a",
 				},
 			},
+			flexBasis: {
+				'1/2-gap': 'calc((100%/2) - var(--wp--style--block-gap))',
+				'1/4-gap': 'calc((100%/4) - var(--wp--style--block-gap))',
+			},
 			fontFamily: {
 				// If you update the names or add more fonts you will need to update the file in theme-json/settings/typography.js
 				// Fonts are handles WP's font loader.