WordPress Community Themes

https://github.com/wordpress/community-themes
Admin
A repository for Block Themes built by the WordPress community, encouraging contribution and...
Tokens:10,038
Snippets:12
Trust Score:9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Boot WordPress Themes in Playground

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

These links allow users to launch the WordPress Playground with a specific community theme pre-installed and activated. The URLs contain parameters to specify the repository, content type, theme name, and a sequence of steps including login, theme installation, and theme activation.

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=poetry#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=poetry&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22poetry%22%7D%5D%7D
```

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=archivist#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=archivist&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22archivist%22%7D%5D%7D
```

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=atlas#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=atlas&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22atlas%22%7D%5D%7D
```

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=blue-note#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=blue-note&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22blue-note%22%7D%5D%7D
```

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=purr#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=purr&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22purr%22%7D%5D%7D
```

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=stacks#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=stacks&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22stacks%22%7D%5D%7D
```

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=term#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=term&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22term%22%7D%5D%7D
```

```URL
https://playground.wordpress.net/?storage=browser&ghexport-repo-url=https://github.com/WordPress/community-themes&ghexport-content-type=theme&ghexport-theme=tt1-blocks#%7B%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22installTheme%22,%22themeZipFile%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github-proxy.com/proxy.php?action=partial&repo=Wordpress/community-themes&directory=tt1-blocks&branch=trunk%22%7D%7D,%7B%22step%22:%22activateTheme%22,%22themeFolderName%22:%22tt1-blocks%22%7D%5D%7D
```

--------------------------------

### Remove Theme Attribute from WordPress Template Part

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Illustrates the process of removing the `theme` attribute from a WordPress template part block comment. This practice helps in making template parts more portable and less dependent on specific theme installations.

```html
<!-- wp:template-part {"slug":"header-portfolio","theme":"twentytwentyfour","area":"header","tagName":"header"} /-->
```

```html
<!-- wp:template-part {"slug":"header-portfolio","area":"header","tagName":"header"} /-->
```

--------------------------------

### Git: Stage and Commit Changes

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Stages all modified files for the next commit and then creates a commit with a descriptive message. This is a fundamental step in tracking changes.

```bash
git add .
git commit -m "Your commit message"
```

--------------------------------

### Run Theme Pattern Escape Script

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Provides instructions for executing a Node.js script designed to prepare WordPress theme patterns for deployment. The script automates tasks like internationalization (i18n) wrapping and image path correction.

```bash
npm run patterns:escape
```

--------------------------------

### Dynamic Image Handling in Block Patterns

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Demonstrates how to dynamically link images within WordPress block patterns using theme directory URIs and how to properly escape alt text for accessibility and security.

```php
<!-- 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' ); ?>" class="wp-image-125"/></figure>
<!-- /wp:image -->
```

--------------------------------

### Git: Push Branch to Remote

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Pushes the local branch to the remote repository, making your changes available for creating a pull request. Ensure you have pushed your commits before creating a PR.

```bash
git push origin your-branch-name
```

--------------------------------

### Git: Create New Branch

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Creates a new Git branch from the current branch. This is essential for isolating your work and managing changes effectively before committing.

```bash
git checkout -b your-branch-name
```

--------------------------------

### Changelog: get_template_directory_uri() Usage

Source: https://github.com/wordpress/community-themes/blob/trunk/blue-note/readme.txt

This entry details a change in version 1.0.2 of the Blue Note theme, where get_stylesheet_directory_uri() was replaced with get_template_directory_uri(). This change ensures correct functionality for child themes.

```PHP
/*
 * Changelog entry for Blue Note theme version 1.0.2
 * Replaced get_stylesheet_directory_uri() with get_template_directory_uri()
 * to ensure child themes work correctly.
 */
// Example usage (conceptual):
// $theme_uri = get_template_directory_uri();
```

--------------------------------

### WordPress Internationalization Functions

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Provides guidance on using WordPress PHP functions for internationalization (i18n) and escaping text to ensure themes are accessible globally and secure. Covers functions for HTML content, attributes, and context-specific translations.

```APIDOC
WordPress Internationalization Functions:

1. esc_html_x( string $text, string $context, string $domain = 'default' ): string
   - Translates and escapes text for display within HTML.
   - Useful for multilingual websites, providing translation support and HTML safety.
   - Example: esc_html_x( 'Hello world', 'Greeting context', 'my-text-domain' )

2. esc_html__( string $text, string $domain = 'default' ): string
   - Translates and escapes HTML-embedded text.
   - Simpler version when context-specific translations are not needed.
   - Example: esc_html__( 'Welcome back', 'my-text-domain' )

3. esc_attr__( string $text, string $domain = 'default' ): string
   - Escapes and sanitizes text meant for HTML attributes (e.g., image src, link targets).
   - Helps prevent security vulnerabilities.
   - Example: esc_attr__( 'my-image.jpg', 'my-text-domain' )

4. esc_attr_x( string $text, string $context, string $domain = 'default' ): string
   - Context-specific version of esc_attr__ for HTML attributes.
   - Example: esc_attr_x( 'Logo image', 'Alt text for logo', 'my-text-domain' )

5. esc_html_e( string $text, string $domain = 'default' ): void
   - Works like esc_html__() but directly echoes the translated and escaped string.
   - No need for an explicit 'echo' statement.
   - Example: esc_html_e( 'Save changes', 'my-text-domain' )

6. wp_kses_post( string $string ): string
   - Sanitizes a string containing HTML, allowing only safe HTML tags and attributes suitable for post content.
   - Useful for embedding simple HTML tags within translatable strings for clarity.
   - Example: echo wp_kses_post( __( 'Lorem ipsum <em>Hello</em> dolor sit amet.', 'texdomain' ) );
```

--------------------------------

### Theme Assets: SVG Files

Source: https://github.com/wordpress/community-themes/blob/trunk/blue-note/readme.txt

The Blue Note theme utilizes several SVG files for its design elements, including stripes. These files are licensed under Creative Commons CC0.

```SVG
/assets/images/thin-stripes.svg
```

```SVG
/assets/images/thick-stripes.svg
```

```SVG
/assets/images/vertical-colored-stripes.svg
```

--------------------------------

### Hiding WordPress Block Patterns

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Control the visibility of block patterns in the WordPress inserter by adding a specific comment during pattern registration. This is useful for utility patterns not intended for direct user access.

```php
/*
 * Inserter: no
 */
```

--------------------------------

### Remove Query ID from WordPress Query Block

Source: https://github.com/wordpress/community-themes/blob/trunk/README.md

Demonstrates how to remove the `queryId` attribute from a WordPress query block comment. This is a common sanitization step to ensure cleaner markup and prevent potential issues with dynamic queries.

```html
<!-- wp:query {"queryId":18,"query":{"perPage":8,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
```

```html
<!-- wp:query {"query":{"perPage":8,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
```
Tokens:
Raw