Skip to content

Commit

Permalink
Updates to design feedback
Browse files Browse the repository at this point in the history 
- Update search placeholder
- Update single pattern header font
- Add a min-width to the copy button
- Use filled/empty stars for favorites
- Use a smaller border radius for pattern preview
- Update footer

Fixes #633
  • Loading branch information
@ryelle
ryelle committed Mar 7, 2024
1 parent 3acfb58 commit 97b92a9
Show file tree
Hide file tree
Showing 12 changed files with 55 additions and 70 deletions.
15 changes: 7 additions & 8 deletions public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/_footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,23 @@
* Inserter: no
*/

// @todo none of this content is real, once we have an idea, it should be wrapped in i18n functions.
?>
<!-- wp:columns {"style":{"spacing":{"blockGap":"0px","padding":{"right":"0","left":"0","top":"0","bottom":"0"}},"border":{"bottom":{"color":"var:preset|color|white-opacity-15","style":"solid","width":"1px"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"charcoal-1","textColor":"white","className":"is-page-footer"} -->
<div class="wp-block-columns has-white-color has-charcoal-1-background-color has-text-color has-background has-link-color is-page-footer" style="border-bottom-color:var(--wp--preset--color--white-opacity-15);border-bottom-style:solid;border-bottom-width:1px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|50","left":"var:preset|spacing|edge-space"}},"border":{"right":{"color":"var:preset|color|white-opacity-15","width":"1px"},"top":{},"bottom":{},"left":{}}}} -->
<div class="wp-block-column" style="border-right-color:var(--wp--preset--color--white-opacity-15);border-right-width:1px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:heading {"fontSize":"heading-4"} -->
<h2 class="wp-block-heading has-heading-4-font-size"><?php _e( 'What&#8217;s a pattern?', 'wporg' ); ?></h2>
<h2 class="wp-block-heading has-heading-4-font-size"><?php _e( 'What&#8217;s a pattern?', 'wporg-patterns' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"is-style-short-text"} -->
<p class="is-style-short-text"><?php _e( 'A block pattern is a collection of blocks you can insert into your site and customize with your own content. Patterns save you time when composing pages of any kind and are a great way to learn how blocks can be combined to achieve specific layouts.', 'wporg' ); ?></p>
<p class="is-style-short-text"><?php _e( 'A block pattern is a collection of blocks you can insert into your site and customize with your own content. Patterns save you time when composing pages of any kind and are a great way to learn how blocks can be combined to achieve specific layouts.', 'wporg-patterns' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"is-style-outline-on-dark"} -->
<div class="wp-block-button is-style-outline-on-dark"><a class="wp-block-button__link wp-element-button" href="https://wordpress.org/documentation/article/block-pattern/"><?php _e( 'Learn more about using patterns', 'wporg' ); ?></a></div>
<div class="wp-block-button is-style-outline-on-dark"><a class="wp-block-button__link wp-element-button" href="https://wordpress.org/documentation/article/block-pattern/"><?php _e( 'Learn more<span class="screen-reader-text">about using patterns</span>', 'wporg-patterns' ); ?></a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
Expand All @@ -32,17 +31,17 @@
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|50","left":"var:preset|spacing|edge-space"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:heading {"fontSize":"heading-4"} -->
<h2 class="wp-block-heading has-heading-4-font-size"><?php _e( 'Share your patterns', 'wporg' ); ?></h2>
<h2 class="wp-block-heading has-heading-4-font-size"><?php _e( 'Share your patterns', 'wporg-patterns' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"is-style-short-text"} -->
<p class="is-style-short-text"><?php _e( 'Showcase your creations and make them publicly available in the Block Pattern Directory. Submitting a pattern to the directory means it can be referenced in themes and easily reused across sites—without requiring theme authors to bundle pattern code with each theme.', 'wporg' ); ?></p>
<p class="is-style-short-text"><?php _e( 'Showcase your creations and make them publicly available in the Block Pattern Directory. Submitting a pattern to the directory means it can be referenced in themes and easily reused across sites—without requiring theme authors to bundle pattern code with each theme.', 'wporg-patterns' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"is-style-fill-on-dark"} -->
<div class="wp-block-button is-style-fill-on-dark"><a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( home_url( '/new-pattern/' ) ); ?>"><?php _e( 'Create a pattern', 'wporg' ); ?></a></div>
<!-- wp:button {"className":"is-style-outline-on-dark"} -->
<div class="wp-block-button is-style-outline-on-dark"><a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( home_url( '/new-pattern/' ) ); ?>"><?php _e( 'Create a pattern', 'wporg-patterns' ); ?></a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
Expand Down
2 changes: 1 addition & 1 deletion public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/_grid-front-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="wp-block-group alignwide">
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group">
<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search patterns…', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /-->
<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search patterns', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /-->

<!-- wp:wporg/query-total /-->
</div>
Expand Down
2 changes: 1 addition & 1 deletion public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/_grid.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="wp-block-group alignwide">
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group">
<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search patterns…', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /-->
<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search patterns', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /-->

<!-- wp:wporg/query-total /-->
</div>
Expand Down
2 changes: 1 addition & 1 deletion public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/single-my-pattern.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"},"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:post-title {"style":{"typography":{"fontWeight":"700"}},"fontSize":"heading-3","fontFamily":"inter"} /-->
<!-- wp:post-title {"fontSize":"heading-3"} /-->

<!-- wp:wporg/copy-button /-->
</div>
Expand Down
2 changes: 1 addition & 1 deletion public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/single-pattern.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"},"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:post-title {"style":{"typography":{"fontWeight":"700"}},"fontSize":"heading-3","fontFamily":"inter"} /-->
<!-- wp:post-title {"fontSize":"heading-3"} /-->

<!-- wp:wporg/copy-button /-->
</div>
Expand Down
2 changes: 1 addition & 1 deletion public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/copy-button/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}

$label = 'small' === $variant ? __( 'Copy', 'wporg-patterns' ) : __( 'Copy pattern', 'wporg-patterns' );
$label_success = 'small' === $variant ? __( 'Copied', 'wporg-patterns' ) : __( 'Copied pattern', 'wporg-patterns' );
$label_success = 'small' === $variant ? __( 'Copied', 'wporg-patterns' ) : __( 'Copied!', 'wporg-patterns' );

$classes = [];
if ( 'small' === $variant ) {
Expand Down
20 changes: 12 additions & 8 deletions public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/copy-button/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
.wp-block-wporg-copy-button {
min-width: fit-content;
}

.wp-block-wporg-copy-button.is-variant-small .wp-element-button {
--wp--custom--button--spacing--padding--top: calc(var(--wp--preset--spacing--10) / 2);
--wp--custom--button--spacing--padding--right: var(--wp--preset--spacing--10);
--wp--custom--button--spacing--padding--bottom: calc(var(--wp--preset--spacing--10) / 2);
--wp--custom--button--spacing--padding--left: var(--wp--preset--spacing--10);
font-size: var(--wp--preset--font-size--small);
font-weight: 400;
&.is-variant-small .wp-element-button {
--wp--custom--button--spacing--padding--top: calc(var(--wp--preset--spacing--10) / 2);
--wp--custom--button--spacing--padding--right: var(--wp--preset--spacing--10);
--wp--custom--button--spacing--padding--bottom: calc(var(--wp--preset--spacing--10) / 2);
--wp--custom--button--spacing--padding--left: var(--wp--preset--spacing--10);
font-size: var(--wp--preset--font-size--small);
font-weight: 400;
}

&:not(.is-variant-small) .wp-element-button {
min-width: 170px;
}
}
14 changes: 10 additions & 4 deletions ...html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/favorite-button/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,11 @@ class="wporg-favorite-button__button"
data-wp-bind--disabled="!context.postId"
data-wp-on--click="actions.triggerAction"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="pattern-favorite-button__filled" aria-hidden="true" focusable="false">
<path d="M11.941 21.175l-1.443-1.32c-5.124-4.67-8.508-7.75-8.508-11.53 0-3.08 2.408-5.5 5.473-5.5 1.732 0 3.394.81 4.478 2.09 1.085-1.28 2.747-2.09 4.478-2.09 3.065 0 5.473 2.42 5.473 5.5 0 3.78-3.383 6.86-8.508 11.54l-1.443 1.31z"></path>
<svg class="is-star-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path>
</svg>
<svg class="is-star-empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" d="M9.706 8.646a.25.25 0 01-.188.137l-4.626.672a.25.25 0 00-.139.427l3.348 3.262a.25.25 0 01.072.222l-.79 4.607a.25.25 0 00.362.264l4.138-2.176a.25.25 0 01.233 0l4.137 2.175a.25.25 0 00.363-.263l-.79-4.607a.25.25 0 01.072-.222l3.347-3.262a.25.25 0 00-.139-.427l-4.626-.672a.25.25 0 01-.188-.137l-2.069-4.192a.25.25 0 00-.448 0L9.706 8.646zM12 7.39l-.948 1.921a1.75 1.75 0 01-1.317.957l-2.12.308 1.534 1.495c.412.402.6.982.503 1.55l-.362 2.11 1.896-.997a1.75 1.75 0 011.629 0l1.895.997-.362-2.11a1.75 1.75 0 01.504-1.55l1.533-1.495-2.12-.308a1.75 1.75 0 01-1.317-.957L12 7.39z" clip-rule="evenodd"></path>
</svg>
<span class="wporg-favorite-button__count">
<span class="screen-reader-text" data-wp-text="state.labelScreenReader">
Expand All @@ -87,8 +90,11 @@ class="wp-block-button__link wp-element-button"
data-wp-bind--disabled="!context.postId"
data-wp-on--click="actions.triggerAction"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="pattern-favorite-button__filled" aria-hidden="true" focusable="false">
<path d="M11.941 21.175l-1.443-1.32c-5.124-4.67-8.508-7.75-8.508-11.53 0-3.08 2.408-5.5 5.473-5.5 1.732 0 3.394.81 4.478 2.09 1.085-1.28 2.747-2.09 4.478-2.09 3.065 0 5.473 2.42 5.473 5.5 0 3.78-3.383 6.86-8.508 11.54l-1.443 1.31z"></path>
<svg class="is-star-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path>
</svg>
<svg class="is-star-empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" d="M9.706 8.646a.25.25 0 01-.188.137l-4.626.672a.25.25 0 00-.139.427l3.348 3.262a.25.25 0 01.072.222l-.79 4.607a.25.25 0 00.362.264l4.138-2.176a.25.25 0 01.233 0l4.137 2.175a.25.25 0 00.363-.263l-.79-4.607a.25.25 0 01.072-.222l3.347-3.262a.25.25 0 00-.139-.427l-4.626-.672a.25.25 0 01-.188-.137l-2.069-4.192a.25.25 0 00-.448 0L9.706 8.646zM12 7.39l-.948 1.921a1.75 1.75 0 01-1.317.957l-2.12.308 1.534 1.495c.412.402.6.982.503 1.55l-.362 2.11 1.896-.997a1.75 1.75 0 011.629 0l1.895.997-.362-2.11a1.75 1.75 0 01.504-1.55l1.533-1.495-2.12-.308a1.75 1.75 0 01-1.317-.957L12 7.39z" clip-rule="evenodd"></path>
</svg>
<span class="wporg-favorite-button__label" data-wp-text="state.labelAction">
<?php echo $is_favorite ? $remove_label : $add_label; ?>
Expand Down
60 changes: 18 additions & 42 deletions ...html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/favorite-button/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@
font-size: 14px;
}

&.is-favorite svg path {
fill: #d24c49;
}

> * {

/* Align children. */
Expand All @@ -22,57 +18,37 @@
}

svg {
height: 1rem;
width: 1rem;
transition: all 0.15s ease-out;
margin-top: 2px;
height: 24px;
width: 24px;
overflow: visible;

path {
fill: var(--wp--preset--color--charcoal-4);
}
}

&:not(.is-variant-small) {
svg path {
fill: transparent;
stroke: var(--wp--preset--color--blueberry-1);
stroke-width: 2px;
}

&.is-favorite svg path {
fill: #d24c49;
stroke-width: 0;
&.is-star-empty {
display: block;
}

&:hover svg path {
transform-origin: center;
animation: 0.9s infinite HeartBeat;

@media (prefers-reduced-motion) {
animation: none;
}
&.is-star-filled {
display: none;
}
}
}

@keyframes HeartBeat {
0% {
transform: scale(1);
}

25% {
transform: scale(1.2);
}

40% {
transform: scale(1);
}
&.is-favorite {
svg.is-star-empty {
display: none;
}

60% {
transform: scale(1.2);
svg.is-star-filled {
display: block;
}
}

100% {
transform: scale(1);
&:not(.is-variant-small) {
svg path {
fill: currentColor;
}
}
}
2 changes: 1 addition & 1 deletion ...ontent/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
position: relative;
width: 100%;
--wp--custom--wporg-pattern-preview--border--width: clamp(4px, calc(1.33vw - 1.33px), 20px);
--wp--custom--wporg-pattern-preview--border--radius: calc(clamp(4px, calc(1.33vw - 1.33px), 20px) * 2);
--wp--custom--wporg-pattern-preview--border--radius: clamp(4px, calc(1.33vw - 1.33px), 20px);
}

.wporg-pattern-view-control__controls {
Expand Down
2 changes: 1 addition & 1 deletion public_html/wp-content/themes/wporg-pattern-directory-2024/templates/page-favorites.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|40"}}},"layout":{"type":"constrained","wideSize":"1760px"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:post-title {"level":1,"fontSize":"heading-3","fontFamily":"inter","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} /-->
<!-- wp:post-title {"level":1,"fontSize":"heading-3","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} /-->

<!-- wp:pattern {"slug":"wporg-pattern-directory-2024/grid-favorites"} /-->
</div>
Expand Down
2 changes: 1 addition & 1 deletion public_html/wp-content/themes/wporg-pattern-directory-2024/templates/page-my-patterns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|40"}}},"layout":{"type":"constrained","wideSize":"1760px"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:post-title {"level":1,"fontSize":"heading-3","fontFamily":"inter","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} /-->
<!-- wp:post-title {"level":1,"fontSize":"heading-3","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} /-->

<!-- wp:pattern {"slug":"wporg-pattern-directory-2024/grid-mine"} /-->
</div>
Expand Down

0 comments on commit 97b92a9

Please sign in to comment.