This repository has been archived by the owner on Nov 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 113
Remove contributor section from PR template, add pattern creation guidelines to readme. #45
Merged
Merged
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
f03c82b
Remove the contributors section from the PR template.
juanfra 33a8705
Add pattern creation guidelines to the readme.
juanfra 797f57a
Add link to WP 6.7
juanfra cc80c3f
Update README.md
juanfra aaa5a3f
Update references to `twentytwentyfive`
juanfra File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
# Twenty Twenty-Five | ||
|
||
Welcome to the development repository for the default theme that will launch with WordPress 6.7. | ||
Welcome to the development repository for the default theme that will launch with [WordPress 6.7](https://make.wordpress.org/core/6-7/). | ||
|
||
## About | ||
|
||
|
@@ -31,13 +31,118 @@ To get started with development: | |
2. Install the [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/) | ||
3. Clone / download this repository into your `/wp-content/themes/` directory. | ||
|
||
Also, consider enabling [development mode](https://make.wordpress.org/core/2023/07/14/configuring-development-mode-in-6-3/) with `define( 'WP_DEVELOPMENT_MODE', 'theme' );` in your `wp-config.php`. This will help minimize caching of `theme.json` while you're developing. | ||
|
||
### Pattern creation guidelines | ||
|
||
[Reference guide for patterns in the handbook](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/). | ||
A few things to have in mind when building patterns for the default theme: | ||
|
||
- **Category selection** | ||
|
||
When creating WordPress block patterns, it's important to carefully choose the appropriate category for your pattern. WordPress provides a set of default categories, each serving a specific purpose. Let's stick to using the default categories. We can add multiple of them separating them by commas. The list of the slug is [here](https://github.com/WordPress/gutenberg/blob/c20350c1d246163201375f090b0b7b4ab49b1dad/packages/block-editor/src/components/inserter/block-patterns-tab.js#L35). | ||
|
||
- **Hiding patterns from the inserter** | ||
|
||
You can control the visibility of your block pattern in the inserter by adding the following line of code when registering the pattern: | ||
|
||
We do this for patterns we don't want the user to access via the inserter or the pattern library. This is usually the case for utility patterns that we create for translation purposes such as the 404 pattern. | ||
|
||
We do this by adding the following line: | ||
|
||
` * Inserter: no` | ||
|
||
Let's prefix hidden patterns using `hidden-` when we name the pattern file. | ||
|
||
- **Different translation functions and when to use them** | ||
|
||
WordPress block patterns should be [internationalized](https://developer.wordpress.org/apis/internationalization/internationalization-guidelines/) to make them accessible to a global audience. | ||
|
||
`esc_html_x()`: Employ this function when you need to translate and escape text for display within HTML. It's useful for multilingual websites as it provides translation support while also ensuring HTML safety. | ||
|
||
`esc_html__()`: Similar to `esc_html_x()`, use this function for translating and escaping HTML-embedded text. It's a simpler version when context-specific translations are not needed. | ||
|
||
`esc_attr__()` and `esc_attr_x()`: Use this function to escape and sanitize text meant for HTML attributes, such as image source URLs or link targets. It helps prevent security vulnerabilities by ensuring that user inputs are safe for use in attributes. | ||
|
||
`esc_html_e`: works just like `esc_html__()` but you don't need to use `echo` to output the string | ||
|
||
When we have simple HTML tags in our translatable strings we would use `echo wp_kses_post( __( 'Lorem ipsum <em>Hello</em> dolor sit amet.', 'texdomain' ) );`. This syntax is clearer for translators than using `sprintf()` and it allows them to remove the markup if it doesn't work on their own language. | ||
|
||
These functions enhance security and support localization efforts in WordPress block patterns, ensuring that text is safe and can be easily translated. | ||
|
||
- **Patterns with images** | ||
|
||
To create dynamic image links in your block patterns, utilize the `get_template_directory_uri()` function. This function retrieves the URL of the current theme's directory, ensuring that the image links are relative to the theme and work correctly even if the website's directory structure changes or if we are using a child theme. This is essential for maintaining the stability and portability of your patterns. | ||
|
||
Make sure to add alt text to your images and to make sure to remove the IDs from them. An example would be: | ||
|
||
``` | ||
<!-- wp:image {"id":125,"sizeSlug":"large","linkDestination":"none"} --> | ||
<figure class="wp-block-image size-large"><img src="http://wp-stable.test/wp-content/themes/twentytwentyfour/assets/images/project.webp" alt="" class="wp-image-125"/></figure> | ||
<!-- /wp:image --> | ||
``` | ||
|
||
would turn into | ||
|
||
``` | ||
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} --> | ||
<figure class="wp-block-image size-large"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/project.webp" alt="<?php echo esc_attr_x( 'Picture of a building', 'Alt text for project picture', 'twentytwentyfour' ); ?>"/></figure> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 'twentytwentyfour' to 'twentytwentyfive' |
||
<!-- /wp:image --> | ||
``` | ||
|
||
- **Use of Post Types, Block Types and Template Types** | ||
|
||
We use Block Types when the pattern uses custom markup for a specific block or one of the default template parts (footer and header). Using this will suggest the pattern when someone inserts said block or template part. This is commonly used for query, post-content block, template or footer. | ||
|
||
Template Types is used when we want our pattern as a suggestion for a specific template. In this case we provide the template slug (404, home, single...) | ||
|
||
Post Types is used to restrict the post type we want the pattern to be used for. commonly used for full page patterns. | ||
|
||
- **Spacing, colors and font sizes** | ||
|
||
Using presets for spacing, font sizes, and colors in WordPress block patterns is preferred over hardcoded values for three key reasons: | ||
|
||
Consistency: Presets ensure a uniform design across the theme, promoting a cohesive visual identity. | ||
|
||
Scalability: They make global design changes easier during development, saving time and effort. | ||
|
||
Accessibility: Presets facilitate adherence to accessibility standards, making your patterns more usable and readable for a wider audience. | ||
|
||
- **Other tips** | ||
|
||
In the same way we remove IDs from image blocks, we need to remove queryId from query blocks too. Also, if any of our template parts have a theme attribute, that needs to remove too. | ||
|
||
`<!-- wp:query {"queryId":18,"query":{"perPage":8,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->` | ||
|
||
turns into | ||
|
||
`<!-- wp:query {"query":{"perPage":8,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->` | ||
|
||
and | ||
|
||
`<!-- wp:template-part {"slug":"header-portfolio","theme":"twentytwentyfour","area":"header","tagName":"header"} /-->` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 'twentytwentyfour' to 'twentytwentyfive' |
||
|
||
turns into | ||
|
||
`<!-- wp:template-part {"slug":"header-portfolio","area":"header","tagName":"header"} /-->` | ||
|
||
If we are constantly assigning properties to the same block over and over again (ie: border radius to images), consider moving those properties to the theme.json. | ||
|
||
When building full page patterns, let's prefix them by using page- | ||
|
||
One way to control the order in which patterns are displayed in the inserter is by changing the name of the file (they are sorted alphabetically) | ||
|
||
### Tips for Contributors | ||
|
||
- As stated above, a goal for the theme is to have as little CSS as possible. Much of the theme's visual treatments should be handled by the Block Editor and Global Styles. As a general rule, if multiple themes would benefit from the CSS you're considering adding, it might reasonably be provided by Gutenberg instead. Let's include clear code comments for any CSS we do include. | ||
- Similarly, let's refrain from building any custom-built PHP or JavaScript-based workarounds for functionality that might reasonably be provided by the Block Editor, let's keep the code simple to help with future maintenance. | ||
- In accordance to those last two bullets, this theme has no required build process. | ||
- Refrain from creating pull requests for translatable strings until all patterns, parts, and templates are completed. | ||
|
||
## Discussions | ||
|
||
Starting on Wednesday 21 August 2024 at 17:00 CEST, there will be weekly Slack meetings in the `#core-themes` channel in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required) to coordinate development of the theme. Agenda notes will be posted before meetings and summaries posted after the meeting. | ||
juanfra marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
|
||
## Requirements | ||
|
||
|
@@ -59,4 +164,4 @@ Some theme features / PRs may require the development version of Gutenberg and w | |
|
||
## Timeline | ||
|
||
The theme will be released with WordPress 6.7 and follow the key dates / milestones associated with its future development schedule. | ||
The theme will be released with [WordPress 6.7](https://make.wordpress.org/core/6-7/) and follow the key dates / milestones associated with its future development schedule. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think 'twentytwentyfour' will be 'twentytwentyfive'