Skip to content

Commit a589d58

Browse files
germanfrelogermanfrelo
committed
feat: Refactor and change tons of styles
1 parent 3e062da commit a589d58

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+493
-370
lines changed

‎includes/block-style-variations.php‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -42,33 +42,22 @@ function themeslug_unregister_block_style_variations() {
4242
function themeslug_register_block_style_variations() {
4343
register_block_style(
4444
[
45-
'core/button',
46-
'core/read-more'
47-
],
48-
[
49-
'name' => 'outlined',
50-
'label' => __( 'Outlined', 'themeslug' )
51-
]
52-
);
53-
54-
register_block_style(
55-
[
56-
'core/button',
57-
'core/read-more'
45+
'core/details'
5846
],
5947
[
60-
'name' => 'plain',
61-
'label' => __( 'Plain', 'themeslug' )
48+
'name' => 'custom',
49+
'label' => __( 'Personalizado', 'themeslug' )
6250
]
6351
);
6452

6553
register_block_style(
6654
[
67-
'core/details'
55+
'core/heading',
56+
'core/post-title'
6857
],
6958
[
70-
'name' => 'custom',
71-
'label' => __( 'Custom', 'themeslug' )
59+
'name' => 'eyebrow',
60+
'label' => __( 'Eyebrow', 'themeslug' )
7261
]
7362
);
7463

@@ -98,7 +87,7 @@ function themeslug_register_block_style_variations() {
9887
],
9988
[
10089
'name' => 'external',
101-
'label' => __( 'External', 'themeslug' )
90+
'label' => __( 'Enlace externo', 'themeslug' )
10291
]
10392
);
10493

@@ -108,7 +97,7 @@ function themeslug_register_block_style_variations() {
10897
],
10998
[
11099
'name' => 'direction-reversed',
111-
'label' => __( 'Reversed direction', 'themeslug' )
100+
'label' => __( 'Dirección inversa', 'themeslug' )
112101
]
113102
);
114103
}

‎includes/styles.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ function themeslug_remove_wp_block_styles() {
106106
wp_dequeue_style('wp-block-post-template');
107107
wp_dequeue_style('wp-block-post-title');
108108
wp_dequeue_style('wp-block-quote');
109+
wp_dequeue_style('wp-block-read-more');
109110
wp_dequeue_style('wp-block-search');
110111
wp_dequeue_style('wp-block-site-logo');
111112
wp_dequeue_style('wp-block-site-title');

‎src/styles/blocks/button-outlined.css‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/styles/blocks/button-plain.css‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/styles/blocks/button.css‎

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
/* ======================================================================
2-
Button
2+
BUTTON
33
---
44
Notes:
55
- To customize most of this block and its parts, use the custom properties.
66
====================================================================== */
77

88
.button,
9-
.wp-block-button__link,
10-
.wp-block-read-more,
11-
.wp-element-button {
9+
.wp-element-button,
10+
.wp-block-button__link {
1211
display: var(--button-display, inline-block);
1312
align-content: center;
1413
min-inline-size: var(--field-min-size-inline, 24px);
@@ -19,6 +18,8 @@ Notes:
1918
font-weight: var(--button-font-weight, inherit);
2019
line-height: var(--button-line-height, inherit);
2120
color: var(--button-color, inherit);
21+
text-transform: var(--button-text-transform, inherit);
22+
letter-spacing: var(--button-letter-spacing, inherit);
2223
text-decoration-line: var(--button-line, none);
2324
background-color: var(--button-color-bg, transparent);
2425
border-color: var(--button-border-color, currentcolor);
@@ -31,8 +32,8 @@ Notes:
3132
text-align: var(--button-text-align, center);
3233
}
3334

34-
/* WP: Revert default 'pointer' cursor on elements without an 'href'. */
35-
&:where(:not(:any-link)) {
35+
/* WP: Revert default 'pointer' cursor on button-like links without an 'href'. */
36+
&:where(a:not([href])) {
3637
cursor: revert;
3738
}
3839

@@ -49,6 +50,12 @@ Notes:
4950
border-color: var(--button-border-color-on-hover, var(--button-border-color));
5051
}
5152

53+
&:is(:active) {
54+
color: var(--button-color-on-active, var(--button-color-on-hover));
55+
background-color: var(--button-color-bg-on-active, var(--button-color-bg-on-hover));
56+
border-color: var(--button-border-color-on-active, var(--button-border-color-on-hover));
57+
}
58+
5259
/* Has icon */
5360
&:has(> :is(img, svg, .icon)),
5461
.wp-block-button.has-icon > & {
@@ -72,7 +79,7 @@ Notes:
7279
}
7380

7481
/* Icon: External Link */
75-
.wp-block-button.has-icon > &:any-link[rel~="external"] {
82+
.wp-block-button.has-icon > &a:where([href])[rel~="external"] {
7683
--button-gap: 0.5ch;
7784

7885
&::after {
@@ -87,3 +94,45 @@ Notes:
8794
}
8895
}
8996
}
97+
98+
/* ----------------------------------------------------------------------
99+
Variants
100+
---------------------------------------------------------------------- */
101+
102+
:is(.button, .wp-block-button) {
103+
/* Appearance */
104+
105+
&[data-button-appearance="inverse"] {
106+
--button-color: var(--wp--preset--color--primary);
107+
--button-color-on-hover: var(--wp--preset--color--primary);
108+
--button-color-on-active: var(--wp--preset--color--primary);
109+
--button-color-bg: var(--wp--preset--color--surface);
110+
--button-color-bg-on-hover: var(--wp--preset--color--surface);
111+
--button-color-bg-on-active: var(--wp--preset--color--surface);
112+
}
113+
114+
&[data-button-appearance="outlined"] {
115+
--button-color: var(--wp--preset--color--primary);
116+
--button-color-on-hover: var(--wp--preset--color--primary);
117+
--button-color-on-active: var(--wp--preset--color--primary);
118+
--button-color-bg: transparent;
119+
--button-color-bg-on-hover: color-mix(in srgb, var(--button-color), transparent 95%);
120+
--button-color-bg-on-active: color-mix(in srgb, var(--button-color), transparent 90%);
121+
--button-border-color: currentcolor;
122+
--button-border-color-on-hover: currentcolor;
123+
--button-border-color-on-active: currentcolor;
124+
}
125+
126+
&[data-button-appearance="plain"] {
127+
--button-line: underline;
128+
--button-color: var(--link-color);
129+
--button-color-on-hover: var(--link-color-on-hover-focus);
130+
--button-color-on-active: var(--link-color-on-hover-focus);
131+
--button-color-bg: transparent;
132+
--button-color-bg-on-hover: transparent;
133+
--button-color-bg-on-active: transparent;
134+
--button-border-color: transparent;
135+
--button-border-color-on-hover: transparent;
136+
--button-border-color-on-active: transparent;
137+
}
138+
}

‎src/styles/blocks/card.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.card {
2+
padding: var(--card-padding, 1.5em);
3+
background-color: var(--card-color-bg);
4+
border-color: var(--card-border-color);
5+
border-style: solid;
6+
border-width: var(--card-border-width, thin);
7+
border-radius: var(--card-border-radius);
8+
9+
:is(h1, h2, h3, h4, h5, h6) {
10+
font-size: var(--wp--preset--font-size--mm, revert);
11+
hyphens: auto;
12+
}
13+
}

‎src/styles/blocks/details-custom.css‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,28 @@ Details - Custom style
33
====================================================================== */
44

55
.wp-block-details.is-style-custom {
6-
--details-color-bg: var(--wp--preset--color--surface-2);
7-
--details-padding-top: var(--wp--preset--spacing--2-xs);
8-
--details-padding-bottom: var(--wp--preset--spacing--2-xs);
9-
--details-padding-left: var(--wp--preset--spacing--xs);
10-
--details-padding-right: var(--wp--preset--spacing--xs);
11-
--details-border-radius: var(--wp--preset--border-radius--2-xs);
12-
--details-summary-font-weight: var(--wp--custom--font-weight--bold);
6+
--details-border-color: var(--wp--preset--color--surface-4);
7+
--details-border-width: var(--wp--custom--border-width--thin);
8+
--details-color-bg: transparent;
9+
--details-color-bg-on-hover-focus: var(--wp--preset--color--surface-2);
10+
--details-padding-top: 1em;
11+
--details-padding-bottom: 1em;
12+
--details-padding-left: 1em;
13+
--details-padding-right: 1em;
14+
--details-summary-cursor: pointer;
1315
--details-summary-gap: 1ch;
14-
--details-summary-letter-spacing: normal;
15-
--details-summary-line-height: inherit;
1616
--details-icon-color: var(--wp--preset--color--primary);
17-
--details-icon-color-on-hover: var(--wp--preset--color--text);
1817
--details-icon-size: 2rem;
19-
--details-icon-image: url("../assets/svg/icon-chevron-down.svg");
20-
--details-content-font-size: inherit;
21-
--details-content-padding-top: var(--wp--preset--spacing--xs);
18+
--details-icon-image: url("../../assets/svg/icon-plus.svg");
19+
--details-open-icon-image: url("../../assets/svg/icon-line-solid.svg");
20+
--details-content-padding-top: var(--details-padding-top);
2221

23-
&:has(> summary:is(:hover, :focus-visible)) {
24-
--details-color-bg: var(--wp--preset--color--surface-3);
22+
& + & {
23+
border-block-start: var(--separator-thickness, thin) solid;
24+
}
25+
26+
.is-layout-flow > :where(& + &) {
27+
margin-block-start: 0;
2528
}
2629

2730
> summary {
@@ -59,6 +62,7 @@ Details - Custom style
5962

6063
/* When Details is Open */
6164
&[open] > summary::after {
62-
rotate: 0.5turn;
65+
background-color: var(--details-icon-color-on-hover, var(--details-icon-color, currentcolor));
66+
mask-image: var(--details-open-icon-image, none);
6367
}
6468
}

‎src/styles/blocks/heading-eyebrow.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* ======================================================================
2+
Heading - Style Variation: Eyebrow
3+
====================================================================== */
4+
5+
:is(h1, h2, h3, h4, h5, h6).is-style-eyebrow {
6+
font-size: var(--wp--preset--font-size--s);
7+
line-height: var(--wp--custom--line-height--slim);
8+
text-transform: uppercase;
9+
letter-spacing: var(--wp--custom--letter-spacing--uppercase);
10+
}

‎src/styles/blocks/logo-grid.css‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
1-
/* ======================================================================
2-
Logo Grid
3-
====================================================================== */
4-
51
.logo-grid {
6-
&.grid {
7-
--grid-placement: auto-fit;
8-
--grid-min-item-size: 8rem;
9-
place-items: center;
10-
}
11-
12-
img {
13-
max-block-size: var(--wp--preset--spacing--l-xl);
14-
object-fit: contain;
15-
}
2+
--grid-item-min-size: 8rem;
3+
place-items: center;
164
}

‎src/styles/blocks/pattern-image-content.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.pattern-image-content-container {
2+
container: pattern-image-content / inline-size;
3+
overflow: hidden;
4+
resize: horizontal;
5+
6+
.wp-block-image img {
7+
inline-size: 100%;
8+
block-size: 100%;
9+
aspect-ratio: 2 / 1;
10+
object-fit: cover;
11+
}
12+
13+
@container pattern-image-content (width > 50rem) {
14+
.wp-block-image img {
15+
aspect-ratio: auto;
16+
}
17+
}
18+
19+
&:nth-of-type(1) {
20+
@container pattern-image-content (width > 50rem) {
21+
.pattern-image-content {
22+
display: flex;
23+
}
24+
}
25+
}
26+
27+
&:nth-of-type(2) {
28+
.pattern-image-content {
29+
display: grid;
30+
}
31+
32+
@container pattern-image-content (width > 50rem) {
33+
.pattern-image-content {
34+
grid-template-columns: auto auto;
35+
}
36+
}
37+
}
38+
}

0 commit comments

Comments
 (0)