Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#5] Logo Grid UI #28

Merged
merged 6 commits into from
Apr 25, 2024
Merged

[#5] Logo Grid UI #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c6de437
[#5] Style logo grid using Tailwind
Apr 24, 2024
8b81440
Add fix for image size in editor, move style directory
Apr 24, 2024
fb3612e
Create column classes minus gap
Apr 24, 2024
359d9c3
Spacing cleanup
Apr 24, 2024
808e95b
Nest CSS, add aspect ratio to figure
Apr 25, 2024
b3078fc
Remove call to CSS in block.json
Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions wp-content/themes/wp-starter/blocks/logo-grid/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -46,9 +52,6 @@
"allowCustomContentAndWideSize": false
}
},
"style": [
"file:./style.css"
],
"acf": {
"mode": "preview"
}
Expand Down
11 changes: 0 additions & 11 deletions wp-content/themes/wp-starter/blocks/logo-grid/style.css
View file
Open in desktop

This file was deleted.

20 changes: 20 additions & 0 deletions wp-content/themes/wp-starter/src/styles/blocks/logo-grid.css
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have CSS nesting added so let's nest the CSS so it is less tags.

Original file line number Diff line number Diff line change
@@ -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;
}
}
}
1 change: 1 addition & 0 deletions wp-content/themes/wp-starter/src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@
@import "./blocks/buttons.css";
@import "./blocks/cta.css";
@import "./blocks/accordion.css";
@import "./blocks/logo-grid.css";
7 changes: 7 additions & 0 deletions wp-content/themes/wp-starter/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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))',
},
Comment on lines +46 to +49
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Column widths cannot be calculated correctly unless the gap is subtracted from the column width.

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.
Expand Down
Loading