Skip to content

Commit 74bccd7

Browse files
MaggieCabreraclaude
MaggieCabrera
and
claude
committed
Ipsum: Register the pattern utility classes as block styles.
Pinned to Bottom, Row Hover and Dot Separator, which the patterns used as utility classes, are now block styles, so they show up in the Styles panel and the REST API. The pinned Search Bar's outlined button becomes the Outline style on Search. Nothing changes visually. Synced from WordPress/ipsum#180. See #66352. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1 parent 9674673 commit 74bccd7

20 files changed

Lines changed: 115 additions & 87 deletions

‎src/wp-content/themes/ipsum/assets/css/editor-style.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
* Editor-only overrides. The editors load style.css first, so this file holds
33
* only what the editors need on top of it.
44
*
5-
* Sticky header part and pinned search bar: !important because the editor
6-
* forces position:relative on block wrappers.
5+
* Sticky header part and Pinned to Bottom template parts: !important because
6+
* the editor forces position:relative on block wrappers.
77
*/
88
header.wp-block-template-part:has(> .is-position-sticky),
9-
.sticky-bottom {
9+
.wp-block-template-part.is-style-sticky-bottom {
1010
position: sticky !important;
1111
}

‎src/wp-content/themes/ipsum/functions.php‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,10 @@ function ipsum_search_aria_label_support( $metadata ) {
201201
* The Evening code style keeps the Evening palette's literals on purpose,
202202
* so the block reads as a dark slab under every style variation.
203203
*
204+
* Each style's CSS is an inline style, as in the default themes. Row Hover
205+
* can't move to styles/blocks/, because a theme.json css string cannot hold
206+
* its at-rules and selector lists.
207+
*
204208
* @since Ipsum 1.0
205209
*
206210
* @return void
@@ -223,6 +227,86 @@ function ipsum_register_block_styles() {
223227
'inline_style' => '.wp-block-site-logo.is-style-sharp{border-radius:0;}',
224228
)
225229
);
230+
231+
/*
232+
* Pins the part to the bottom of the viewport, so it belongs at the root
233+
* of the template. It keeps to its content's width at the inline end, so
234+
* the rest of the band doesn't block clicks on the page. The editors also
235+
* need the override in editor-style.css.
236+
*/
237+
register_block_style(
238+
'core/template-part',
239+
array(
240+
'name' => 'sticky-bottom',
241+
'label' => _x( 'Pinned to Bottom', 'Block style label', 'ipsum' ),
242+
'inline_style' => '
243+
.wp-block-template-part.is-style-sticky-bottom {
244+
position: sticky;
245+
inset-block-end: 0;
246+
z-index: 10;
247+
width: fit-content;
248+
margin-inline-start: auto;
249+
}',
250+
)
251+
);
252+
253+
/*
254+
* Outlines the Search button until it is hovered, focused or pressed, when
255+
* the global button states take back over. A theme.json css string would
256+
* wrap this in :where() and only tie with the global button styles.
257+
*/
258+
register_block_style(
259+
'core/search',
260+
array(
261+
'name' => 'outline',
262+
'label' => _x( 'Outline', 'Block style label', 'ipsum' ),
263+
'inline_style' => '
264+
.wp-block-search.is-style-outline .wp-block-search__button.wp-element-button:not(:hover):not(:focus):not(:active) {
265+
background-color: var(--wp--preset--color--base);
266+
border: 1px dotted var(--wp--preset--color--contrast);
267+
color: var(--wp--preset--color--contrast);
268+
}',
269+
)
270+
);
271+
272+
/*
273+
* Hovering any part of a post row colors the whole row and tilts its
274+
* featured image. Targets the row's child blocks, since the Group spans
275+
* the full band. Needs each post's blocks wrapped in one Group.
276+
*/
277+
register_block_style(
278+
'core/post-template',
279+
array(
280+
'name' => 'hover-together',
281+
'label' => _x( 'Row Hover', 'Block style label', 'ipsum' ),
282+
'inline_style' => '
283+
.wp-block-post-template.is-style-hover-together .wp-block-post > .wp-block-group,
284+
.wp-block-post-template.is-style-hover-together .wp-block-post > .wp-block-group a {
285+
transition: color 0.15s ease-out;
286+
}
287+
288+
.wp-block-post-template.is-style-hover-together .wp-block-post > .wp-block-group:has(> :hover),
289+
.wp-block-post-template.is-style-hover-together .wp-block-post > .wp-block-group:has(> :hover) a {
290+
color: var(--wp--preset--color--accent-3);
291+
}
292+
293+
@media (prefers-reduced-motion: no-preference) {
294+
@keyframes tilt-settle {
295+
35% {
296+
transform: rotate(-1deg);
297+
}
298+
299+
100% {
300+
transform: rotate(0deg);
301+
}
302+
}
303+
304+
.wp-block-post-template.is-style-hover-together .wp-block-post > .wp-block-group:has(> :hover) .wp-block-post-featured-image img {
305+
animation: tilt-settle 0.5s ease-out;
306+
}
307+
}',
308+
)
309+
);
226310
}
227311
endif;
228312
add_action( 'init', 'ipsum_register_block_styles' );

‎src/wp-content/themes/ipsum/patterns/archive-compact.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
?>
1515
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Compact', 'Name of the Archive Compact query', 'ipsum' ); ?>"},"layout":{"type":"default"}} -->
16-
<div class="wp-block-query"><!-- wp:post-template {"className":"hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
16+
<div class="wp-block-query"><!-- wp:post-template {"className":"is-style-hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
1717
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Post Template Wrapper', 'Name of the group wrapping each post in a list', 'ipsum' ); ?>"},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"},"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
1818
<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Post Title', 'Name of the group holding the post title', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
1919
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"fontSize":"2-x-large"} /-->

‎src/wp-content/themes/ipsum/patterns/archive-lead.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<!-- /wp:group -->
2121

2222
<!-- wp:query {"query":{"perPage":5,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"ignore","inherit":false,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"name":"<?php echo esc_html_x( 'Archive List', 'Name of the archive list query', 'ipsum' ); ?>"},"layout":{"type":"default"}} -->
23-
<div class="wp-block-query"><!-- wp:post-template {"className":"hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
23+
<div class="wp-block-query"><!-- wp:post-template {"className":"is-style-hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
2424
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Post Template Wrapper', 'Name of the group wrapping each post in a list', 'ipsum' ); ?>"},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"},"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
2525
<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Post Title', 'Name of the group holding the post title', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
2626
<div class="wp-block-group"><!-- wp:post-title {"level":3,"isLink":true,"fontSize":"2-x-large"} /-->

‎src/wp-content/themes/ipsum/patterns/archive-simple.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
?>
1515
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Simple', 'Name of the Archive Simple query', 'ipsum' ); ?>"},"align":"wide","layout":{"type":"default"}} -->
16-
<div class="wp-block-query alignwide"><!-- wp:post-template {"className":"hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"default"}} -->
16+
<div class="wp-block-query alignwide"><!-- wp:post-template {"className":"is-style-hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"default"}} -->
1717
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Archive Row', 'Name of the archive row group', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
1818
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
1919

‎src/wp-content/themes/ipsum/patterns/archive-standard.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
?>
1515
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Standard', 'Name of the Archive Standard query', 'ipsum' ); ?>"},"align":"full","layout":{"type":"default"}} -->
16-
<div class="wp-block-query alignfull"><!-- wp:post-template {"className":"hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"layout":{"type":"default"}} -->
16+
<div class="wp-block-query alignfull"><!-- wp:post-template {"className":"is-style-hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"layout":{"type":"default"}} -->
1717
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Post Template Wrapper', 'Name of the group wrapping each post in a list', 'ipsum' ); ?>"},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"},"padding":{"bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
1818
<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Featured Image Wrapper', 'Name of the group wrapping the featured image', 'ipsum' ); ?>"},"layout":{"type":"default"}} -->
1919
<div class="wp-block-group"><!-- wp:post-featured-image {"isLink":true,"sizeSlug":"large","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20"}}}} /--></div>

‎src/wp-content/themes/ipsum/patterns/hidden-archive-sidebar.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<!-- /wp:group -->
2222

2323
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Simple', 'Name of the Archive Simple query', 'ipsum' ); ?>"},"layout":{"type":"default"}} -->
24-
<div class="wp-block-query"><!-- wp:post-template {"className":"hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"default"}} -->
24+
<div class="wp-block-query"><!-- wp:post-template {"className":"is-style-hover-together","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"default"}} -->
2525
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Archive Row', 'Name of the archive row group', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
2626
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
2727

@@ -69,4 +69,4 @@
6969

7070
<!-- wp:template-part {"slug":"footer-wide","area":"footer"} /-->
7171

72-
<!-- wp:template-part {"slug":"search-bar","className":"sticky-bottom"} /-->
72+
<!-- wp:template-part {"slug":"search-bar","className":"is-style-sticky-bottom"} /-->

‎src/wp-content/themes/ipsum/patterns/hidden-archive.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,4 @@
2222

2323
<!-- wp:template-part {"slug":"footer"} /-->
2424

25-
<!-- wp:template-part {"slug":"search-bar","className":"sticky-bottom"} /-->
25+
<!-- wp:template-part {"slug":"search-bar","className":"is-style-sticky-bottom"} /-->

‎src/wp-content/themes/ipsum/patterns/hidden-comments.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Comment Date and Edit', 'Name of the group holding the comment date and edit link', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
3030
<div class="wp-block-group"><!-- wp:comment-date {"isLink":false} /-->
3131

32-
<!-- wp:comment-edit-link {"className":"dot-before"} /-->
32+
<!-- wp:comment-edit-link {"className":"is-style-dot-before"} /-->
3333

34-
<!-- wp:comment-reply-link {"className":"dot-before"} /--></div>
34+
<!-- wp:comment-reply-link {"className":"is-style-dot-before"} /--></div>
3535
<!-- /wp:group --></div>
3636
<!-- /wp:group --></div>
3737
<!-- /wp:group -->

‎src/wp-content/themes/ipsum/patterns/hidden-index-sidebar.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,4 @@
8181

8282
<!-- wp:template-part {"slug":"footer-wide","area":"footer"} /-->
8383

84-
<!-- wp:template-part {"slug":"search-bar","area":"uncategorized","className":"sticky-bottom"} /-->
84+
<!-- wp:template-part {"slug":"search-bar","area":"uncategorized","className":"is-style-sticky-bottom"} /-->

0 commit comments

Comments
 (0)