Skip to content
This repository has been archived by the owner on Nov 18, 2024. It is now read-only.

Try: Add comments. #156

Merged
merged 8 commits into from
Sep 1, 2024
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
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
51 changes: 51 additions & 0 deletions patterns/hidden-comments.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<?php
Copy link
Contributor

Choose a reason for hiding this comment

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

I wish twe didn't have to store templates in the patterns folder in order for them to be translatable. I guess there's no real way around that?

Copy link
Contributor

@carolinan carolinan Aug 30, 2024

Choose a reason for hiding this comment

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

No. I don't know if there is an open issue that covers it better than this one:
WordPress/gutenberg#20966

The project is closer to solving it now that there are block bindings.
In theory, block bindings could already be used, since you can use custom PHP functions which could include the translations.... but I don't think this theme should experiment with it.

Copy link
Contributor

Choose a reason for hiding this comment

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

Also, this particular part of the theme is not a template or a part, it is intended to be a pattern so that it can be inserted anywhere, and it would be PHP file even if it had no translatable strings.

/**
* Title: Comments
* Slug: twentytwentyfive/hidden-comments
* Inserter: no
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/

?>
<!-- wp:comments {"className":"wp-block-comments-query-loop","style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
<div class="wp-block-comments wp-block-comments-query-loop" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)">
<!-- wp:heading -->
<h4><?php esc_html_e( 'Comments', 'twentytwentyfive' ); ?></h4>
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<!-- /wp:heading -->
<!-- wp:comments-title {"level":4} /-->
<!-- wp:comment-template -->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)">
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group">
<!-- wp:avatar {"size":50} /-->
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:comment-date /-->
<!-- wp:comment-author-name /-->
<!-- wp:comment-content /-->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
<!-- wp:comment-edit-link /-->
<!-- wp:comment-reply-link /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- /wp:comment-template -->

<!-- wp:comments-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:comments-pagination-previous /-->
<!-- wp:comments-pagination-next /-->
<!-- /wp:comments-pagination -->

<!-- wp:post-comments-form /-->
</div>
<!-- /wp:comments -->
1 change: 1 addition & 0 deletions templates/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-terms {"term":"post_tag","separator":" ","className":"is-style-post-terms-1"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-comments"} /-->
</div>
<!-- /wp:group -->

Expand Down
115 changes: 109 additions & 6 deletions theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -931,6 +931,11 @@
"lineHeight": "1.4"
},
"blocks": {
"core/avatar": {
"border": {
"radius": "100px"
Copy link
Contributor

Choose a reason for hiding this comment

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

Would it make sense to create some radius presets, of which one preset could be "round", and just set to 9999px?

Copy link
Contributor

Choose a reason for hiding this comment

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

There is a request in the Gutenberg repository to add this to the editor.
Let's check how far that has come, but I think it needs dev:
WordPress/gutenberg#64041

Copy link
Contributor

Choose a reason for hiding this comment

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

I will add the issue to the list of issues.

}
},
"core/code": {
"typography": {
"fontFamily": "var:preset|font-family|fira-code",
Expand All @@ -943,33 +948,131 @@
},
"spacing": {
"padding": {
"right": "var(--wp--preset--spacing--40)",
"bottom": "var(--wp--preset--spacing--40)",
"left": "var(--wp--preset--spacing--40)",
"top": "var(--wp--preset--spacing--40)"
"right": "var:preset|spacing|40",
"bottom": "var:preset|spacing|40",
"left": "var:preset|spacing|40",
"top": "var:preset|spacing|40"
}
}
},
"core/comment-author-name": {
"color": {
"text": "var:preset|color|primary"
},
"elements": {
"link": {
"color": {
"text": "var:preset|color|primary"
},
"typography": {
"textDecoration": "none"
},
":hover": {
"typography": {
"textDecoration": "underline"
}
}
}
},
"typography": {
"fontSize": "var:preset|font-size|small"
"fontSize": "var:preset|font-size|small",
"fontStyle": "normal"
},
"spacing": {
"margin": {
"top": "5px",
"bottom": "0px"
}
}
},
"core/comment-content": {
"typography": {
"fontSize": "var:preset|font-size|medium"
},
"spacing": {
"margin": {
"top": "var:preset|spacing|30",
"bottom": "var:preset|spacing|30"
}
}
},
"core/comment-date": {
"typography": {
"fontSize": "var:preset|font-size|small"
},
"color": {
"text": "var:preset|color|contrast"
},
"elements": {
"link": {
"color": {
"text": "var:preset|color|contrast"
}
}
}
},
"core/comment-edit-link": {
"elements": {
"link": {
"color": {
"text": "var:preset|color|contrast"
}
}
},
"typography": {
"fontSize": "var:preset|font-size|small"
}
},
"core/comment-reply-link": {
"elements": {
"link": {
"color": {
"text": "var:preset|color|contrast"
}
}
},
"typography": {
"fontSize": "var:preset|font-size|small"
}
},
"core/post-comments-form": {
"css": "& textarea, input:not([type=submit]){border-radius:.25rem; border-color: var(--wp--preset--color--opacity-20) !important;} & input[type=checkbox]{margin:0 .2rem 0 0 !important;} & label {font-size: var(--wp--preset--font-size--x-small); }",
Copy link
Contributor

Choose a reason for hiding this comment

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

Some finnicky details here. But notably the input radius It'd be nice to again add to a preset scale, so they're consistent across.

"typography": {
"fontSize": "var:preset|font-size|medium"
},
"spacing": {
"padding": {
"top": "var:preset|spacing|40",
"bottom": "var:preset|spacing|40"
}
}
},
"core/comments-pagination": {
"typography": {
"fontSize": "var:preset|font-size|medium"
},
"spacing": {
"margin": {
"top": "var:preset|spacing|40",
"bottom": "var:preset|spacing|40"
}
}
},
"core/comments-pagination-next": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
},
"core/comments-pagination-numbers": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
},
"core/comments-pagination-previous": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
},
"core/post-date": {
"color":{
"text": "var:preset|color|primary"
Expand Down Expand Up @@ -1112,7 +1215,7 @@
"elements": {
"button": {
"typography": {
"fontSize": "var:preset|font-size|small"
"fontSize": "var:preset|font-size|medium"
},
"color": {
"background": "var:preset|color|contrast",
Expand Down
Loading