├── .editorconfig ├── .gitattributes ├── .gitignore ├── .wp-env.json ├── README.md ├── _assets └── icon-wp.svg ├── _bin ├── constants.js ├── createAllZipsExamples.js ├── createZipExample.js ├── data │ ├── examples.json │ └── tags.json ├── generateExamplesTableMarkdown.js ├── updateTableMarkdown.js └── utils │ ├── createZip.js │ └── log.js ├── _zips ├── example-block-style-js.zip ├── example-block-style-php.zip ├── example-block-stylesheet.zip ├── example-block-variation.zip ├── example-build-process.zip ├── example-locked-pattern.zip ├── example-template-part-area.zip ├── twentytwentyfour-starter-content-patterns.zip └── twentytwentyfour-starter-template-patterns.zip ├── example-block-style-js ├── .wp-env.json ├── LICENSE.md ├── README.md ├── _playground │ ├── blueprint.json │ └── export.xml ├── assets │ └── js │ │ └── block-styles.js ├── functions.php ├── screenshot.png └── style.css ├── example-block-style-php ├── LICENSE.md ├── README.md ├── _playground │ ├── blueprint.json │ └── export.xml ├── functions.php ├── screenshot.png └── style.css ├── example-block-stylesheet ├── LICENSE.md ├── README.md ├── assets │ └── css │ │ └── blocks │ │ └── core-image.css ├── functions.php ├── screenshot.png └── style.css ├── example-block-variation ├── LICENSE.md ├── README.md ├── assets │ └── js │ │ └── block-variations.js ├── functions.php ├── screenshot.png └── style.css ├── example-build-process ├── LICENSE.md ├── README.md ├── functions.php ├── package-lock.json ├── package.json ├── public │ ├── css │ │ ├── editor.asset.php │ │ ├── editor.css │ │ ├── screen.asset.php │ │ └── screen.css │ └── js │ │ ├── editor.asset.php │ │ └── editor.js ├── resources │ ├── js │ │ └── editor.js │ └── scss │ │ ├── editor.scss │ │ └── screen.scss ├── screenshot.png ├── style.css └── webpack.config.js ├── example-locked-pattern ├── LICENSE.md ├── README.md ├── patterns │ └── custom-event.php ├── screenshot.png └── style.css ├── example-template-part-area ├── LICENSE.md ├── README.md ├── functions.php ├── parts │ ├── footer.html │ ├── header.html │ ├── post-meta.html │ └── sidebar.html ├── screenshot.png ├── style.css └── theme.json ├── package.json ├── twentytwentyfour-starter-content-patterns ├── LICENSE.md ├── README.md ├── patterns │ └── event-announcement.php ├── screenshot.png └── style.css └── twentytwentyfour-starter-template-patterns ├── LICENSE.md ├── README.md ├── patterns └── template-archive.php ├── screenshot.png └── style.css /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | indent_style = tab 8 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Handle line endings. 2 | # See https://help.github.com/articles/dealing-with-line-endings/ 3 | 4 | *.gif binary 5 | *.ico binary 6 | *.jpg binary 7 | *.png binary 8 | *.eot binary 9 | *.ttf binary 10 | *.webp binary 11 | *.woff binary 12 | *.woff2 binary 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules 3 | .DS_Store 4 | _temp -------------------------------------------------------------------------------- /.wp-env.json: -------------------------------------------------------------------------------- 1 | { 2 | "phpVersion": "8", 3 | "port": 3333, 4 | "core": "WordPress/WordPress#6.4", 5 | "themes": [ 6 | "./example-block-style-js", 7 | "./example-block-style-php", 8 | "./example-block-stylesheet", 9 | "./example-block-variation", 10 | "./example-build-process", 11 | "./example-locked-pattern", 12 | "./example-template-part-area", 13 | "https://downloads.wordpress.org/theme/twentytwentyfour.1.0.zip" 14 | ], 15 | "config": { 16 | "WP_DEBUG": true, 17 | "WP_DEBUG_LOG": true, 18 | "WP_DEBUG_DISPLAY": true, 19 | "SCRIPT_DEBUG": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Block Theme Examples 2 | 3 | This repository is meant to showcase various WordPress block-related features and how to use them in your theme. The goal is to provide concise code examples that serve as a foundation for your projects. They are meant for development purposes to customize however you need. 4 | 5 | Each sub-folder is an individual child theme of [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour) and contains a `README.md` file that explains the example. The decision to use child themes was to create small examples that only had the code needed for the feature. 6 | 7 | Each of the examples also have corresponding documentation in either the [WordPress Theme Handbook](https://developer.wordpress.org/themes) or [WordPress Developer Blog](https://developer.wordpress.org/news). 8 | 9 | **Requirements:** 10 | 11 | - You must be running at least WordPress 6.4. 12 | - You must have the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour) theme installed in your `wp-content/themes` folder. 13 | 14 | ## Download or Test Live 15 | 16 | 17 | 18 | | Folder | Short description | Tags | Download .zip | Live Demo | 19 | | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 20 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-style-js) | example-block-style-js | BLOCK THEME, BLOCK STYLE, JAVASCRIPT | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-style-js.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-theme-examples/master/example-block-style-js/_playground/blueprint.json) | 21 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-style-php) | example-block-style-php | BLOCK THEME, BLOCK STYLE, PHP | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-style-php.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-theme-examples/master/example-block-style-php/_playground/blueprint.json) | 22 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-stylesheet) | example-block-stylesheet | BLOCK THEME, PHP | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-stylesheet.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-stylesheet.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 23 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-variation) | example-block-variation | BLOCK THEME, JAVASCRIPT | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-variation.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-variation.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 24 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-build-process) | example-build-process | BLOCK THEME, JAVASCRIPT | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-build-process.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-build-process.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 25 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-locked-pattern) | example-locked-pattern | BLOCK THEME, CURATION | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-locked-pattern.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-locked-pattern.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 26 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-template-part-area) | example-template-part-area | BLOCK THEME, PHP | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-template-part-area.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-template-part-area.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 27 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/twentytwentyfour-starter-content-patterns) | twentytwentyfour-starter-content-patterns | BLOCK THEME, CURATION | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-content-patterns.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-content-patterns.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 28 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/twentytwentyfour-starter-template-patterns) | twentytwentyfour-starter-template-patterns | BLOCK THEME, CURATION | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-template-patterns.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-template-patterns.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 29 | 30 | -------------------------------------------------------------------------------- /_assets/icon-wp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /_bin/constants.js: -------------------------------------------------------------------------------- 1 | const REPO_ORIGIN = "WordPress/block-theme-examples"; 2 | const SLUG_EXAMPLE_MARKER = "<%SLUG_EXAMPLE_MARKER%>"; 3 | const URL_EXAMPLE_BASE = `https://raw.githubusercontent.com/${REPO_ORIGIN}/master/zips/base.zip`; 4 | const URL_EXAMPLE_THEME_ZIP = `https://raw.githubusercontent.com/${REPO_ORIGIN}/master/_zips/${SLUG_EXAMPLE_MARKER}.zip`; 5 | const URL_REPO = `https://github.com/${REPO_ORIGIN}/tree/master` 6 | const PLAYGROUND_URL_WITH_THEMES = `https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22${URL_EXAMPLE_THEME_ZIP}%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}` 7 | const URL_PLAYGROUND_BLUEPRINT = `https://raw.githubusercontent.com/${REPO_ORIGIN}/master/${SLUG_EXAMPLE_MARKER}/_playground/blueprint.json` 8 | const URL_WIKI = `https://github.com/${REPO_ORIGIN}/wiki` 9 | const WIKI_PAGE_TAGS = "Tags" 10 | 11 | module.exports = { 12 | REPO_ORIGIN, 13 | URL_REPO, 14 | URL_EXAMPLE_BASE, 15 | URL_EXAMPLE_THEME_ZIP, 16 | PLAYGROUND_URL_WITH_THEMES, 17 | SLUG_EXAMPLE_MARKER, 18 | URL_PLAYGROUND_BLUEPRINT, 19 | URL_WIKI, 20 | WIKI_PAGE_TAGS, 21 | } 22 | -------------------------------------------------------------------------------- /_bin/createAllZipsExamples.js: -------------------------------------------------------------------------------- 1 | const examplesBlockTheme = require("./data/examples.json"); 2 | const createZip = require("./utils/createZip"); 3 | 4 | examplesBlockTheme 5 | .map(({ slug }) => slug) 6 | .forEach(createZip) 7 | -------------------------------------------------------------------------------- /_bin/createZipExample.js: -------------------------------------------------------------------------------- 1 | const [,,exampleFolder] = process.argv 2 | 3 | const examplesBlockTheme = require("./data/examples.json"); 4 | const createZip = require("./utils/createZip"); 5 | 6 | const isValidExampleFolder = ({ slug }) => exampleFolder === slug 7 | 8 | if ( !examplesBlockTheme.some( isValidExampleFolder ) ) { 9 | throw new Error('Folder name is not valid'); 10 | } 11 | 12 | createZip( exampleFolder ); 13 | -------------------------------------------------------------------------------- /_bin/data/examples.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "slug": "example-block-style-js", 4 | "description": "example-block-style-js", 5 | "tags": [ 6 | "block-theme", 7 | "block-style", 8 | "javascript" 9 | ] 10 | }, 11 | { 12 | "slug": "example-block-style-php", 13 | "description": "example-block-style-php", 14 | "tags": [ 15 | "block-theme", 16 | "block-style", 17 | "php" 18 | ] 19 | }, 20 | { 21 | "slug": "example-block-stylesheet", 22 | "description": "example-block-stylesheet", 23 | "tags": [ 24 | "block-theme", 25 | "php" 26 | ] 27 | }, 28 | { 29 | "slug": "example-block-variation", 30 | "description": "example-block-variation", 31 | "tags": [ 32 | "block-theme", 33 | "javascript" 34 | ] 35 | }, 36 | { 37 | "slug": "example-build-process", 38 | "description": "example-build-process", 39 | "tags": [ 40 | "block-theme", 41 | "javascript" 42 | ] 43 | }, 44 | { 45 | "slug": "example-locked-pattern", 46 | "description": "example-locked-pattern", 47 | "tags": [ 48 | "block-theme", 49 | "curation" 50 | ] 51 | }, 52 | { 53 | "slug": "example-template-part-area", 54 | "description": "example-template-part-area", 55 | "tags": [ 56 | "block-theme", 57 | "php" 58 | ] 59 | }, 60 | { 61 | "slug": "twentytwentyfour-starter-content-patterns", 62 | "description": "twentytwentyfour-starter-content-patterns", 63 | "tags": [ 64 | "block-theme", 65 | "curation" 66 | ] 67 | }, 68 | { 69 | "slug": "twentytwentyfour-starter-template-patterns", 70 | "description": "twentytwentyfour-starter-template-patterns", 71 | "tags": [ 72 | "block-theme", 73 | "curation" 74 | ] 75 | } 76 | ] 77 | -------------------------------------------------------------------------------- /_bin/data/tags.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "slug": "block-theme", 4 | "name": "BLOCK THEME", 5 | "description": "These examples are child themes of a block theme." 6 | }, 7 | { 8 | "slug": "block-style", 9 | "name": "BLOCK STYLE", 10 | "description": "These examples implement block styles variations for some existing blocks." 11 | }, 12 | { 13 | "slug": "javascript", 14 | "name": "JAVASCRIPT", 15 | "description": "These examples use mostly javascript for the example implementation." 16 | }, 17 | { 18 | "slug": "php", 19 | "name": "PHP", 20 | "description": "These examples use mostly javascript for the example implementation." 21 | }, 22 | { 23 | "slug": "curation", 24 | "name": "CURATION", 25 | "description": "These examples implement some form of restricting user access in the Block Editor." 26 | } 27 | ] -------------------------------------------------------------------------------- /_bin/generateExamplesTableMarkdown.js: -------------------------------------------------------------------------------- 1 | const { join } = require("path"); 2 | const fs = require("fs"); 3 | const toMarkdownTable = require("markdown-table"); 4 | const { info, error } = require("./utils/log"); 5 | 6 | const rootPath = process.cwd(); 7 | const readmePathRoot = join(rootPath, "README.md"); 8 | const examplesJsonPath = join(rootPath, "_bin/data/examples.json"); 9 | const tagsJsonPath = join(rootPath, "_bin/data/tags.json"); 10 | 11 | const { 12 | URL_EXAMPLE_THEME_ZIP, 13 | PLAYGROUND_URL_WITH_THEMES, 14 | SLUG_EXAMPLE_MARKER, 15 | URL_REPO, 16 | REPO_ORIGIN, 17 | URL_PLAYGROUND_BLUEPRINT, 18 | URL_WIKI, 19 | WIKI_PAGE_TAGS, 20 | } = require("./constants"); 21 | 22 | const startMarker = ""; 23 | const endMarker = ""; 24 | 25 | module.exports = ({ slug: slugReadme, readmePath = readmePathRoot }) => { 26 | 27 | const examplesJson = JSON.parse(fs.readFileSync(examplesJsonPath, "utf8")); 28 | const tagsJson = JSON.parse(fs.readFileSync(tagsJsonPath, "utf8")); 29 | const markdownContent = fs.readFileSync(readmePath, "utf8"); 30 | 31 | const regex = new RegExp( 32 | `${startMarker}\(\[\.\\n\\s\\S\]\*\)${endMarker}`, 33 | "gm" 34 | ); 35 | 36 | const processedTags = tagsJson.reduce( 37 | (acc, { slug, name }) => ({ ...acc, [slug]: name }), 38 | {} 39 | ); 40 | 41 | let processedExamplesJson; 42 | if (slugReadme) { 43 | processedExamplesJson = examplesJson.filter(({ slug }) => slug === slugReadme); 44 | } 45 | else { 46 | processedExamplesJson = examplesJson//.sort(sortFeaturedFirst); 47 | } 48 | 49 | const markdownTableRows = processedExamplesJson.map(({ slug, description, tags }) => { 50 | 51 | let playgroundUrl = PLAYGROUND_URL_WITH_THEMES.replaceAll(SLUG_EXAMPLE_MARKER,slug); 52 | const urlZip = URL_EXAMPLE_THEME_ZIP.replaceAll(SLUG_EXAMPLE_MARKER,slug); 53 | const urlAssetIconWp = `https://raw.githubusercontent.com/${REPO_ORIGIN}/master/_assets/icon-wp.svg`; 54 | 55 | const pathBlueprint = `${rootPath}/${slug}/_playground/blueprint.json`; 56 | 57 | if (fs.existsSync(pathBlueprint)) { 58 | let playgroundUrlBlueprint = URL_PLAYGROUND_BLUEPRINT.replaceAll(SLUG_EXAMPLE_MARKER,slug); 59 | playgroundUrl = `https://playground.wordpress.net/?blueprint-url=${playgroundUrlBlueprint}`; 60 | } 61 | 62 | 63 | // console.log ({[slug]: playgroundUrl}); 64 | return [ 65 | `[📁](${URL_REPO}/${slug})`, 66 | description, 67 | tags 68 | .map((tagSlug) => `${processedTags[tagSlug]}`) 69 | .join(", "), 70 | `[📦](${urlZip})`, 71 | `[![](${urlAssetIconWp})](${playgroundUrl})`, 72 | ]; 73 | }); 74 | const markdownTable = toMarkdownTable([ 75 | ["Folder", `Short description`, "Tags", "Download .zip", "Live Demo"], 76 | ...markdownTableRows, 77 | ]); 78 | 79 | const markdownContentWithUpdatedTable = markdownContent.replace( 80 | regex, 81 | `${startMarker}\n${markdownTable}\n${endMarker}` 82 | ); 83 | 84 | try { 85 | fs.writeFileSync(readmePath, markdownContentWithUpdatedTable); 86 | info(`${readmePath.split('block-theme-examples')[1]} was updated!`); 87 | } catch (err) { 88 | error(`An error has ocurred when saving the file ${readmePath}`); 89 | error(err); 90 | } 91 | 92 | }; 93 | -------------------------------------------------------------------------------- /_bin/updateTableMarkdown.js: -------------------------------------------------------------------------------- 1 | const { join } = require("path"); 2 | const fs = require('fs'); 3 | 4 | const generateExamplesTableMarkdown = require("./generateExamplesTableMarkdown.js"); 5 | const examplesJson = require("./data/examples.json"); 6 | const slug = process.argv[2]; 7 | const rootPath = process.cwd(); 8 | let readmePath; 9 | 10 | if (slug == 'all') { 11 | const childThemesFolderNames = examplesJson.map(({slug}) => slug) 12 | childThemesFolderNames.forEach(exampleChildThemeSlug => { 13 | const childThemeExamplePath = join(rootPath, exampleChildThemeSlug); 14 | if (!fs.existsSync(childThemeExamplePath)) throw `child theme path doesn't exist: ${childThemeExamplePath}`; 15 | readmePath = join(childThemeExamplePath, "README.md"); 16 | generateExamplesTableMarkdown({slug: exampleChildThemeSlug, readmePath}); 17 | }); 18 | generateExamplesTableMarkdown({readmePath: join(rootPath, "README.md")}); 19 | return; 20 | } 21 | else if (slug && slug !== 'all') { 22 | const childThemeExamplePath = join(rootPath, slug); 23 | if (!fs.existsSync(childThemeExamplePath)) throw `child theme path doesn't exist: ${pluginPath}`; 24 | readmePath = join(childThemeExamplePath, "README.md"); 25 | console.log({slug, readmePath}) 26 | generateExamplesTableMarkdown({slug, readmePath}); 27 | return; 28 | } 29 | 30 | generateExamplesTableMarkdown({slug, readmePath}); 31 | -------------------------------------------------------------------------------- /_bin/utils/createZip.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | const archiver = require("archiver"); 4 | 5 | const destinationContainerFolder = path.join(process.cwd(), "_zips") 6 | 7 | module.exports = folderName => { 8 | const rootPath = process.cwd(); 9 | // const themeExample = process.argv[2]; 10 | 11 | const sourceFolderPath = path.join(rootPath, folderName) 12 | //const destinationFolderPath = path.join(rootPath, "zips", `${themeExample}`) 13 | const destinationFile = path.join(destinationContainerFolder, `${folderName}.zip`) 14 | 15 | const output = fs.createWriteStream( destinationFile ) 16 | 17 | 18 | const archive = archiver('zip', { 19 | zlib: { level: 9 } // set compression level to the highest 20 | }) 21 | 22 | archive.on('end', function() { 23 | console.log(`Zip for ${folderName} has been created`); 24 | }); 25 | 26 | archive.on('error', function(err) { 27 | console.log(`Something went wrong while creating zip for ${folderName}`); 28 | console.log(err); 29 | }); 30 | 31 | archive.pipe(output) 32 | archive.directory(sourceFolderPath, false) 33 | archive.finalize() 34 | } -------------------------------------------------------------------------------- /_bin/utils/log.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | /** 3 | * External dependencies 4 | */ 5 | const chalk = require( 'chalk' ); 6 | 7 | const code = ( input ) => { 8 | console.log( chalk.cyan( input ) ); 9 | }; 10 | 11 | const error = ( input ) => { 12 | console.log( chalk.bold.red( input ) ); 13 | }; 14 | 15 | const info = ( input ) => { 16 | console.log( input ); 17 | }; 18 | const success = ( input ) => { 19 | console.log( chalk.bold.green( input ) ); 20 | }; 21 | 22 | const highlightTextPrimary = ( input ) => chalk.bold.yellow( input ) 23 | const highlightTextSecondary = ( input ) => chalk.bold.blue( input ) 24 | 25 | module.exports = { 26 | code, 27 | error, 28 | info, 29 | success, 30 | highlightTextPrimary, 31 | highlightTextSecondary 32 | }; 33 | /* eslint-enable no-console */ 34 | -------------------------------------------------------------------------------- /_zips/example-block-style-js.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/example-block-style-js.zip -------------------------------------------------------------------------------- /_zips/example-block-style-php.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/example-block-style-php.zip -------------------------------------------------------------------------------- /_zips/example-block-stylesheet.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/example-block-stylesheet.zip -------------------------------------------------------------------------------- /_zips/example-block-variation.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/example-block-variation.zip -------------------------------------------------------------------------------- /_zips/example-build-process.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/example-build-process.zip -------------------------------------------------------------------------------- /_zips/example-locked-pattern.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/example-locked-pattern.zip -------------------------------------------------------------------------------- /_zips/example-template-part-area.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/example-template-part-area.zip -------------------------------------------------------------------------------- /_zips/twentytwentyfour-starter-content-patterns.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/twentytwentyfour-starter-content-patterns.zip -------------------------------------------------------------------------------- /_zips/twentytwentyfour-starter-template-patterns.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/_zips/twentytwentyfour-starter-template-patterns.zip -------------------------------------------------------------------------------- /example-block-style-js/.wp-env.json: -------------------------------------------------------------------------------- 1 | { 2 | "core": "WordPress/WordPress", 3 | "themes": [ 4 | "https://downloads.wordpress.org/theme/twentytwentyfour.1.0.zip", 5 | "." 6 | ] 7 | } -------------------------------------------------------------------------------- /example-block-style-js/LICENSE.md: -------------------------------------------------------------------------------- 1 | # GNU GENERAL PUBLIC LICENSE 2 | 3 | Version 2, June 1991 4 | 5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 7 | 8 | Everyone is permitted to copy and distribute verbatim copies 9 | of this license document, but changing it is not allowed. 10 | 11 | ## Preamble 12 | 13 | The licenses for most software are designed to take away your freedom 14 | to share and change it. By contrast, the GNU General Public License is 15 | intended to guarantee your freedom to share and change free 16 | software--to make sure the software is free for all its users. This 17 | General Public License applies to most of the Free Software 18 | Foundation's software and to any other program whose authors commit to 19 | using it. (Some other Free Software Foundation software is covered by 20 | the GNU Lesser General Public License instead.) You can apply it to 21 | your programs, too. 22 | 23 | When we speak of free software, we are referring to freedom, not 24 | price. Our General Public Licenses are designed to make sure that you 25 | have the freedom to distribute copies of free software (and charge for 26 | this service if you wish), that you receive source code or can get it 27 | if you want it, that you can change the software or use pieces of it 28 | in new free programs; and that you know you can do these things. 29 | 30 | To protect your rights, we need to make restrictions that forbid 31 | anyone to deny you these rights or to ask you to surrender the rights. 32 | These restrictions translate to certain responsibilities for you if 33 | you distribute copies of the software, or if you modify it. 34 | 35 | For example, if you distribute copies of such a program, whether 36 | gratis or for a fee, you must give the recipients all the rights that 37 | you have. You must make sure that they, too, receive or can get the 38 | source code. And you must show them these terms so they know their 39 | rights. 40 | 41 | We protect your rights with two steps: (1) copyright the software, and 42 | (2) offer you this license which gives you legal permission to copy, 43 | distribute and/or modify the software. 44 | 45 | Also, for each author's protection and ours, we want to make certain 46 | that everyone understands that there is no warranty for this free 47 | software. If the software is modified by someone else and passed on, 48 | we want its recipients to know that what they have is not the 49 | original, so that any problems introduced by others will not reflect 50 | on the original authors' reputations. 51 | 52 | Finally, any free program is threatened constantly by software 53 | patents. We wish to avoid the danger that redistributors of a free 54 | program will individually obtain patent licenses, in effect making the 55 | program proprietary. To prevent this, we have made it clear that any 56 | patent must be licensed for everyone's free use or not licensed at 57 | all. 58 | 59 | The precise terms and conditions for copying, distribution and 60 | modification follow. 61 | 62 | ## TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 63 | 64 | **0.** This License applies to any program or other work which 65 | contains a notice placed by the copyright holder saying it may be 66 | distributed under the terms of this General Public License. The 67 | "Program", below, refers to any such program or work, and a "work 68 | based on the Program" means either the Program or any derivative work 69 | under copyright law: that is to say, a work containing the Program or 70 | a portion of it, either verbatim or with modifications and/or 71 | translated into another language. (Hereinafter, translation is 72 | included without limitation in the term "modification".) Each licensee 73 | is addressed as "you". 74 | 75 | Activities other than copying, distribution and modification are not 76 | covered by this License; they are outside its scope. The act of 77 | running the Program is not restricted, and the output from the Program 78 | is covered only if its contents constitute a work based on the Program 79 | (independent of having been made by running the Program). Whether that 80 | is true depends on what the Program does. 81 | 82 | **1.** You may copy and distribute verbatim copies of the Program's 83 | source code as you receive it, in any medium, provided that you 84 | conspicuously and appropriately publish on each copy an appropriate 85 | copyright notice and disclaimer of warranty; keep intact all the 86 | notices that refer to this License and to the absence of any warranty; 87 | and give any other recipients of the Program a copy of this License 88 | along with the Program. 89 | 90 | You may charge a fee for the physical act of transferring a copy, and 91 | you may at your option offer warranty protection in exchange for a 92 | fee. 93 | 94 | **2.** You may modify your copy or copies of the Program or any 95 | portion of it, thus forming a work based on the Program, and copy and 96 | distribute such modifications or work under the terms of Section 1 97 | above, provided that you also meet all of these conditions: 98 | 99 | 100 | **a)** You must cause the modified files to carry prominent notices 101 | stating that you changed the files and the date of any change. 102 | 103 | 104 | **b)** You must cause any work that you distribute or publish, that in 105 | whole or in part contains or is derived from the Program or any part 106 | thereof, to be licensed as a whole at no charge to all third parties 107 | under the terms of this License. 108 | 109 | 110 | **c)** If the modified program normally reads commands interactively 111 | when run, you must cause it, when started running for such interactive 112 | use in the most ordinary way, to print or display an announcement 113 | including an appropriate copyright notice and a notice that there is 114 | no warranty (or else, saying that you provide a warranty) and that 115 | users may redistribute the program under these conditions, and telling 116 | the user how to view a copy of this License. (Exception: if the 117 | Program itself is interactive but does not normally print such an 118 | announcement, your work based on the Program is not required to print 119 | an announcement.) 120 | 121 | These requirements apply to the modified work as a whole. If 122 | identifiable sections of that work are not derived from the Program, 123 | and can be reasonably considered independent and separate works in 124 | themselves, then this License, and its terms, do not apply to those 125 | sections when you distribute them as separate works. But when you 126 | distribute the same sections as part of a whole which is a work based 127 | on the Program, the distribution of the whole must be on the terms of 128 | this License, whose permissions for other licensees extend to the 129 | entire whole, and thus to each and every part regardless of who wrote 130 | it. 131 | 132 | Thus, it is not the intent of this section to claim rights or contest 133 | your rights to work written entirely by you; rather, the intent is to 134 | exercise the right to control the distribution of derivative or 135 | collective works based on the Program. 136 | 137 | In addition, mere aggregation of another work not based on the Program 138 | with the Program (or with a work based on the Program) on a volume of 139 | a storage or distribution medium does not bring the other work under 140 | the scope of this License. 141 | 142 | **3.** You may copy and distribute the Program (or a work based on it, 143 | under Section 2) in object code or executable form under the terms of 144 | Sections 1 and 2 above provided that you also do one of the following: 145 | 146 | 147 | **a)** Accompany it with the complete corresponding machine-readable 148 | source code, which must be distributed under the terms of Sections 1 149 | and 2 above on a medium customarily used for software interchange; or, 150 | 151 | 152 | **b)** Accompany it with a written offer, valid for at least three 153 | years, to give any third party, for a charge no more than your cost of 154 | physically performing source distribution, a complete machine-readable 155 | copy of the corresponding source code, to be distributed under the 156 | terms of Sections 1 and 2 above on a medium customarily used for 157 | software interchange; or, 158 | 159 | 160 | **c)** Accompany it with the information you received as to the offer 161 | to distribute corresponding source code. (This alternative is allowed 162 | only for noncommercial distribution and only if you received the 163 | program in object code or executable form with such an offer, in 164 | accord with Subsection b above.) 165 | 166 | The source code for a work means the preferred form of the work for 167 | making modifications to it. For an executable work, complete source 168 | code means all the source code for all modules it contains, plus any 169 | associated interface definition files, plus the scripts used to 170 | control compilation and installation of the executable. However, as a 171 | special exception, the source code distributed need not include 172 | anything that is normally distributed (in either source or binary 173 | form) with the major components (compiler, kernel, and so on) of the 174 | operating system on which the executable runs, unless that component 175 | itself accompanies the executable. 176 | 177 | If distribution of executable or object code is made by offering 178 | access to copy from a designated place, then offering equivalent 179 | access to copy the source code from the same place counts as 180 | distribution of the source code, even though third parties are not 181 | compelled to copy the source along with the object code. 182 | 183 | **4.** You may not copy, modify, sublicense, or distribute the Program 184 | except as expressly provided under this License. Any attempt otherwise 185 | to copy, modify, sublicense or distribute the Program is void, and 186 | will automatically terminate your rights under this License. However, 187 | parties who have received copies, or rights, from you under this 188 | License will not have their licenses terminated so long as such 189 | parties remain in full compliance. 190 | 191 | **5.** You are not required to accept this License, since you have not 192 | signed it. However, nothing else grants you permission to modify or 193 | distribute the Program or its derivative works. These actions are 194 | prohibited by law if you do not accept this License. Therefore, by 195 | modifying or distributing the Program (or any work based on the 196 | Program), you indicate your acceptance of this License to do so, and 197 | all its terms and conditions for copying, distributing or modifying 198 | the Program or works based on it. 199 | 200 | **6.** Each time you redistribute the Program (or any work based on 201 | the Program), the recipient automatically receives a license from the 202 | original licensor to copy, distribute or modify the Program subject to 203 | these terms and conditions. You may not impose any further 204 | restrictions on the recipients' exercise of the rights granted herein. 205 | You are not responsible for enforcing compliance by third parties to 206 | this License. 207 | 208 | **7.** If, as a consequence of a court judgment or allegation of 209 | patent infringement or for any other reason (not limited to patent 210 | issues), conditions are imposed on you (whether by court order, 211 | agreement or otherwise) that contradict the conditions of this 212 | License, they do not excuse you from the conditions of this License. 213 | If you cannot distribute so as to satisfy simultaneously your 214 | obligations under this License and any other pertinent obligations, 215 | then as a consequence you may not distribute the Program at all. For 216 | example, if a patent license would not permit royalty-free 217 | redistribution of the Program by all those who receive copies directly 218 | or indirectly through you, then the only way you could satisfy both it 219 | and this License would be to refrain entirely from distribution of the 220 | Program. 221 | 222 | If any portion of this section is held invalid or unenforceable under 223 | any particular circumstance, the balance of the section is intended to 224 | apply and the section as a whole is intended to apply in other 225 | circumstances. 226 | 227 | It is not the purpose of this section to induce you to infringe any 228 | patents or other property right claims or to contest validity of any 229 | such claims; this section has the sole purpose of protecting the 230 | integrity of the free software distribution system, which is 231 | implemented by public license practices. Many people have made 232 | generous contributions to the wide range of software distributed 233 | through that system in reliance on consistent application of that 234 | system; it is up to the author/donor to decide if he or she is willing 235 | to distribute software through any other system and a licensee cannot 236 | impose that choice. 237 | 238 | This section is intended to make thoroughly clear what is believed to 239 | be a consequence of the rest of this License. 240 | 241 | **8.** If the distribution and/or use of the Program is restricted in 242 | certain countries either by patents or by copyrighted interfaces, the 243 | original copyright holder who places the Program under this License 244 | may add an explicit geographical distribution limitation excluding 245 | those countries, so that distribution is permitted only in or among 246 | countries not thus excluded. In such case, this License incorporates 247 | the limitation as if written in the body of this License. 248 | 249 | **9.** The Free Software Foundation may publish revised and/or new 250 | versions of the General Public License from time to time. Such new 251 | versions will be similar in spirit to the present version, but may 252 | differ in detail to address new problems or concerns. 253 | 254 | Each version is given a distinguishing version number. If the Program 255 | specifies a version number of this License which applies to it and 256 | "any later version", you have the option of following the terms and 257 | conditions either of that version or of any later version published by 258 | the Free Software Foundation. If the Program does not specify a 259 | version number of this License, you may choose any version ever 260 | published by the Free Software Foundation. 261 | 262 | **10.** If you wish to incorporate parts of the Program into other 263 | free programs whose distribution conditions are different, write to 264 | the author to ask for permission. For software which is copyrighted by 265 | the Free Software Foundation, write to the Free Software Foundation; 266 | we sometimes make exceptions for this. Our decision will be guided by 267 | the two goals of preserving the free status of all derivatives of our 268 | free software and of promoting the sharing and reuse of software 269 | generally. 270 | 271 | **NO WARRANTY** 272 | 273 | **11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO 274 | WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 275 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 276 | OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY 277 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 278 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 279 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 280 | PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME 281 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 282 | 283 | **12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 284 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 285 | AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU 286 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 287 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 288 | PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 289 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 290 | FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF 291 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 292 | DAMAGES. 293 | 294 | END OF TERMS AND CONDITIONS 295 | 296 | ## How to Apply These Terms to Your New Programs 297 | 298 | If you develop a new program, and you want it to be of the greatest 299 | possible use to the public, the best way to achieve this is to make it 300 | free software which everyone can redistribute and change under these 301 | terms. 302 | 303 | To do so, attach the following notices to the program. It is safest to 304 | attach them to the start of each source file to most effectively 305 | convey the exclusion of warranty; and each file should have at least 306 | the "copyright" line and a pointer to where the full notice is found. 307 | 308 | one line to give the program's name and an idea of what it does. 309 | Copyright (C) yyyy name of author 310 | 311 | This program is free software; you can redistribute it and/or 312 | modify it under the terms of the GNU General Public License 313 | as published by the Free Software Foundation; either version 2 314 | of the License, or (at your option) any later version. 315 | 316 | This program is distributed in the hope that it will be useful, 317 | but WITHOUT ANY WARRANTY; without even the implied warranty of 318 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 319 | GNU General Public License for more details. 320 | 321 | You should have received a copy of the GNU General Public License 322 | along with this program; if not, write to the Free Software 323 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 324 | 325 | Also add information on how to contact you by electronic and paper 326 | mail. 327 | 328 | If the program is interactive, make it output a short notice like this 329 | when it starts in an interactive mode: 330 | 331 | Gnomovision version 69, Copyright (C) year name of author 332 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details 333 | type `show w'. This is free software, and you are welcome 334 | to redistribute it under certain conditions; type `show c' 335 | for details. 336 | 337 | The hypothetical commands \`show w' and \`show c' should show the 338 | appropriate parts of the General Public License. Of course, the 339 | commands you use may be called something other than \`show w' and 340 | \`show c'; they could even be mouse-clicks or menu items--whatever 341 | suits your program. 342 | 343 | You should also get your employer (if you work as a programmer) or 344 | your school, if any, to sign a "copyright disclaimer" for the program, 345 | if necessary. Here is a sample; alter the names: 346 | 347 | Yoyodyne, Inc., hereby disclaims all copyright 348 | interest in the program `Gnomovision' 349 | (which makes passes at compilers) written 350 | by James Hacker. 351 | 352 | signature of Ty Coon, 1 April 1989 353 | Ty Coon, President of Vice 354 | 355 | This General Public License does not permit incorporating your program 356 | into proprietary programs. If your program is a subroutine library, 357 | you may consider it more useful to permit linking proprietary 358 | applications with the library. If this is what you want to do, use the 359 | [GNU Lesser General Public 360 | License](https://www.gnu.org/licenses/lgpl.html) instead of this 361 | License. 362 | -------------------------------------------------------------------------------- /example-block-style-js/README.md: -------------------------------------------------------------------------------- 1 | # Example: Block Styles (JavaScript) 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | ------------------------------------------------------------------------------------------ | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-style-js) | example-block-style-js | BLOCK THEME, BLOCK STYLE, JAVASCRIPT | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-style-js.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-theme-examples/master/example-block-style-js/_playground/blueprint.json) | 8 | 9 | 10 | This is an example child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase how to add custom block styles (also known as block style variations) via JavaScript. For more information on this feature, read the [Block Style Variations](https://developer.wordpress.org/themes/features/block-style-variations/) documentation in the Theme Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a "Hand Drawn" style to the Image block. The code for this lives in several different places in the theme, so you will need to look at each of these files to see how they work together. 17 | 18 | - `functions.php`: Enqueues the JavaScript and stylesheet files needed. 19 | - `style.css`: Adds the CSS for the block style. 20 | - `assets/js/block-styles.js`: Adds the JavaScript for registering the block style. 21 | -------------------------------------------------------------------------------- /example-block-style-js/_playground/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://playground.wordpress.net/blueprint-schema.json", 3 | "landingPage": "/wp-admin/post.php?post=5&action=edit", 4 | "preferredVersions": { 5 | "php": "8.0", 6 | "wp": "6.4" 7 | }, 8 | "features": { 9 | "networking": true 10 | }, 11 | "steps": [ 12 | { 13 | "step": "installTheme", 14 | "themeZipFile": { 15 | "resource": "url", 16 | "url": "https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-style-js.zip" 17 | }, 18 | "options": { 19 | "activate": true 20 | } 21 | }, 22 | { 23 | "step": "login", 24 | "username": "admin", 25 | "password": "password" 26 | }, 27 | { 28 | "step": "runPHP", 29 | "code": "query('delete from wp_posts');" 30 | }, 31 | { 32 | "step": "importFile", 33 | "file": { 34 | "resource": "url", 35 | "url": "https://raw.githubusercontent.com/WordPress/block-theme-examples/master/example-block-style-js/_playground/export.xml" 36 | } 37 | } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /example-block-style-js/assets/js/block-styles.js: -------------------------------------------------------------------------------- 1 | // The CSS for this block style is located in the `style.css` file. 2 | wp.blocks.registerBlockStyle( 'core/image', { 3 | name: 'hand-drawn', 4 | label: wp.i18n.__( 'Hand Drawn', 'example-block-style-js' ) 5 | } ) 6 | -------------------------------------------------------------------------------- /example-block-style-js/functions.php: -------------------------------------------------------------------------------- 1 | 7 | * @copyright Copyright (c) 2023, Your Name 8 | * @link https://yourwebsite.tld 9 | * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html 10 | */ 11 | 12 | add_action( 'after_setup_theme', 'themeslug_editor_styles' ); 13 | 14 | /** 15 | * Adds the `style.css` file as an editor stylesheet. 16 | * 17 | * @since 1.0.0 18 | */ 19 | function themeslug_editor_styles() { 20 | add_editor_style( get_stylesheet_uri() ); 21 | } 22 | 23 | add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_styles' ); 24 | 25 | /** 26 | * Enqueues the `style.css` file for the front end. 27 | * 28 | * @since 1.0.0 29 | */ 30 | function themeslug_enqueue_styles() { 31 | wp_enqueue_style( 32 | 'themeslug', 33 | get_stylesheet_uri(), 34 | array(), 35 | wp_get_theme()->get( 'Version' ) 36 | ); 37 | } 38 | 39 | add_action( 'enqueue_block_editor_assets', 'themeslug_enqueue_block_variations' ); 40 | 41 | /** 42 | * Enqueues the `assets/js/block-styles.js` file, which is used to create 43 | * custom block styles. 44 | * 45 | * @since 1.0.0 46 | */ 47 | function themeslug_enqueue_block_variations() { 48 | wp_enqueue_script( 49 | 'themeslug-block-styles', 50 | get_theme_file_uri( 'assets/js/block-styles.js' ), 51 | array( 52 | 'wp-blocks', 53 | 'wp-i18n' 54 | ), 55 | wp_get_theme()->get( 'Version' ), 56 | true 57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /example-block-style-js/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-block-style-js/screenshot.png -------------------------------------------------------------------------------- /example-block-style-js/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Example - Block Style (JS) 3 | * Description: A child theme that registers a custom Image block style with JavaScript. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: example-block-style-js 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | .wp-block-image.is-style-hand-drawn img { 16 | color: inherit; 17 | border: 2px solid currentColor; 18 | overflow: hidden; 19 | box-shadow: 0 1px 2px 0 rgb( 0 0 0 / 0.05 ); 20 | border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; 21 | } 22 | -------------------------------------------------------------------------------- /example-block-style-php/LICENSE.md: -------------------------------------------------------------------------------- 1 | # GNU GENERAL PUBLIC LICENSE 2 | 3 | Version 2, June 1991 4 | 5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 7 | 8 | Everyone is permitted to copy and distribute verbatim copies 9 | of this license document, but changing it is not allowed. 10 | 11 | ## Preamble 12 | 13 | The licenses for most software are designed to take away your freedom 14 | to share and change it. By contrast, the GNU General Public License is 15 | intended to guarantee your freedom to share and change free 16 | software--to make sure the software is free for all its users. This 17 | General Public License applies to most of the Free Software 18 | Foundation's software and to any other program whose authors commit to 19 | using it. (Some other Free Software Foundation software is covered by 20 | the GNU Lesser General Public License instead.) You can apply it to 21 | your programs, too. 22 | 23 | When we speak of free software, we are referring to freedom, not 24 | price. Our General Public Licenses are designed to make sure that you 25 | have the freedom to distribute copies of free software (and charge for 26 | this service if you wish), that you receive source code or can get it 27 | if you want it, that you can change the software or use pieces of it 28 | in new free programs; and that you know you can do these things. 29 | 30 | To protect your rights, we need to make restrictions that forbid 31 | anyone to deny you these rights or to ask you to surrender the rights. 32 | These restrictions translate to certain responsibilities for you if 33 | you distribute copies of the software, or if you modify it. 34 | 35 | For example, if you distribute copies of such a program, whether 36 | gratis or for a fee, you must give the recipients all the rights that 37 | you have. You must make sure that they, too, receive or can get the 38 | source code. And you must show them these terms so they know their 39 | rights. 40 | 41 | We protect your rights with two steps: (1) copyright the software, and 42 | (2) offer you this license which gives you legal permission to copy, 43 | distribute and/or modify the software. 44 | 45 | Also, for each author's protection and ours, we want to make certain 46 | that everyone understands that there is no warranty for this free 47 | software. If the software is modified by someone else and passed on, 48 | we want its recipients to know that what they have is not the 49 | original, so that any problems introduced by others will not reflect 50 | on the original authors' reputations. 51 | 52 | Finally, any free program is threatened constantly by software 53 | patents. We wish to avoid the danger that redistributors of a free 54 | program will individually obtain patent licenses, in effect making the 55 | program proprietary. To prevent this, we have made it clear that any 56 | patent must be licensed for everyone's free use or not licensed at 57 | all. 58 | 59 | The precise terms and conditions for copying, distribution and 60 | modification follow. 61 | 62 | ## TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 63 | 64 | **0.** This License applies to any program or other work which 65 | contains a notice placed by the copyright holder saying it may be 66 | distributed under the terms of this General Public License. The 67 | "Program", below, refers to any such program or work, and a "work 68 | based on the Program" means either the Program or any derivative work 69 | under copyright law: that is to say, a work containing the Program or 70 | a portion of it, either verbatim or with modifications and/or 71 | translated into another language. (Hereinafter, translation is 72 | included without limitation in the term "modification".) Each licensee 73 | is addressed as "you". 74 | 75 | Activities other than copying, distribution and modification are not 76 | covered by this License; they are outside its scope. The act of 77 | running the Program is not restricted, and the output from the Program 78 | is covered only if its contents constitute a work based on the Program 79 | (independent of having been made by running the Program). Whether that 80 | is true depends on what the Program does. 81 | 82 | **1.** You may copy and distribute verbatim copies of the Program's 83 | source code as you receive it, in any medium, provided that you 84 | conspicuously and appropriately publish on each copy an appropriate 85 | copyright notice and disclaimer of warranty; keep intact all the 86 | notices that refer to this License and to the absence of any warranty; 87 | and give any other recipients of the Program a copy of this License 88 | along with the Program. 89 | 90 | You may charge a fee for the physical act of transferring a copy, and 91 | you may at your option offer warranty protection in exchange for a 92 | fee. 93 | 94 | **2.** You may modify your copy or copies of the Program or any 95 | portion of it, thus forming a work based on the Program, and copy and 96 | distribute such modifications or work under the terms of Section 1 97 | above, provided that you also meet all of these conditions: 98 | 99 | 100 | **a)** You must cause the modified files to carry prominent notices 101 | stating that you changed the files and the date of any change. 102 | 103 | 104 | **b)** You must cause any work that you distribute or publish, that in 105 | whole or in part contains or is derived from the Program or any part 106 | thereof, to be licensed as a whole at no charge to all third parties 107 | under the terms of this License. 108 | 109 | 110 | **c)** If the modified program normally reads commands interactively 111 | when run, you must cause it, when started running for such interactive 112 | use in the most ordinary way, to print or display an announcement 113 | including an appropriate copyright notice and a notice that there is 114 | no warranty (or else, saying that you provide a warranty) and that 115 | users may redistribute the program under these conditions, and telling 116 | the user how to view a copy of this License. (Exception: if the 117 | Program itself is interactive but does not normally print such an 118 | announcement, your work based on the Program is not required to print 119 | an announcement.) 120 | 121 | These requirements apply to the modified work as a whole. If 122 | identifiable sections of that work are not derived from the Program, 123 | and can be reasonably considered independent and separate works in 124 | themselves, then this License, and its terms, do not apply to those 125 | sections when you distribute them as separate works. But when you 126 | distribute the same sections as part of a whole which is a work based 127 | on the Program, the distribution of the whole must be on the terms of 128 | this License, whose permissions for other licensees extend to the 129 | entire whole, and thus to each and every part regardless of who wrote 130 | it. 131 | 132 | Thus, it is not the intent of this section to claim rights or contest 133 | your rights to work written entirely by you; rather, the intent is to 134 | exercise the right to control the distribution of derivative or 135 | collective works based on the Program. 136 | 137 | In addition, mere aggregation of another work not based on the Program 138 | with the Program (or with a work based on the Program) on a volume of 139 | a storage or distribution medium does not bring the other work under 140 | the scope of this License. 141 | 142 | **3.** You may copy and distribute the Program (or a work based on it, 143 | under Section 2) in object code or executable form under the terms of 144 | Sections 1 and 2 above provided that you also do one of the following: 145 | 146 | 147 | **a)** Accompany it with the complete corresponding machine-readable 148 | source code, which must be distributed under the terms of Sections 1 149 | and 2 above on a medium customarily used for software interchange; or, 150 | 151 | 152 | **b)** Accompany it with a written offer, valid for at least three 153 | years, to give any third party, for a charge no more than your cost of 154 | physically performing source distribution, a complete machine-readable 155 | copy of the corresponding source code, to be distributed under the 156 | terms of Sections 1 and 2 above on a medium customarily used for 157 | software interchange; or, 158 | 159 | 160 | **c)** Accompany it with the information you received as to the offer 161 | to distribute corresponding source code. (This alternative is allowed 162 | only for noncommercial distribution and only if you received the 163 | program in object code or executable form with such an offer, in 164 | accord with Subsection b above.) 165 | 166 | The source code for a work means the preferred form of the work for 167 | making modifications to it. For an executable work, complete source 168 | code means all the source code for all modules it contains, plus any 169 | associated interface definition files, plus the scripts used to 170 | control compilation and installation of the executable. However, as a 171 | special exception, the source code distributed need not include 172 | anything that is normally distributed (in either source or binary 173 | form) with the major components (compiler, kernel, and so on) of the 174 | operating system on which the executable runs, unless that component 175 | itself accompanies the executable. 176 | 177 | If distribution of executable or object code is made by offering 178 | access to copy from a designated place, then offering equivalent 179 | access to copy the source code from the same place counts as 180 | distribution of the source code, even though third parties are not 181 | compelled to copy the source along with the object code. 182 | 183 | **4.** You may not copy, modify, sublicense, or distribute the Program 184 | except as expressly provided under this License. Any attempt otherwise 185 | to copy, modify, sublicense or distribute the Program is void, and 186 | will automatically terminate your rights under this License. However, 187 | parties who have received copies, or rights, from you under this 188 | License will not have their licenses terminated so long as such 189 | parties remain in full compliance. 190 | 191 | **5.** You are not required to accept this License, since you have not 192 | signed it. However, nothing else grants you permission to modify or 193 | distribute the Program or its derivative works. These actions are 194 | prohibited by law if you do not accept this License. Therefore, by 195 | modifying or distributing the Program (or any work based on the 196 | Program), you indicate your acceptance of this License to do so, and 197 | all its terms and conditions for copying, distributing or modifying 198 | the Program or works based on it. 199 | 200 | **6.** Each time you redistribute the Program (or any work based on 201 | the Program), the recipient automatically receives a license from the 202 | original licensor to copy, distribute or modify the Program subject to 203 | these terms and conditions. You may not impose any further 204 | restrictions on the recipients' exercise of the rights granted herein. 205 | You are not responsible for enforcing compliance by third parties to 206 | this License. 207 | 208 | **7.** If, as a consequence of a court judgment or allegation of 209 | patent infringement or for any other reason (not limited to patent 210 | issues), conditions are imposed on you (whether by court order, 211 | agreement or otherwise) that contradict the conditions of this 212 | License, they do not excuse you from the conditions of this License. 213 | If you cannot distribute so as to satisfy simultaneously your 214 | obligations under this License and any other pertinent obligations, 215 | then as a consequence you may not distribute the Program at all. For 216 | example, if a patent license would not permit royalty-free 217 | redistribution of the Program by all those who receive copies directly 218 | or indirectly through you, then the only way you could satisfy both it 219 | and this License would be to refrain entirely from distribution of the 220 | Program. 221 | 222 | If any portion of this section is held invalid or unenforceable under 223 | any particular circumstance, the balance of the section is intended to 224 | apply and the section as a whole is intended to apply in other 225 | circumstances. 226 | 227 | It is not the purpose of this section to induce you to infringe any 228 | patents or other property right claims or to contest validity of any 229 | such claims; this section has the sole purpose of protecting the 230 | integrity of the free software distribution system, which is 231 | implemented by public license practices. Many people have made 232 | generous contributions to the wide range of software distributed 233 | through that system in reliance on consistent application of that 234 | system; it is up to the author/donor to decide if he or she is willing 235 | to distribute software through any other system and a licensee cannot 236 | impose that choice. 237 | 238 | This section is intended to make thoroughly clear what is believed to 239 | be a consequence of the rest of this License. 240 | 241 | **8.** If the distribution and/or use of the Program is restricted in 242 | certain countries either by patents or by copyrighted interfaces, the 243 | original copyright holder who places the Program under this License 244 | may add an explicit geographical distribution limitation excluding 245 | those countries, so that distribution is permitted only in or among 246 | countries not thus excluded. In such case, this License incorporates 247 | the limitation as if written in the body of this License. 248 | 249 | **9.** The Free Software Foundation may publish revised and/or new 250 | versions of the General Public License from time to time. Such new 251 | versions will be similar in spirit to the present version, but may 252 | differ in detail to address new problems or concerns. 253 | 254 | Each version is given a distinguishing version number. If the Program 255 | specifies a version number of this License which applies to it and 256 | "any later version", you have the option of following the terms and 257 | conditions either of that version or of any later version published by 258 | the Free Software Foundation. If the Program does not specify a 259 | version number of this License, you may choose any version ever 260 | published by the Free Software Foundation. 261 | 262 | **10.** If you wish to incorporate parts of the Program into other 263 | free programs whose distribution conditions are different, write to 264 | the author to ask for permission. For software which is copyrighted by 265 | the Free Software Foundation, write to the Free Software Foundation; 266 | we sometimes make exceptions for this. Our decision will be guided by 267 | the two goals of preserving the free status of all derivatives of our 268 | free software and of promoting the sharing and reuse of software 269 | generally. 270 | 271 | **NO WARRANTY** 272 | 273 | **11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO 274 | WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 275 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 276 | OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY 277 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 278 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 279 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 280 | PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME 281 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 282 | 283 | **12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 284 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 285 | AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU 286 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 287 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 288 | PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 289 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 290 | FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF 291 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 292 | DAMAGES. 293 | 294 | END OF TERMS AND CONDITIONS 295 | 296 | ## How to Apply These Terms to Your New Programs 297 | 298 | If you develop a new program, and you want it to be of the greatest 299 | possible use to the public, the best way to achieve this is to make it 300 | free software which everyone can redistribute and change under these 301 | terms. 302 | 303 | To do so, attach the following notices to the program. It is safest to 304 | attach them to the start of each source file to most effectively 305 | convey the exclusion of warranty; and each file should have at least 306 | the "copyright" line and a pointer to where the full notice is found. 307 | 308 | one line to give the program's name and an idea of what it does. 309 | Copyright (C) yyyy name of author 310 | 311 | This program is free software; you can redistribute it and/or 312 | modify it under the terms of the GNU General Public License 313 | as published by the Free Software Foundation; either version 2 314 | of the License, or (at your option) any later version. 315 | 316 | This program is distributed in the hope that it will be useful, 317 | but WITHOUT ANY WARRANTY; without even the implied warranty of 318 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 319 | GNU General Public License for more details. 320 | 321 | You should have received a copy of the GNU General Public License 322 | along with this program; if not, write to the Free Software 323 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 324 | 325 | Also add information on how to contact you by electronic and paper 326 | mail. 327 | 328 | If the program is interactive, make it output a short notice like this 329 | when it starts in an interactive mode: 330 | 331 | Gnomovision version 69, Copyright (C) year name of author 332 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details 333 | type `show w'. This is free software, and you are welcome 334 | to redistribute it under certain conditions; type `show c' 335 | for details. 336 | 337 | The hypothetical commands \`show w' and \`show c' should show the 338 | appropriate parts of the General Public License. Of course, the 339 | commands you use may be called something other than \`show w' and 340 | \`show c'; they could even be mouse-clicks or menu items--whatever 341 | suits your program. 342 | 343 | You should also get your employer (if you work as a programmer) or 344 | your school, if any, to sign a "copyright disclaimer" for the program, 345 | if necessary. Here is a sample; alter the names: 346 | 347 | Yoyodyne, Inc., hereby disclaims all copyright 348 | interest in the program `Gnomovision' 349 | (which makes passes at compilers) written 350 | by James Hacker. 351 | 352 | signature of Ty Coon, 1 April 1989 353 | Ty Coon, President of Vice 354 | 355 | This General Public License does not permit incorporating your program 356 | into proprietary programs. If your program is a subroutine library, 357 | you may consider it more useful to permit linking proprietary 358 | applications with the library. If this is what you want to do, use the 359 | [GNU Lesser General Public 360 | License](https://www.gnu.org/licenses/lgpl.html) instead of this 361 | License. 362 | -------------------------------------------------------------------------------- /example-block-style-php/README.md: -------------------------------------------------------------------------------- 1 | # Example: Block Styles (PHP) 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | ------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-style-php) | example-block-style-php | BLOCK THEME, BLOCK STYLE, PHP | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-style-php.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-theme-examples/master/example-block-style-php/_playground/blueprint.json) | 8 | 9 | 10 | This is an example child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase how to add custom block styles (also known as block style variations) via PHP. For more information on this feature, read the [Block Style Variations](https://developer.wordpress.org/themes/features/block-style-variations/) documentation in the Theme Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a "Hand Drawn" style to the Image block. The code for this lives in a single place in the theme: 17 | 18 | - `functions.php`: Registers the block style and uses the `inline_style` argument of `register_block_style()` to add inline CSS. 19 | -------------------------------------------------------------------------------- /example-block-style-php/_playground/blueprint.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://playground.wordpress.net/blueprint-schema.json", 3 | "landingPage": "/wp-admin/post.php?post=5&action=edit", 4 | "preferredVersions": { 5 | "php": "8.0", 6 | "wp": "6.4" 7 | }, 8 | "features": { 9 | "networking": true 10 | }, 11 | "steps": [ 12 | { 13 | "step": "installTheme", 14 | "themeZipFile": { 15 | "resource": "url", 16 | "url": "https://raw.githubusercontent.com/wptrainingteam/block-theme-examples/master/_zips/example-block-style-php.zip" 17 | }, 18 | "options": { 19 | "activate": true 20 | } 21 | }, 22 | { 23 | "step": "login", 24 | "username": "admin", 25 | "password": "password" 26 | }, 27 | { 28 | "step": "runPHP", 29 | "code": "query('delete from wp_posts');" 30 | }, 31 | { 32 | "step": "importFile", 33 | "file": { 34 | "resource": "url", 35 | "url": "https://raw.githubusercontent.com/wptrainingteam/block-theme-examples/master/example-block-style-php/_playground/export.xml" 36 | } 37 | } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /example-block-style-php/functions.php: -------------------------------------------------------------------------------- 1 | 7 | * @copyright Copyright (c) 2023, Your Name 8 | * @link https://yourwebsite.tld 9 | * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html 10 | */ 11 | 12 | add_action( 'init', 'themeslug_register_block_styles' ); 13 | 14 | /** 15 | * Registers custom block styles on the `init` hook. 16 | * 17 | * @since 1.0.0 18 | * @link https://developer.wordpress.org/reference/functions/register_block_style/ 19 | */ 20 | function themeslug_register_block_styles() { 21 | register_block_style( 'core/image', array( 22 | 'name' => 'hand-drawn', 23 | 'label' => __( 'Hand Drawn', 'example-block-style-php' ), 24 | 'inline_style' => '.wp-block-image.is-style-hand-drawn img { 25 | color: inherit; 26 | border: 2px solid currentColor; 27 | overflow: hidden; 28 | box-shadow: 0 1px 2px 0 rgb( 0 0 0 / 0.05 ); 29 | border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; 30 | }' 31 | ) ); 32 | } 33 | -------------------------------------------------------------------------------- /example-block-style-php/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-block-style-php/screenshot.png -------------------------------------------------------------------------------- /example-block-style-php/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Example - Block Style (PHP) 3 | * Description: A child theme that registers a custom Image block style with PHP. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: example-block-style-php 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | 17 | -------------------------------------------------------------------------------- /example-block-stylesheet/LICENSE.md: -------------------------------------------------------------------------------- 1 | # GNU GENERAL PUBLIC LICENSE 2 | 3 | Version 2, June 1991 4 | 5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 7 | 8 | Everyone is permitted to copy and distribute verbatim copies 9 | of this license document, but changing it is not allowed. 10 | 11 | ## Preamble 12 | 13 | The licenses for most software are designed to take away your freedom 14 | to share and change it. By contrast, the GNU General Public License is 15 | intended to guarantee your freedom to share and change free 16 | software--to make sure the software is free for all its users. This 17 | General Public License applies to most of the Free Software 18 | Foundation's software and to any other program whose authors commit to 19 | using it. (Some other Free Software Foundation software is covered by 20 | the GNU Lesser General Public License instead.) You can apply it to 21 | your programs, too. 22 | 23 | When we speak of free software, we are referring to freedom, not 24 | price. Our General Public Licenses are designed to make sure that you 25 | have the freedom to distribute copies of free software (and charge for 26 | this service if you wish), that you receive source code or can get it 27 | if you want it, that you can change the software or use pieces of it 28 | in new free programs; and that you know you can do these things. 29 | 30 | To protect your rights, we need to make restrictions that forbid 31 | anyone to deny you these rights or to ask you to surrender the rights. 32 | These restrictions translate to certain responsibilities for you if 33 | you distribute copies of the software, or if you modify it. 34 | 35 | For example, if you distribute copies of such a program, whether 36 | gratis or for a fee, you must give the recipients all the rights that 37 | you have. You must make sure that they, too, receive or can get the 38 | source code. And you must show them these terms so they know their 39 | rights. 40 | 41 | We protect your rights with two steps: (1) copyright the software, and 42 | (2) offer you this license which gives you legal permission to copy, 43 | distribute and/or modify the software. 44 | 45 | Also, for each author's protection and ours, we want to make certain 46 | that everyone understands that there is no warranty for this free 47 | software. If the software is modified by someone else and passed on, 48 | we want its recipients to know that what they have is not the 49 | original, so that any problems introduced by others will not reflect 50 | on the original authors' reputations. 51 | 52 | Finally, any free program is threatened constantly by software 53 | patents. We wish to avoid the danger that redistributors of a free 54 | program will individually obtain patent licenses, in effect making the 55 | program proprietary. To prevent this, we have made it clear that any 56 | patent must be licensed for everyone's free use or not licensed at 57 | all. 58 | 59 | The precise terms and conditions for copying, distribution and 60 | modification follow. 61 | 62 | ## TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 63 | 64 | **0.** This License applies to any program or other work which 65 | contains a notice placed by the copyright holder saying it may be 66 | distributed under the terms of this General Public License. The 67 | "Program", below, refers to any such program or work, and a "work 68 | based on the Program" means either the Program or any derivative work 69 | under copyright law: that is to say, a work containing the Program or 70 | a portion of it, either verbatim or with modifications and/or 71 | translated into another language. (Hereinafter, translation is 72 | included without limitation in the term "modification".) Each licensee 73 | is addressed as "you". 74 | 75 | Activities other than copying, distribution and modification are not 76 | covered by this License; they are outside its scope. The act of 77 | running the Program is not restricted, and the output from the Program 78 | is covered only if its contents constitute a work based on the Program 79 | (independent of having been made by running the Program). Whether that 80 | is true depends on what the Program does. 81 | 82 | **1.** You may copy and distribute verbatim copies of the Program's 83 | source code as you receive it, in any medium, provided that you 84 | conspicuously and appropriately publish on each copy an appropriate 85 | copyright notice and disclaimer of warranty; keep intact all the 86 | notices that refer to this License and to the absence of any warranty; 87 | and give any other recipients of the Program a copy of this License 88 | along with the Program. 89 | 90 | You may charge a fee for the physical act of transferring a copy, and 91 | you may at your option offer warranty protection in exchange for a 92 | fee. 93 | 94 | **2.** You may modify your copy or copies of the Program or any 95 | portion of it, thus forming a work based on the Program, and copy and 96 | distribute such modifications or work under the terms of Section 1 97 | above, provided that you also meet all of these conditions: 98 | 99 | 100 | **a)** You must cause the modified files to carry prominent notices 101 | stating that you changed the files and the date of any change. 102 | 103 | 104 | **b)** You must cause any work that you distribute or publish, that in 105 | whole or in part contains or is derived from the Program or any part 106 | thereof, to be licensed as a whole at no charge to all third parties 107 | under the terms of this License. 108 | 109 | 110 | **c)** If the modified program normally reads commands interactively 111 | when run, you must cause it, when started running for such interactive 112 | use in the most ordinary way, to print or display an announcement 113 | including an appropriate copyright notice and a notice that there is 114 | no warranty (or else, saying that you provide a warranty) and that 115 | users may redistribute the program under these conditions, and telling 116 | the user how to view a copy of this License. (Exception: if the 117 | Program itself is interactive but does not normally print such an 118 | announcement, your work based on the Program is not required to print 119 | an announcement.) 120 | 121 | These requirements apply to the modified work as a whole. If 122 | identifiable sections of that work are not derived from the Program, 123 | and can be reasonably considered independent and separate works in 124 | themselves, then this License, and its terms, do not apply to those 125 | sections when you distribute them as separate works. But when you 126 | distribute the same sections as part of a whole which is a work based 127 | on the Program, the distribution of the whole must be on the terms of 128 | this License, whose permissions for other licensees extend to the 129 | entire whole, and thus to each and every part regardless of who wrote 130 | it. 131 | 132 | Thus, it is not the intent of this section to claim rights or contest 133 | your rights to work written entirely by you; rather, the intent is to 134 | exercise the right to control the distribution of derivative or 135 | collective works based on the Program. 136 | 137 | In addition, mere aggregation of another work not based on the Program 138 | with the Program (or with a work based on the Program) on a volume of 139 | a storage or distribution medium does not bring the other work under 140 | the scope of this License. 141 | 142 | **3.** You may copy and distribute the Program (or a work based on it, 143 | under Section 2) in object code or executable form under the terms of 144 | Sections 1 and 2 above provided that you also do one of the following: 145 | 146 | 147 | **a)** Accompany it with the complete corresponding machine-readable 148 | source code, which must be distributed under the terms of Sections 1 149 | and 2 above on a medium customarily used for software interchange; or, 150 | 151 | 152 | **b)** Accompany it with a written offer, valid for at least three 153 | years, to give any third party, for a charge no more than your cost of 154 | physically performing source distribution, a complete machine-readable 155 | copy of the corresponding source code, to be distributed under the 156 | terms of Sections 1 and 2 above on a medium customarily used for 157 | software interchange; or, 158 | 159 | 160 | **c)** Accompany it with the information you received as to the offer 161 | to distribute corresponding source code. (This alternative is allowed 162 | only for noncommercial distribution and only if you received the 163 | program in object code or executable form with such an offer, in 164 | accord with Subsection b above.) 165 | 166 | The source code for a work means the preferred form of the work for 167 | making modifications to it. For an executable work, complete source 168 | code means all the source code for all modules it contains, plus any 169 | associated interface definition files, plus the scripts used to 170 | control compilation and installation of the executable. However, as a 171 | special exception, the source code distributed need not include 172 | anything that is normally distributed (in either source or binary 173 | form) with the major components (compiler, kernel, and so on) of the 174 | operating system on which the executable runs, unless that component 175 | itself accompanies the executable. 176 | 177 | If distribution of executable or object code is made by offering 178 | access to copy from a designated place, then offering equivalent 179 | access to copy the source code from the same place counts as 180 | distribution of the source code, even though third parties are not 181 | compelled to copy the source along with the object code. 182 | 183 | **4.** You may not copy, modify, sublicense, or distribute the Program 184 | except as expressly provided under this License. Any attempt otherwise 185 | to copy, modify, sublicense or distribute the Program is void, and 186 | will automatically terminate your rights under this License. However, 187 | parties who have received copies, or rights, from you under this 188 | License will not have their licenses terminated so long as such 189 | parties remain in full compliance. 190 | 191 | **5.** You are not required to accept this License, since you have not 192 | signed it. However, nothing else grants you permission to modify or 193 | distribute the Program or its derivative works. These actions are 194 | prohibited by law if you do not accept this License. Therefore, by 195 | modifying or distributing the Program (or any work based on the 196 | Program), you indicate your acceptance of this License to do so, and 197 | all its terms and conditions for copying, distributing or modifying 198 | the Program or works based on it. 199 | 200 | **6.** Each time you redistribute the Program (or any work based on 201 | the Program), the recipient automatically receives a license from the 202 | original licensor to copy, distribute or modify the Program subject to 203 | these terms and conditions. You may not impose any further 204 | restrictions on the recipients' exercise of the rights granted herein. 205 | You are not responsible for enforcing compliance by third parties to 206 | this License. 207 | 208 | **7.** If, as a consequence of a court judgment or allegation of 209 | patent infringement or for any other reason (not limited to patent 210 | issues), conditions are imposed on you (whether by court order, 211 | agreement or otherwise) that contradict the conditions of this 212 | License, they do not excuse you from the conditions of this License. 213 | If you cannot distribute so as to satisfy simultaneously your 214 | obligations under this License and any other pertinent obligations, 215 | then as a consequence you may not distribute the Program at all. For 216 | example, if a patent license would not permit royalty-free 217 | redistribution of the Program by all those who receive copies directly 218 | or indirectly through you, then the only way you could satisfy both it 219 | and this License would be to refrain entirely from distribution of the 220 | Program. 221 | 222 | If any portion of this section is held invalid or unenforceable under 223 | any particular circumstance, the balance of the section is intended to 224 | apply and the section as a whole is intended to apply in other 225 | circumstances. 226 | 227 | It is not the purpose of this section to induce you to infringe any 228 | patents or other property right claims or to contest validity of any 229 | such claims; this section has the sole purpose of protecting the 230 | integrity of the free software distribution system, which is 231 | implemented by public license practices. Many people have made 232 | generous contributions to the wide range of software distributed 233 | through that system in reliance on consistent application of that 234 | system; it is up to the author/donor to decide if he or she is willing 235 | to distribute software through any other system and a licensee cannot 236 | impose that choice. 237 | 238 | This section is intended to make thoroughly clear what is believed to 239 | be a consequence of the rest of this License. 240 | 241 | **8.** If the distribution and/or use of the Program is restricted in 242 | certain countries either by patents or by copyrighted interfaces, the 243 | original copyright holder who places the Program under this License 244 | may add an explicit geographical distribution limitation excluding 245 | those countries, so that distribution is permitted only in or among 246 | countries not thus excluded. In such case, this License incorporates 247 | the limitation as if written in the body of this License. 248 | 249 | **9.** The Free Software Foundation may publish revised and/or new 250 | versions of the General Public License from time to time. Such new 251 | versions will be similar in spirit to the present version, but may 252 | differ in detail to address new problems or concerns. 253 | 254 | Each version is given a distinguishing version number. If the Program 255 | specifies a version number of this License which applies to it and 256 | "any later version", you have the option of following the terms and 257 | conditions either of that version or of any later version published by 258 | the Free Software Foundation. If the Program does not specify a 259 | version number of this License, you may choose any version ever 260 | published by the Free Software Foundation. 261 | 262 | **10.** If you wish to incorporate parts of the Program into other 263 | free programs whose distribution conditions are different, write to 264 | the author to ask for permission. For software which is copyrighted by 265 | the Free Software Foundation, write to the Free Software Foundation; 266 | we sometimes make exceptions for this. Our decision will be guided by 267 | the two goals of preserving the free status of all derivatives of our 268 | free software and of promoting the sharing and reuse of software 269 | generally. 270 | 271 | **NO WARRANTY** 272 | 273 | **11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO 274 | WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 275 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 276 | OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY 277 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 278 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 279 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 280 | PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME 281 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 282 | 283 | **12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 284 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 285 | AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU 286 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 287 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 288 | PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 289 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 290 | FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF 291 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 292 | DAMAGES. 293 | 294 | END OF TERMS AND CONDITIONS 295 | 296 | ## How to Apply These Terms to Your New Programs 297 | 298 | If you develop a new program, and you want it to be of the greatest 299 | possible use to the public, the best way to achieve this is to make it 300 | free software which everyone can redistribute and change under these 301 | terms. 302 | 303 | To do so, attach the following notices to the program. It is safest to 304 | attach them to the start of each source file to most effectively 305 | convey the exclusion of warranty; and each file should have at least 306 | the "copyright" line and a pointer to where the full notice is found. 307 | 308 | one line to give the program's name and an idea of what it does. 309 | Copyright (C) yyyy name of author 310 | 311 | This program is free software; you can redistribute it and/or 312 | modify it under the terms of the GNU General Public License 313 | as published by the Free Software Foundation; either version 2 314 | of the License, or (at your option) any later version. 315 | 316 | This program is distributed in the hope that it will be useful, 317 | but WITHOUT ANY WARRANTY; without even the implied warranty of 318 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 319 | GNU General Public License for more details. 320 | 321 | You should have received a copy of the GNU General Public License 322 | along with this program; if not, write to the Free Software 323 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 324 | 325 | Also add information on how to contact you by electronic and paper 326 | mail. 327 | 328 | If the program is interactive, make it output a short notice like this 329 | when it starts in an interactive mode: 330 | 331 | Gnomovision version 69, Copyright (C) year name of author 332 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details 333 | type `show w'. This is free software, and you are welcome 334 | to redistribute it under certain conditions; type `show c' 335 | for details. 336 | 337 | The hypothetical commands \`show w' and \`show c' should show the 338 | appropriate parts of the General Public License. Of course, the 339 | commands you use may be called something other than \`show w' and 340 | \`show c'; they could even be mouse-clicks or menu items--whatever 341 | suits your program. 342 | 343 | You should also get your employer (if you work as a programmer) or 344 | your school, if any, to sign a "copyright disclaimer" for the program, 345 | if necessary. Here is a sample; alter the names: 346 | 347 | Yoyodyne, Inc., hereby disclaims all copyright 348 | interest in the program `Gnomovision' 349 | (which makes passes at compilers) written 350 | by James Hacker. 351 | 352 | signature of Ty Coon, 1 April 1989 353 | Ty Coon, President of Vice 354 | 355 | This General Public License does not permit incorporating your program 356 | into proprietary programs. If your program is a subroutine library, 357 | you may consider it more useful to permit linking proprietary 358 | applications with the library. If this is what you want to do, use the 359 | [GNU Lesser General Public 360 | License](https://www.gnu.org/licenses/lgpl.html) instead of this 361 | License. 362 | -------------------------------------------------------------------------------- /example-block-stylesheet/README.md: -------------------------------------------------------------------------------- 1 | # Example: Block Stylesheet 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | -------------------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-stylesheet) | example-block-stylesheet | BLOCK THEME, PHP | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-stylesheet.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-stylesheet.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 8 | 9 | 10 | This is an example child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase how to add custom block stylesheets to a theme. For more information on this feature, read the [Block Stylesheets](https://developer.wordpress.org/themes/features/block-stylesheets/) documentation in the Theme Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a custom stylesheet for the Image block that is loaded in the editor but only gets loaded on the front end when the block is in use. The design is a simple gradient _faux_ border around the `` element within the Image block. 17 | 18 | The code in this example requires two files to achieve the effect: 19 | 20 | - `functions.php`: Registers the custom block stylesheet. 21 | - `assets/css/blocks/core-image.css`: Adds the custom CSS for the Image block. 22 | -------------------------------------------------------------------------------- /example-block-stylesheet/assets/css/blocks/core-image.css: -------------------------------------------------------------------------------- 1 | .wp-block-image img { 2 | padding: 1rem; 3 | background: linear-gradient( -60deg, #ff5858, #f09819 ); 4 | } 5 | -------------------------------------------------------------------------------- /example-block-stylesheet/functions.php: -------------------------------------------------------------------------------- 1 | 7 | * @copyright Copyright (c) 2023, Your Name 8 | * @link https://yourwebsite.tld 9 | * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html 10 | */ 11 | 12 | add_action( 'init', 'themeslug_enqueue_block_stylesheets' ); 13 | 14 | /** 15 | * Enqueues a block-specific stylesheet on the `init` hook. 16 | * 17 | * @since 1.0.0 18 | * @link https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/ 19 | */ 20 | 21 | function themeslug_enqueue_block_stylesheets() { 22 | wp_enqueue_block_style( 'core/image', array( 23 | 'handle' => 'themeslug-block-image', 24 | 'src' => get_theme_file_uri( "assets/css/blocks/core-image.css" ), 25 | 'path' => get_theme_file_path( "assets/css/blocks/core-image.css" ) 26 | ) ); 27 | } 28 | 29 | -------------------------------------------------------------------------------- /example-block-stylesheet/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-block-stylesheet/screenshot.png -------------------------------------------------------------------------------- /example-block-stylesheet/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Example - Block Stylesheet 3 | * Description: A child theme with an of registering a block stylesheet for the Image block. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: example-block-stylesheet 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | -------------------------------------------------------------------------------- /example-block-variation/LICENSE.md: -------------------------------------------------------------------------------- 1 | # GNU GENERAL PUBLIC LICENSE 2 | 3 | Version 2, June 1991 4 | 5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 7 | 8 | Everyone is permitted to copy and distribute verbatim copies 9 | of this license document, but changing it is not allowed. 10 | 11 | ## Preamble 12 | 13 | The licenses for most software are designed to take away your freedom 14 | to share and change it. By contrast, the GNU General Public License is 15 | intended to guarantee your freedom to share and change free 16 | software--to make sure the software is free for all its users. This 17 | General Public License applies to most of the Free Software 18 | Foundation's software and to any other program whose authors commit to 19 | using it. (Some other Free Software Foundation software is covered by 20 | the GNU Lesser General Public License instead.) You can apply it to 21 | your programs, too. 22 | 23 | When we speak of free software, we are referring to freedom, not 24 | price. Our General Public Licenses are designed to make sure that you 25 | have the freedom to distribute copies of free software (and charge for 26 | this service if you wish), that you receive source code or can get it 27 | if you want it, that you can change the software or use pieces of it 28 | in new free programs; and that you know you can do these things. 29 | 30 | To protect your rights, we need to make restrictions that forbid 31 | anyone to deny you these rights or to ask you to surrender the rights. 32 | These restrictions translate to certain responsibilities for you if 33 | you distribute copies of the software, or if you modify it. 34 | 35 | For example, if you distribute copies of such a program, whether 36 | gratis or for a fee, you must give the recipients all the rights that 37 | you have. You must make sure that they, too, receive or can get the 38 | source code. And you must show them these terms so they know their 39 | rights. 40 | 41 | We protect your rights with two steps: (1) copyright the software, and 42 | (2) offer you this license which gives you legal permission to copy, 43 | distribute and/or modify the software. 44 | 45 | Also, for each author's protection and ours, we want to make certain 46 | that everyone understands that there is no warranty for this free 47 | software. If the software is modified by someone else and passed on, 48 | we want its recipients to know that what they have is not the 49 | original, so that any problems introduced by others will not reflect 50 | on the original authors' reputations. 51 | 52 | Finally, any free program is threatened constantly by software 53 | patents. We wish to avoid the danger that redistributors of a free 54 | program will individually obtain patent licenses, in effect making the 55 | program proprietary. To prevent this, we have made it clear that any 56 | patent must be licensed for everyone's free use or not licensed at 57 | all. 58 | 59 | The precise terms and conditions for copying, distribution and 60 | modification follow. 61 | 62 | ## TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 63 | 64 | **0.** This License applies to any program or other work which 65 | contains a notice placed by the copyright holder saying it may be 66 | distributed under the terms of this General Public License. The 67 | "Program", below, refers to any such program or work, and a "work 68 | based on the Program" means either the Program or any derivative work 69 | under copyright law: that is to say, a work containing the Program or 70 | a portion of it, either verbatim or with modifications and/or 71 | translated into another language. (Hereinafter, translation is 72 | included without limitation in the term "modification".) Each licensee 73 | is addressed as "you". 74 | 75 | Activities other than copying, distribution and modification are not 76 | covered by this License; they are outside its scope. The act of 77 | running the Program is not restricted, and the output from the Program 78 | is covered only if its contents constitute a work based on the Program 79 | (independent of having been made by running the Program). Whether that 80 | is true depends on what the Program does. 81 | 82 | **1.** You may copy and distribute verbatim copies of the Program's 83 | source code as you receive it, in any medium, provided that you 84 | conspicuously and appropriately publish on each copy an appropriate 85 | copyright notice and disclaimer of warranty; keep intact all the 86 | notices that refer to this License and to the absence of any warranty; 87 | and give any other recipients of the Program a copy of this License 88 | along with the Program. 89 | 90 | You may charge a fee for the physical act of transferring a copy, and 91 | you may at your option offer warranty protection in exchange for a 92 | fee. 93 | 94 | **2.** You may modify your copy or copies of the Program or any 95 | portion of it, thus forming a work based on the Program, and copy and 96 | distribute such modifications or work under the terms of Section 1 97 | above, provided that you also meet all of these conditions: 98 | 99 | 100 | **a)** You must cause the modified files to carry prominent notices 101 | stating that you changed the files and the date of any change. 102 | 103 | 104 | **b)** You must cause any work that you distribute or publish, that in 105 | whole or in part contains or is derived from the Program or any part 106 | thereof, to be licensed as a whole at no charge to all third parties 107 | under the terms of this License. 108 | 109 | 110 | **c)** If the modified program normally reads commands interactively 111 | when run, you must cause it, when started running for such interactive 112 | use in the most ordinary way, to print or display an announcement 113 | including an appropriate copyright notice and a notice that there is 114 | no warranty (or else, saying that you provide a warranty) and that 115 | users may redistribute the program under these conditions, and telling 116 | the user how to view a copy of this License. (Exception: if the 117 | Program itself is interactive but does not normally print such an 118 | announcement, your work based on the Program is not required to print 119 | an announcement.) 120 | 121 | These requirements apply to the modified work as a whole. If 122 | identifiable sections of that work are not derived from the Program, 123 | and can be reasonably considered independent and separate works in 124 | themselves, then this License, and its terms, do not apply to those 125 | sections when you distribute them as separate works. But when you 126 | distribute the same sections as part of a whole which is a work based 127 | on the Program, the distribution of the whole must be on the terms of 128 | this License, whose permissions for other licensees extend to the 129 | entire whole, and thus to each and every part regardless of who wrote 130 | it. 131 | 132 | Thus, it is not the intent of this section to claim rights or contest 133 | your rights to work written entirely by you; rather, the intent is to 134 | exercise the right to control the distribution of derivative or 135 | collective works based on the Program. 136 | 137 | In addition, mere aggregation of another work not based on the Program 138 | with the Program (or with a work based on the Program) on a volume of 139 | a storage or distribution medium does not bring the other work under 140 | the scope of this License. 141 | 142 | **3.** You may copy and distribute the Program (or a work based on it, 143 | under Section 2) in object code or executable form under the terms of 144 | Sections 1 and 2 above provided that you also do one of the following: 145 | 146 | 147 | **a)** Accompany it with the complete corresponding machine-readable 148 | source code, which must be distributed under the terms of Sections 1 149 | and 2 above on a medium customarily used for software interchange; or, 150 | 151 | 152 | **b)** Accompany it with a written offer, valid for at least three 153 | years, to give any third party, for a charge no more than your cost of 154 | physically performing source distribution, a complete machine-readable 155 | copy of the corresponding source code, to be distributed under the 156 | terms of Sections 1 and 2 above on a medium customarily used for 157 | software interchange; or, 158 | 159 | 160 | **c)** Accompany it with the information you received as to the offer 161 | to distribute corresponding source code. (This alternative is allowed 162 | only for noncommercial distribution and only if you received the 163 | program in object code or executable form with such an offer, in 164 | accord with Subsection b above.) 165 | 166 | The source code for a work means the preferred form of the work for 167 | making modifications to it. For an executable work, complete source 168 | code means all the source code for all modules it contains, plus any 169 | associated interface definition files, plus the scripts used to 170 | control compilation and installation of the executable. However, as a 171 | special exception, the source code distributed need not include 172 | anything that is normally distributed (in either source or binary 173 | form) with the major components (compiler, kernel, and so on) of the 174 | operating system on which the executable runs, unless that component 175 | itself accompanies the executable. 176 | 177 | If distribution of executable or object code is made by offering 178 | access to copy from a designated place, then offering equivalent 179 | access to copy the source code from the same place counts as 180 | distribution of the source code, even though third parties are not 181 | compelled to copy the source along with the object code. 182 | 183 | **4.** You may not copy, modify, sublicense, or distribute the Program 184 | except as expressly provided under this License. Any attempt otherwise 185 | to copy, modify, sublicense or distribute the Program is void, and 186 | will automatically terminate your rights under this License. However, 187 | parties who have received copies, or rights, from you under this 188 | License will not have their licenses terminated so long as such 189 | parties remain in full compliance. 190 | 191 | **5.** You are not required to accept this License, since you have not 192 | signed it. However, nothing else grants you permission to modify or 193 | distribute the Program or its derivative works. These actions are 194 | prohibited by law if you do not accept this License. Therefore, by 195 | modifying or distributing the Program (or any work based on the 196 | Program), you indicate your acceptance of this License to do so, and 197 | all its terms and conditions for copying, distributing or modifying 198 | the Program or works based on it. 199 | 200 | **6.** Each time you redistribute the Program (or any work based on 201 | the Program), the recipient automatically receives a license from the 202 | original licensor to copy, distribute or modify the Program subject to 203 | these terms and conditions. You may not impose any further 204 | restrictions on the recipients' exercise of the rights granted herein. 205 | You are not responsible for enforcing compliance by third parties to 206 | this License. 207 | 208 | **7.** If, as a consequence of a court judgment or allegation of 209 | patent infringement or for any other reason (not limited to patent 210 | issues), conditions are imposed on you (whether by court order, 211 | agreement or otherwise) that contradict the conditions of this 212 | License, they do not excuse you from the conditions of this License. 213 | If you cannot distribute so as to satisfy simultaneously your 214 | obligations under this License and any other pertinent obligations, 215 | then as a consequence you may not distribute the Program at all. For 216 | example, if a patent license would not permit royalty-free 217 | redistribution of the Program by all those who receive copies directly 218 | or indirectly through you, then the only way you could satisfy both it 219 | and this License would be to refrain entirely from distribution of the 220 | Program. 221 | 222 | If any portion of this section is held invalid or unenforceable under 223 | any particular circumstance, the balance of the section is intended to 224 | apply and the section as a whole is intended to apply in other 225 | circumstances. 226 | 227 | It is not the purpose of this section to induce you to infringe any 228 | patents or other property right claims or to contest validity of any 229 | such claims; this section has the sole purpose of protecting the 230 | integrity of the free software distribution system, which is 231 | implemented by public license practices. Many people have made 232 | generous contributions to the wide range of software distributed 233 | through that system in reliance on consistent application of that 234 | system; it is up to the author/donor to decide if he or she is willing 235 | to distribute software through any other system and a licensee cannot 236 | impose that choice. 237 | 238 | This section is intended to make thoroughly clear what is believed to 239 | be a consequence of the rest of this License. 240 | 241 | **8.** If the distribution and/or use of the Program is restricted in 242 | certain countries either by patents or by copyrighted interfaces, the 243 | original copyright holder who places the Program under this License 244 | may add an explicit geographical distribution limitation excluding 245 | those countries, so that distribution is permitted only in or among 246 | countries not thus excluded. In such case, this License incorporates 247 | the limitation as if written in the body of this License. 248 | 249 | **9.** The Free Software Foundation may publish revised and/or new 250 | versions of the General Public License from time to time. Such new 251 | versions will be similar in spirit to the present version, but may 252 | differ in detail to address new problems or concerns. 253 | 254 | Each version is given a distinguishing version number. If the Program 255 | specifies a version number of this License which applies to it and 256 | "any later version", you have the option of following the terms and 257 | conditions either of that version or of any later version published by 258 | the Free Software Foundation. If the Program does not specify a 259 | version number of this License, you may choose any version ever 260 | published by the Free Software Foundation. 261 | 262 | **10.** If you wish to incorporate parts of the Program into other 263 | free programs whose distribution conditions are different, write to 264 | the author to ask for permission. For software which is copyrighted by 265 | the Free Software Foundation, write to the Free Software Foundation; 266 | we sometimes make exceptions for this. Our decision will be guided by 267 | the two goals of preserving the free status of all derivatives of our 268 | free software and of promoting the sharing and reuse of software 269 | generally. 270 | 271 | **NO WARRANTY** 272 | 273 | **11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO 274 | WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 275 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 276 | OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY 277 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 278 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 279 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 280 | PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME 281 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 282 | 283 | **12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 284 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 285 | AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU 286 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 287 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 288 | PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 289 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 290 | FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF 291 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 292 | DAMAGES. 293 | 294 | END OF TERMS AND CONDITIONS 295 | 296 | ## How to Apply These Terms to Your New Programs 297 | 298 | If you develop a new program, and you want it to be of the greatest 299 | possible use to the public, the best way to achieve this is to make it 300 | free software which everyone can redistribute and change under these 301 | terms. 302 | 303 | To do so, attach the following notices to the program. It is safest to 304 | attach them to the start of each source file to most effectively 305 | convey the exclusion of warranty; and each file should have at least 306 | the "copyright" line and a pointer to where the full notice is found. 307 | 308 | one line to give the program's name and an idea of what it does. 309 | Copyright (C) yyyy name of author 310 | 311 | This program is free software; you can redistribute it and/or 312 | modify it under the terms of the GNU General Public License 313 | as published by the Free Software Foundation; either version 2 314 | of the License, or (at your option) any later version. 315 | 316 | This program is distributed in the hope that it will be useful, 317 | but WITHOUT ANY WARRANTY; without even the implied warranty of 318 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 319 | GNU General Public License for more details. 320 | 321 | You should have received a copy of the GNU General Public License 322 | along with this program; if not, write to the Free Software 323 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 324 | 325 | Also add information on how to contact you by electronic and paper 326 | mail. 327 | 328 | If the program is interactive, make it output a short notice like this 329 | when it starts in an interactive mode: 330 | 331 | Gnomovision version 69, Copyright (C) year name of author 332 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details 333 | type `show w'. This is free software, and you are welcome 334 | to redistribute it under certain conditions; type `show c' 335 | for details. 336 | 337 | The hypothetical commands \`show w' and \`show c' should show the 338 | appropriate parts of the General Public License. Of course, the 339 | commands you use may be called something other than \`show w' and 340 | \`show c'; they could even be mouse-clicks or menu items--whatever 341 | suits your program. 342 | 343 | You should also get your employer (if you work as a programmer) or 344 | your school, if any, to sign a "copyright disclaimer" for the program, 345 | if necessary. Here is a sample; alter the names: 346 | 347 | Yoyodyne, Inc., hereby disclaims all copyright 348 | interest in the program `Gnomovision' 349 | (which makes passes at compilers) written 350 | by James Hacker. 351 | 352 | signature of Ty Coon, 1 April 1989 353 | Ty Coon, President of Vice 354 | 355 | This General Public License does not permit incorporating your program 356 | into proprietary programs. If your program is a subroutine library, 357 | you may consider it more useful to permit linking proprietary 358 | applications with the library. If this is what you want to do, use the 359 | [GNU Lesser General Public 360 | License](https://www.gnu.org/licenses/lgpl.html) instead of this 361 | License. 362 | -------------------------------------------------------------------------------- /example-block-variation/README.md: -------------------------------------------------------------------------------- 1 | # Example: Block Variation 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | ------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-block-variation) | example-block-variation | BLOCK THEME, JAVASCRIPT | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-variation.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-variation.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 8 | 9 | 10 | This is an example child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase how to add a custom block variation. For more information on this feature, read the [Block Variations](https://developer.wordpress.org/themes/features/block-variations/) documentation in the Theme Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a "Theme Name: Spacer" variation to the core Spacer block. The variation changes the `height` attribute to a custom value. 17 | 18 | The code in this example requires two files to achieve the effect: 19 | 20 | - `functions.php`: Enqueues the JavaScript needed for the editor. 21 | - `assets/js/block-variations.js`: Adds the JavaScript to register the variation. 22 | -------------------------------------------------------------------------------- /example-block-variation/assets/js/block-variations.js: -------------------------------------------------------------------------------- 1 | wp.blocks.registerBlockVariation( 'core/spacer', { 2 | name: 'themeslug/spacer', 3 | title: wp.i18n.__( 'Theme Name: Spacer', 'example-block-variation' ), 4 | keywords: [ 'space', 'spacer', 'spacing' ], 5 | scope: [ 'block', 'inserter', 'transform' ], 6 | attributes: { 7 | height: '180px' 8 | }, 9 | isActive: ( blockAttributes ) => 10 | blockAttributes.height && '180px' === blockAttributes.height 11 | } ); 12 | -------------------------------------------------------------------------------- /example-block-variation/functions.php: -------------------------------------------------------------------------------- 1 | 7 | * @copyright Copyright (c) 2023, Your Name 8 | * @link https://yourwebsite.tld 9 | * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html 10 | */ 11 | 12 | add_action( 'enqueue_block_editor_assets', 'themeslug_enqueue_block_variations' ); 13 | 14 | /** 15 | * Enqueues the `assets/js/block-variations.js` file, which is used to create 16 | * custom block variations. 17 | * 18 | * @since 1.0.0 19 | */ 20 | function themeslug_enqueue_block_variations() { 21 | wp_enqueue_script( 22 | 'themeslug-block-variations', 23 | get_theme_file_uri( 'assets/js/block-variations.js' ), 24 | array( 25 | 'wp-blocks', 26 | 'wp-dom-ready', 27 | 'wp-i18n' 28 | ), 29 | wp_get_theme()->get( 'Version' ), 30 | true 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /example-block-variation/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-block-variation/screenshot.png -------------------------------------------------------------------------------- /example-block-variation/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Example - Block Variation 3 | * Description: A child theme that registers a custom block variation. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: example-block-variation 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | -------------------------------------------------------------------------------- /example-build-process/LICENSE.md: -------------------------------------------------------------------------------- 1 | # GNU GENERAL PUBLIC LICENSE 2 | 3 | Version 2, June 1991 4 | 5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 7 | 8 | Everyone is permitted to copy and distribute verbatim copies 9 | of this license document, but changing it is not allowed. 10 | 11 | ## Preamble 12 | 13 | The licenses for most software are designed to take away your freedom 14 | to share and change it. By contrast, the GNU General Public License is 15 | intended to guarantee your freedom to share and change free 16 | software--to make sure the software is free for all its users. This 17 | General Public License applies to most of the Free Software 18 | Foundation's software and to any other program whose authors commit to 19 | using it. (Some other Free Software Foundation software is covered by 20 | the GNU Lesser General Public License instead.) You can apply it to 21 | your programs, too. 22 | 23 | When we speak of free software, we are referring to freedom, not 24 | price. Our General Public Licenses are designed to make sure that you 25 | have the freedom to distribute copies of free software (and charge for 26 | this service if you wish), that you receive source code or can get it 27 | if you want it, that you can change the software or use pieces of it 28 | in new free programs; and that you know you can do these things. 29 | 30 | To protect your rights, we need to make restrictions that forbid 31 | anyone to deny you these rights or to ask you to surrender the rights. 32 | These restrictions translate to certain responsibilities for you if 33 | you distribute copies of the software, or if you modify it. 34 | 35 | For example, if you distribute copies of such a program, whether 36 | gratis or for a fee, you must give the recipients all the rights that 37 | you have. You must make sure that they, too, receive or can get the 38 | source code. And you must show them these terms so they know their 39 | rights. 40 | 41 | We protect your rights with two steps: (1) copyright the software, and 42 | (2) offer you this license which gives you legal permission to copy, 43 | distribute and/or modify the software. 44 | 45 | Also, for each author's protection and ours, we want to make certain 46 | that everyone understands that there is no warranty for this free 47 | software. If the software is modified by someone else and passed on, 48 | we want its recipients to know that what they have is not the 49 | original, so that any problems introduced by others will not reflect 50 | on the original authors' reputations. 51 | 52 | Finally, any free program is threatened constantly by software 53 | patents. We wish to avoid the danger that redistributors of a free 54 | program will individually obtain patent licenses, in effect making the 55 | program proprietary. To prevent this, we have made it clear that any 56 | patent must be licensed for everyone's free use or not licensed at 57 | all. 58 | 59 | The precise terms and conditions for copying, distribution and 60 | modification follow. 61 | 62 | ## TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 63 | 64 | **0.** This License applies to any program or other work which 65 | contains a notice placed by the copyright holder saying it may be 66 | distributed under the terms of this General Public License. The 67 | "Program", below, refers to any such program or work, and a "work 68 | based on the Program" means either the Program or any derivative work 69 | under copyright law: that is to say, a work containing the Program or 70 | a portion of it, either verbatim or with modifications and/or 71 | translated into another language. (Hereinafter, translation is 72 | included without limitation in the term "modification".) Each licensee 73 | is addressed as "you". 74 | 75 | Activities other than copying, distribution and modification are not 76 | covered by this License; they are outside its scope. The act of 77 | running the Program is not restricted, and the output from the Program 78 | is covered only if its contents constitute a work based on the Program 79 | (independent of having been made by running the Program). Whether that 80 | is true depends on what the Program does. 81 | 82 | **1.** You may copy and distribute verbatim copies of the Program's 83 | source code as you receive it, in any medium, provided that you 84 | conspicuously and appropriately publish on each copy an appropriate 85 | copyright notice and disclaimer of warranty; keep intact all the 86 | notices that refer to this License and to the absence of any warranty; 87 | and give any other recipients of the Program a copy of this License 88 | along with the Program. 89 | 90 | You may charge a fee for the physical act of transferring a copy, and 91 | you may at your option offer warranty protection in exchange for a 92 | fee. 93 | 94 | **2.** You may modify your copy or copies of the Program or any 95 | portion of it, thus forming a work based on the Program, and copy and 96 | distribute such modifications or work under the terms of Section 1 97 | above, provided that you also meet all of these conditions: 98 | 99 | 100 | **a)** You must cause the modified files to carry prominent notices 101 | stating that you changed the files and the date of any change. 102 | 103 | 104 | **b)** You must cause any work that you distribute or publish, that in 105 | whole or in part contains or is derived from the Program or any part 106 | thereof, to be licensed as a whole at no charge to all third parties 107 | under the terms of this License. 108 | 109 | 110 | **c)** If the modified program normally reads commands interactively 111 | when run, you must cause it, when started running for such interactive 112 | use in the most ordinary way, to print or display an announcement 113 | including an appropriate copyright notice and a notice that there is 114 | no warranty (or else, saying that you provide a warranty) and that 115 | users may redistribute the program under these conditions, and telling 116 | the user how to view a copy of this License. (Exception: if the 117 | Program itself is interactive but does not normally print such an 118 | announcement, your work based on the Program is not required to print 119 | an announcement.) 120 | 121 | These requirements apply to the modified work as a whole. If 122 | identifiable sections of that work are not derived from the Program, 123 | and can be reasonably considered independent and separate works in 124 | themselves, then this License, and its terms, do not apply to those 125 | sections when you distribute them as separate works. But when you 126 | distribute the same sections as part of a whole which is a work based 127 | on the Program, the distribution of the whole must be on the terms of 128 | this License, whose permissions for other licensees extend to the 129 | entire whole, and thus to each and every part regardless of who wrote 130 | it. 131 | 132 | Thus, it is not the intent of this section to claim rights or contest 133 | your rights to work written entirely by you; rather, the intent is to 134 | exercise the right to control the distribution of derivative or 135 | collective works based on the Program. 136 | 137 | In addition, mere aggregation of another work not based on the Program 138 | with the Program (or with a work based on the Program) on a volume of 139 | a storage or distribution medium does not bring the other work under 140 | the scope of this License. 141 | 142 | **3.** You may copy and distribute the Program (or a work based on it, 143 | under Section 2) in object code or executable form under the terms of 144 | Sections 1 and 2 above provided that you also do one of the following: 145 | 146 | 147 | **a)** Accompany it with the complete corresponding machine-readable 148 | source code, which must be distributed under the terms of Sections 1 149 | and 2 above on a medium customarily used for software interchange; or, 150 | 151 | 152 | **b)** Accompany it with a written offer, valid for at least three 153 | years, to give any third party, for a charge no more than your cost of 154 | physically performing source distribution, a complete machine-readable 155 | copy of the corresponding source code, to be distributed under the 156 | terms of Sections 1 and 2 above on a medium customarily used for 157 | software interchange; or, 158 | 159 | 160 | **c)** Accompany it with the information you received as to the offer 161 | to distribute corresponding source code. (This alternative is allowed 162 | only for noncommercial distribution and only if you received the 163 | program in object code or executable form with such an offer, in 164 | accord with Subsection b above.) 165 | 166 | The source code for a work means the preferred form of the work for 167 | making modifications to it. For an executable work, complete source 168 | code means all the source code for all modules it contains, plus any 169 | associated interface definition files, plus the scripts used to 170 | control compilation and installation of the executable. However, as a 171 | special exception, the source code distributed need not include 172 | anything that is normally distributed (in either source or binary 173 | form) with the major components (compiler, kernel, and so on) of the 174 | operating system on which the executable runs, unless that component 175 | itself accompanies the executable. 176 | 177 | If distribution of executable or object code is made by offering 178 | access to copy from a designated place, then offering equivalent 179 | access to copy the source code from the same place counts as 180 | distribution of the source code, even though third parties are not 181 | compelled to copy the source along with the object code. 182 | 183 | **4.** You may not copy, modify, sublicense, or distribute the Program 184 | except as expressly provided under this License. Any attempt otherwise 185 | to copy, modify, sublicense or distribute the Program is void, and 186 | will automatically terminate your rights under this License. However, 187 | parties who have received copies, or rights, from you under this 188 | License will not have their licenses terminated so long as such 189 | parties remain in full compliance. 190 | 191 | **5.** You are not required to accept this License, since you have not 192 | signed it. However, nothing else grants you permission to modify or 193 | distribute the Program or its derivative works. These actions are 194 | prohibited by law if you do not accept this License. Therefore, by 195 | modifying or distributing the Program (or any work based on the 196 | Program), you indicate your acceptance of this License to do so, and 197 | all its terms and conditions for copying, distributing or modifying 198 | the Program or works based on it. 199 | 200 | **6.** Each time you redistribute the Program (or any work based on 201 | the Program), the recipient automatically receives a license from the 202 | original licensor to copy, distribute or modify the Program subject to 203 | these terms and conditions. You may not impose any further 204 | restrictions on the recipients' exercise of the rights granted herein. 205 | You are not responsible for enforcing compliance by third parties to 206 | this License. 207 | 208 | **7.** If, as a consequence of a court judgment or allegation of 209 | patent infringement or for any other reason (not limited to patent 210 | issues), conditions are imposed on you (whether by court order, 211 | agreement or otherwise) that contradict the conditions of this 212 | License, they do not excuse you from the conditions of this License. 213 | If you cannot distribute so as to satisfy simultaneously your 214 | obligations under this License and any other pertinent obligations, 215 | then as a consequence you may not distribute the Program at all. For 216 | example, if a patent license would not permit royalty-free 217 | redistribution of the Program by all those who receive copies directly 218 | or indirectly through you, then the only way you could satisfy both it 219 | and this License would be to refrain entirely from distribution of the 220 | Program. 221 | 222 | If any portion of this section is held invalid or unenforceable under 223 | any particular circumstance, the balance of the section is intended to 224 | apply and the section as a whole is intended to apply in other 225 | circumstances. 226 | 227 | It is not the purpose of this section to induce you to infringe any 228 | patents or other property right claims or to contest validity of any 229 | such claims; this section has the sole purpose of protecting the 230 | integrity of the free software distribution system, which is 231 | implemented by public license practices. Many people have made 232 | generous contributions to the wide range of software distributed 233 | through that system in reliance on consistent application of that 234 | system; it is up to the author/donor to decide if he or she is willing 235 | to distribute software through any other system and a licensee cannot 236 | impose that choice. 237 | 238 | This section is intended to make thoroughly clear what is believed to 239 | be a consequence of the rest of this License. 240 | 241 | **8.** If the distribution and/or use of the Program is restricted in 242 | certain countries either by patents or by copyrighted interfaces, the 243 | original copyright holder who places the Program under this License 244 | may add an explicit geographical distribution limitation excluding 245 | those countries, so that distribution is permitted only in or among 246 | countries not thus excluded. In such case, this License incorporates 247 | the limitation as if written in the body of this License. 248 | 249 | **9.** The Free Software Foundation may publish revised and/or new 250 | versions of the General Public License from time to time. Such new 251 | versions will be similar in spirit to the present version, but may 252 | differ in detail to address new problems or concerns. 253 | 254 | Each version is given a distinguishing version number. If the Program 255 | specifies a version number of this License which applies to it and 256 | "any later version", you have the option of following the terms and 257 | conditions either of that version or of any later version published by 258 | the Free Software Foundation. If the Program does not specify a 259 | version number of this License, you may choose any version ever 260 | published by the Free Software Foundation. 261 | 262 | **10.** If you wish to incorporate parts of the Program into other 263 | free programs whose distribution conditions are different, write to 264 | the author to ask for permission. For software which is copyrighted by 265 | the Free Software Foundation, write to the Free Software Foundation; 266 | we sometimes make exceptions for this. Our decision will be guided by 267 | the two goals of preserving the free status of all derivatives of our 268 | free software and of promoting the sharing and reuse of software 269 | generally. 270 | 271 | **NO WARRANTY** 272 | 273 | **11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO 274 | WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 275 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 276 | OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY 277 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 278 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 279 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 280 | PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME 281 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 282 | 283 | **12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 284 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 285 | AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU 286 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 287 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 288 | PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 289 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 290 | FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF 291 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 292 | DAMAGES. 293 | 294 | END OF TERMS AND CONDITIONS 295 | 296 | ## How to Apply These Terms to Your New Programs 297 | 298 | If you develop a new program, and you want it to be of the greatest 299 | possible use to the public, the best way to achieve this is to make it 300 | free software which everyone can redistribute and change under these 301 | terms. 302 | 303 | To do so, attach the following notices to the program. It is safest to 304 | attach them to the start of each source file to most effectively 305 | convey the exclusion of warranty; and each file should have at least 306 | the "copyright" line and a pointer to where the full notice is found. 307 | 308 | one line to give the program's name and an idea of what it does. 309 | Copyright (C) yyyy name of author 310 | 311 | This program is free software; you can redistribute it and/or 312 | modify it under the terms of the GNU General Public License 313 | as published by the Free Software Foundation; either version 2 314 | of the License, or (at your option) any later version. 315 | 316 | This program is distributed in the hope that it will be useful, 317 | but WITHOUT ANY WARRANTY; without even the implied warranty of 318 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 319 | GNU General Public License for more details. 320 | 321 | You should have received a copy of the GNU General Public License 322 | along with this program; if not, write to the Free Software 323 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 324 | 325 | Also add information on how to contact you by electronic and paper 326 | mail. 327 | 328 | If the program is interactive, make it output a short notice like this 329 | when it starts in an interactive mode: 330 | 331 | Gnomovision version 69, Copyright (C) year name of author 332 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details 333 | type `show w'. This is free software, and you are welcome 334 | to redistribute it under certain conditions; type `show c' 335 | for details. 336 | 337 | The hypothetical commands \`show w' and \`show c' should show the 338 | appropriate parts of the General Public License. Of course, the 339 | commands you use may be called something other than \`show w' and 340 | \`show c'; they could even be mouse-clicks or menu items--whatever 341 | suits your program. 342 | 343 | You should also get your employer (if you work as a programmer) or 344 | your school, if any, to sign a "copyright disclaimer" for the program, 345 | if necessary. Here is a sample; alter the names: 346 | 347 | Yoyodyne, Inc., hereby disclaims all copyright 348 | interest in the program `Gnomovision' 349 | (which makes passes at compilers) written 350 | by James Hacker. 351 | 352 | signature of Ty Coon, 1 April 1989 353 | Ty Coon, President of Vice 354 | 355 | This General Public License does not permit incorporating your program 356 | into proprietary programs. If your program is a subroutine library, 357 | you may consider it more useful to permit linking proprietary 358 | applications with the library. If this is what you want to do, use the 359 | [GNU Lesser General Public 360 | License](https://www.gnu.org/licenses/lgpl.html) instead of this 361 | License. 362 | -------------------------------------------------------------------------------- /example-build-process/README.md: -------------------------------------------------------------------------------- 1 | # Example: Build Process 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | ----------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-build-process) | example-build-process | BLOCK THEME, JAVASCRIPT | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-build-process.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-build-process.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 8 | 9 | 10 | This is an example child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to show how to integrate the [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) package with a theme to provide a core-supported webpack build process. For a deeper dive into how this works, read the [Beyond block styles, part 1: using the WordPress scripts package with themes](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/) tutorial on the WordPress Developer Blog. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme does not add any custom CSS or JavaScript, but it does provide a basic setup of files for the editor and front end with empty CSS and JS files. The goal is to give you the foundation necessary to get up and running quickly. 17 | 18 | To test this example, you must have [Node.js and npm installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) on your local machine. 19 | 20 | The code in this example uses several folders and files that you will need to review: 21 | 22 | - `functions.php`: Enqueues the JS and CSS files for the editor and front end. 23 | - `package.json`: Sets up the command line scripts and defines development dependencies. 24 | - `public`: The build folder where JS and CSS files are placed after being built/processed. 25 | - `resources` 26 | - `js` 27 | - `editor.js`: File for adding editor JS. 28 | - `scss` 29 | - `editor.scss`: File for adding editor UI CSS. 30 | - `screen.scss`: File for adding front-end CSS. 31 | 32 | There are many `@wordpress/scripts` commands that you can add to `package.json`, but this project uses the primary two: 33 | 34 | - `npm run start`: Watch and build process for development. 35 | - `npm run build`: Builds files for production. 36 | 37 | -------------------------------------------------------------------------------- /example-build-process/functions.php: -------------------------------------------------------------------------------- 1 | 7 | * @copyright Copyright (c) 2023, Your Name 8 | * @link https://yourwebsite.tld 9 | * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html 10 | */ 11 | 12 | add_action( 'wp_enqueue_scripts', 'themeslug_assets' ); 13 | 14 | /** 15 | * Enqueues assets on the front end of the site. 16 | * 17 | * @since 1.0.0 18 | * @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/ 19 | */ 20 | function themeslug_assets() { 21 | $asset = include get_theme_file_path( 'public/css/screen.asset.php' ); 22 | 23 | wp_enqueue_style( 24 | 'themeslug-style', 25 | get_theme_file_uri( 'public/css/screen.css' ), 26 | $asset['dependencies'], 27 | $asset['version'] 28 | ); 29 | } 30 | 31 | add_action( 'after_setup_theme', 'themeslug_editor_styles' ); 32 | 33 | /** 34 | * Adds editor content styles. 35 | * 36 | * @since 1.0.0 37 | * @link https://developer.wordpress.org/reference/functions/add_editor_style/ 38 | */ 39 | function themeslug_editor_styles() { 40 | add_editor_style( [ 41 | get_theme_file_uri( 'public/css/screen.css' ) 42 | ] ); 43 | } 44 | 45 | add_action( 'enqueue_block_editor_assets', 'themeslug_editor_assets' ); 46 | 47 | /** 48 | * Enqueues assets for the editor UI. 49 | * 50 | * @since 1.0.0 51 | */ 52 | function themeslug_editor_assets() { 53 | $script_asset = include get_theme_file_path( 'public/js/editor.asset.php' ); 54 | $style_asset = include get_theme_file_path( 'public/css/editor.asset.php' ); 55 | 56 | wp_enqueue_script( 57 | 'themeslug-editor', 58 | get_theme_file_uri( 'public/js/editor.js' ), 59 | $script_asset['dependencies'], 60 | $script_asset['version'], 61 | true 62 | ); 63 | 64 | wp_enqueue_style( 65 | 'themeslug-editor', 66 | get_theme_file_uri( 'public/css/editor.css' ), 67 | $style_asset['dependencies'], 68 | $style_asset['version'] 69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /example-build-process/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "your-project-name", 3 | "scripts": { 4 | "start": "wp-scripts start --webpack-src-dir=resources --output-path=public", 5 | "build": "wp-scripts build --webpack-src-dir=resources --output-path=public" 6 | }, 7 | "dependencies": { 8 | "@wordpress/scripts": "^26.16.0", 9 | "path": "^0.12.7", 10 | "webpack-remove-empty-scripts": "^1.0.4" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /example-build-process/public/css/editor.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '8c5b220bf6f482881a90'); 2 | -------------------------------------------------------------------------------- /example-build-process/public/css/editor.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example-build-process/public/css/screen.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '8c5b220bf6f482881a90'); 2 | -------------------------------------------------------------------------------- /example-build-process/public/css/screen.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example-build-process/public/js/editor.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '31d6cfe0d16ae931b73c'); 2 | -------------------------------------------------------------------------------- /example-build-process/public/js/editor.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-build-process/public/js/editor.js -------------------------------------------------------------------------------- /example-build-process/resources/js/editor.js: -------------------------------------------------------------------------------- 1 | // Use this file to add custom JavaScript for the editor. 2 | -------------------------------------------------------------------------------- /example-build-process/resources/scss/editor.scss: -------------------------------------------------------------------------------- 1 | // Use this file to add custom CSS for the editor. 2 | -------------------------------------------------------------------------------- /example-build-process/resources/scss/screen.scss: -------------------------------------------------------------------------------- 1 | // Use this file to add custom CSS for the front-end. 2 | -------------------------------------------------------------------------------- /example-build-process/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-build-process/screenshot.png -------------------------------------------------------------------------------- /example-build-process/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Example - Build Process 3 | * Description: A child theme with an example of a CSS and JS build process. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: example-build-process 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | -------------------------------------------------------------------------------- /example-build-process/webpack.config.js: -------------------------------------------------------------------------------- 1 | // WordPress webpack config. 2 | const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); 3 | 4 | // Plugins. 5 | const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' ); 6 | 7 | // Utilities. 8 | const path = require( 'path' ); 9 | 10 | // Add any a new entry point by extending the webpack config. 11 | module.exports = { 12 | ...defaultConfig, 13 | ...{ 14 | entry: { 15 | 'js/editor': path.resolve( process.cwd(), 'resources/js', 'editor.js' ), 16 | 'css/screen': path.resolve( process.cwd(), 'resources/scss', 'screen.scss' ), 17 | 'css/editor': path.resolve( process.cwd(), 'resources/scss', 'editor.scss' ), 18 | }, 19 | plugins: [ 20 | // Include WP's plugin config. 21 | ...defaultConfig.plugins, 22 | 23 | // Removes the empty `.js` files generated by webpack but 24 | // sets it after WP has generated its `*.asset.php` file. 25 | new RemoveEmptyScriptsPlugin( { 26 | stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS 27 | } ) 28 | ] 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /example-locked-pattern/LICENSE.md: -------------------------------------------------------------------------------- 1 | # GNU GENERAL PUBLIC LICENSE 2 | 3 | Version 2, June 1991 4 | 5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 7 | 8 | Everyone is permitted to copy and distribute verbatim copies 9 | of this license document, but changing it is not allowed. 10 | 11 | ## Preamble 12 | 13 | The licenses for most software are designed to take away your freedom 14 | to share and change it. By contrast, the GNU General Public License is 15 | intended to guarantee your freedom to share and change free 16 | software--to make sure the software is free for all its users. This 17 | General Public License applies to most of the Free Software 18 | Foundation's software and to any other program whose authors commit to 19 | using it. (Some other Free Software Foundation software is covered by 20 | the GNU Lesser General Public License instead.) You can apply it to 21 | your programs, too. 22 | 23 | When we speak of free software, we are referring to freedom, not 24 | price. Our General Public Licenses are designed to make sure that you 25 | have the freedom to distribute copies of free software (and charge for 26 | this service if you wish), that you receive source code or can get it 27 | if you want it, that you can change the software or use pieces of it 28 | in new free programs; and that you know you can do these things. 29 | 30 | To protect your rights, we need to make restrictions that forbid 31 | anyone to deny you these rights or to ask you to surrender the rights. 32 | These restrictions translate to certain responsibilities for you if 33 | you distribute copies of the software, or if you modify it. 34 | 35 | For example, if you distribute copies of such a program, whether 36 | gratis or for a fee, you must give the recipients all the rights that 37 | you have. You must make sure that they, too, receive or can get the 38 | source code. And you must show them these terms so they know their 39 | rights. 40 | 41 | We protect your rights with two steps: (1) copyright the software, and 42 | (2) offer you this license which gives you legal permission to copy, 43 | distribute and/or modify the software. 44 | 45 | Also, for each author's protection and ours, we want to make certain 46 | that everyone understands that there is no warranty for this free 47 | software. If the software is modified by someone else and passed on, 48 | we want its recipients to know that what they have is not the 49 | original, so that any problems introduced by others will not reflect 50 | on the original authors' reputations. 51 | 52 | Finally, any free program is threatened constantly by software 53 | patents. We wish to avoid the danger that redistributors of a free 54 | program will individually obtain patent licenses, in effect making the 55 | program proprietary. To prevent this, we have made it clear that any 56 | patent must be licensed for everyone's free use or not licensed at 57 | all. 58 | 59 | The precise terms and conditions for copying, distribution and 60 | modification follow. 61 | 62 | ## TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 63 | 64 | **0.** This License applies to any program or other work which 65 | contains a notice placed by the copyright holder saying it may be 66 | distributed under the terms of this General Public License. The 67 | "Program", below, refers to any such program or work, and a "work 68 | based on the Program" means either the Program or any derivative work 69 | under copyright law: that is to say, a work containing the Program or 70 | a portion of it, either verbatim or with modifications and/or 71 | translated into another language. (Hereinafter, translation is 72 | included without limitation in the term "modification".) Each licensee 73 | is addressed as "you". 74 | 75 | Activities other than copying, distribution and modification are not 76 | covered by this License; they are outside its scope. The act of 77 | running the Program is not restricted, and the output from the Program 78 | is covered only if its contents constitute a work based on the Program 79 | (independent of having been made by running the Program). Whether that 80 | is true depends on what the Program does. 81 | 82 | **1.** You may copy and distribute verbatim copies of the Program's 83 | source code as you receive it, in any medium, provided that you 84 | conspicuously and appropriately publish on each copy an appropriate 85 | copyright notice and disclaimer of warranty; keep intact all the 86 | notices that refer to this License and to the absence of any warranty; 87 | and give any other recipients of the Program a copy of this License 88 | along with the Program. 89 | 90 | You may charge a fee for the physical act of transferring a copy, and 91 | you may at your option offer warranty protection in exchange for a 92 | fee. 93 | 94 | **2.** You may modify your copy or copies of the Program or any 95 | portion of it, thus forming a work based on the Program, and copy and 96 | distribute such modifications or work under the terms of Section 1 97 | above, provided that you also meet all of these conditions: 98 | 99 | 100 | **a)** You must cause the modified files to carry prominent notices 101 | stating that you changed the files and the date of any change. 102 | 103 | 104 | **b)** You must cause any work that you distribute or publish, that in 105 | whole or in part contains or is derived from the Program or any part 106 | thereof, to be licensed as a whole at no charge to all third parties 107 | under the terms of this License. 108 | 109 | 110 | **c)** If the modified program normally reads commands interactively 111 | when run, you must cause it, when started running for such interactive 112 | use in the most ordinary way, to print or display an announcement 113 | including an appropriate copyright notice and a notice that there is 114 | no warranty (or else, saying that you provide a warranty) and that 115 | users may redistribute the program under these conditions, and telling 116 | the user how to view a copy of this License. (Exception: if the 117 | Program itself is interactive but does not normally print such an 118 | announcement, your work based on the Program is not required to print 119 | an announcement.) 120 | 121 | These requirements apply to the modified work as a whole. If 122 | identifiable sections of that work are not derived from the Program, 123 | and can be reasonably considered independent and separate works in 124 | themselves, then this License, and its terms, do not apply to those 125 | sections when you distribute them as separate works. But when you 126 | distribute the same sections as part of a whole which is a work based 127 | on the Program, the distribution of the whole must be on the terms of 128 | this License, whose permissions for other licensees extend to the 129 | entire whole, and thus to each and every part regardless of who wrote 130 | it. 131 | 132 | Thus, it is not the intent of this section to claim rights or contest 133 | your rights to work written entirely by you; rather, the intent is to 134 | exercise the right to control the distribution of derivative or 135 | collective works based on the Program. 136 | 137 | In addition, mere aggregation of another work not based on the Program 138 | with the Program (or with a work based on the Program) on a volume of 139 | a storage or distribution medium does not bring the other work under 140 | the scope of this License. 141 | 142 | **3.** You may copy and distribute the Program (or a work based on it, 143 | under Section 2) in object code or executable form under the terms of 144 | Sections 1 and 2 above provided that you also do one of the following: 145 | 146 | 147 | **a)** Accompany it with the complete corresponding machine-readable 148 | source code, which must be distributed under the terms of Sections 1 149 | and 2 above on a medium customarily used for software interchange; or, 150 | 151 | 152 | **b)** Accompany it with a written offer, valid for at least three 153 | years, to give any third party, for a charge no more than your cost of 154 | physically performing source distribution, a complete machine-readable 155 | copy of the corresponding source code, to be distributed under the 156 | terms of Sections 1 and 2 above on a medium customarily used for 157 | software interchange; or, 158 | 159 | 160 | **c)** Accompany it with the information you received as to the offer 161 | to distribute corresponding source code. (This alternative is allowed 162 | only for noncommercial distribution and only if you received the 163 | program in object code or executable form with such an offer, in 164 | accord with Subsection b above.) 165 | 166 | The source code for a work means the preferred form of the work for 167 | making modifications to it. For an executable work, complete source 168 | code means all the source code for all modules it contains, plus any 169 | associated interface definition files, plus the scripts used to 170 | control compilation and installation of the executable. However, as a 171 | special exception, the source code distributed need not include 172 | anything that is normally distributed (in either source or binary 173 | form) with the major components (compiler, kernel, and so on) of the 174 | operating system on which the executable runs, unless that component 175 | itself accompanies the executable. 176 | 177 | If distribution of executable or object code is made by offering 178 | access to copy from a designated place, then offering equivalent 179 | access to copy the source code from the same place counts as 180 | distribution of the source code, even though third parties are not 181 | compelled to copy the source along with the object code. 182 | 183 | **4.** You may not copy, modify, sublicense, or distribute the Program 184 | except as expressly provided under this License. Any attempt otherwise 185 | to copy, modify, sublicense or distribute the Program is void, and 186 | will automatically terminate your rights under this License. However, 187 | parties who have received copies, or rights, from you under this 188 | License will not have their licenses terminated so long as such 189 | parties remain in full compliance. 190 | 191 | **5.** You are not required to accept this License, since you have not 192 | signed it. However, nothing else grants you permission to modify or 193 | distribute the Program or its derivative works. These actions are 194 | prohibited by law if you do not accept this License. Therefore, by 195 | modifying or distributing the Program (or any work based on the 196 | Program), you indicate your acceptance of this License to do so, and 197 | all its terms and conditions for copying, distributing or modifying 198 | the Program or works based on it. 199 | 200 | **6.** Each time you redistribute the Program (or any work based on 201 | the Program), the recipient automatically receives a license from the 202 | original licensor to copy, distribute or modify the Program subject to 203 | these terms and conditions. You may not impose any further 204 | restrictions on the recipients' exercise of the rights granted herein. 205 | You are not responsible for enforcing compliance by third parties to 206 | this License. 207 | 208 | **7.** If, as a consequence of a court judgment or allegation of 209 | patent infringement or for any other reason (not limited to patent 210 | issues), conditions are imposed on you (whether by court order, 211 | agreement or otherwise) that contradict the conditions of this 212 | License, they do not excuse you from the conditions of this License. 213 | If you cannot distribute so as to satisfy simultaneously your 214 | obligations under this License and any other pertinent obligations, 215 | then as a consequence you may not distribute the Program at all. For 216 | example, if a patent license would not permit royalty-free 217 | redistribution of the Program by all those who receive copies directly 218 | or indirectly through you, then the only way you could satisfy both it 219 | and this License would be to refrain entirely from distribution of the 220 | Program. 221 | 222 | If any portion of this section is held invalid or unenforceable under 223 | any particular circumstance, the balance of the section is intended to 224 | apply and the section as a whole is intended to apply in other 225 | circumstances. 226 | 227 | It is not the purpose of this section to induce you to infringe any 228 | patents or other property right claims or to contest validity of any 229 | such claims; this section has the sole purpose of protecting the 230 | integrity of the free software distribution system, which is 231 | implemented by public license practices. Many people have made 232 | generous contributions to the wide range of software distributed 233 | through that system in reliance on consistent application of that 234 | system; it is up to the author/donor to decide if he or she is willing 235 | to distribute software through any other system and a licensee cannot 236 | impose that choice. 237 | 238 | This section is intended to make thoroughly clear what is believed to 239 | be a consequence of the rest of this License. 240 | 241 | **8.** If the distribution and/or use of the Program is restricted in 242 | certain countries either by patents or by copyrighted interfaces, the 243 | original copyright holder who places the Program under this License 244 | may add an explicit geographical distribution limitation excluding 245 | those countries, so that distribution is permitted only in or among 246 | countries not thus excluded. In such case, this License incorporates 247 | the limitation as if written in the body of this License. 248 | 249 | **9.** The Free Software Foundation may publish revised and/or new 250 | versions of the General Public License from time to time. Such new 251 | versions will be similar in spirit to the present version, but may 252 | differ in detail to address new problems or concerns. 253 | 254 | Each version is given a distinguishing version number. If the Program 255 | specifies a version number of this License which applies to it and 256 | "any later version", you have the option of following the terms and 257 | conditions either of that version or of any later version published by 258 | the Free Software Foundation. If the Program does not specify a 259 | version number of this License, you may choose any version ever 260 | published by the Free Software Foundation. 261 | 262 | **10.** If you wish to incorporate parts of the Program into other 263 | free programs whose distribution conditions are different, write to 264 | the author to ask for permission. For software which is copyrighted by 265 | the Free Software Foundation, write to the Free Software Foundation; 266 | we sometimes make exceptions for this. Our decision will be guided by 267 | the two goals of preserving the free status of all derivatives of our 268 | free software and of promoting the sharing and reuse of software 269 | generally. 270 | 271 | **NO WARRANTY** 272 | 273 | **11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO 274 | WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 275 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 276 | OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY 277 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 278 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 279 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 280 | PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME 281 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 282 | 283 | **12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 284 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 285 | AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU 286 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 287 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 288 | PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 289 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 290 | FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF 291 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 292 | DAMAGES. 293 | 294 | END OF TERMS AND CONDITIONS 295 | 296 | ## How to Apply These Terms to Your New Programs 297 | 298 | If you develop a new program, and you want it to be of the greatest 299 | possible use to the public, the best way to achieve this is to make it 300 | free software which everyone can redistribute and change under these 301 | terms. 302 | 303 | To do so, attach the following notices to the program. It is safest to 304 | attach them to the start of each source file to most effectively 305 | convey the exclusion of warranty; and each file should have at least 306 | the "copyright" line and a pointer to where the full notice is found. 307 | 308 | one line to give the program's name and an idea of what it does. 309 | Copyright (C) yyyy name of author 310 | 311 | This program is free software; you can redistribute it and/or 312 | modify it under the terms of the GNU General Public License 313 | as published by the Free Software Foundation; either version 2 314 | of the License, or (at your option) any later version. 315 | 316 | This program is distributed in the hope that it will be useful, 317 | but WITHOUT ANY WARRANTY; without even the implied warranty of 318 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 319 | GNU General Public License for more details. 320 | 321 | You should have received a copy of the GNU General Public License 322 | along with this program; if not, write to the Free Software 323 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 324 | 325 | Also add information on how to contact you by electronic and paper 326 | mail. 327 | 328 | If the program is interactive, make it output a short notice like this 329 | when it starts in an interactive mode: 330 | 331 | Gnomovision version 69, Copyright (C) year name of author 332 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details 333 | type `show w'. This is free software, and you are welcome 334 | to redistribute it under certain conditions; type `show c' 335 | for details. 336 | 337 | The hypothetical commands \`show w' and \`show c' should show the 338 | appropriate parts of the General Public License. Of course, the 339 | commands you use may be called something other than \`show w' and 340 | \`show c'; they could even be mouse-clicks or menu items--whatever 341 | suits your program. 342 | 343 | You should also get your employer (if you work as a programmer) or 344 | your school, if any, to sign a "copyright disclaimer" for the program, 345 | if necessary. Here is a sample; alter the names: 346 | 347 | Yoyodyne, Inc., hereby disclaims all copyright 348 | interest in the program `Gnomovision' 349 | (which makes passes at compilers) written 350 | by James Hacker. 351 | 352 | signature of Ty Coon, 1 April 1989 353 | Ty Coon, President of Vice 354 | 355 | This General Public License does not permit incorporating your program 356 | into proprietary programs. If your program is a subroutine library, 357 | you may consider it more useful to permit linking proprietary 358 | applications with the library. If this is what you want to do, use the 359 | [GNU Lesser General Public 360 | License](https://www.gnu.org/licenses/lgpl.html) instead of this 361 | License. 362 | -------------------------------------------------------------------------------- /example-locked-pattern/README.md: -------------------------------------------------------------------------------- 1 | # Example: Locked Pattern 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | ------------------------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-locked-pattern) | example-locked-pattern | BLOCK THEME, CURATION | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-locked-pattern.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-locked-pattern.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 8 | 9 | 10 | This is a child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase an example of a block pattern that utilizes template locking to only allow the user to edit block content but not edit block settings or styles. To read more about this feature, see the [Locking APIs](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/#locking-apis) section of the Curation documentation in the Block Editor Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a custom block pattern named `Custom Event (Locked)`. The only file with code relevant to this example is: 17 | 18 | - `parts/custom-event.php`: Registers a custom pattern. 19 | 20 | Within that file, the outer wrapping block has its `templateLock` attribute set to `contentOnly`, which locks the pattern. 21 | -------------------------------------------------------------------------------- /example-locked-pattern/patterns/custom-event.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 | 15 |
16 | Image of a woman being carried through the air by swans. 17 |
18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 |

Location:
82 Main St. Brooklyn, NY

26 | 27 |
28 | 29 | 30 | 31 |
32 | 33 |

Date:
October 24, 2021

34 | 35 |
36 | 37 | 38 | 39 |
40 | 41 |
42 | 43 |
44 | Purchase Tickets 45 |
46 | 47 |
48 | 49 |
50 | 51 | 52 |
53 | 54 | 55 |
56 | 57 | -------------------------------------------------------------------------------- /example-locked-pattern/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-locked-pattern/screenshot.png -------------------------------------------------------------------------------- /example-locked-pattern/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Example - Locked Pattern 3 | * Description: A child theme with an of a "content" locked pattern. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: example-locked-pattern 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | -------------------------------------------------------------------------------- /example-template-part-area/README.md: -------------------------------------------------------------------------------- 1 | # Example: Template Part Area 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | ---------------------------------------------------------------------------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/example-template-part-area) | example-template-part-area | BLOCK THEME, PHP | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-template-part-area.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-template-part-area.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 8 | 9 | 10 | This is an example child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase an example of registering and using a custom template part area. For more information on this feature, read the [Template Parts](https://developer.wordpress.org/themes/templates/template-parts/) documentation in the Theme Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a custom template part area named Sidebar via `functions.php`. It then assigns the `parts/sidebar.html` template part to that area via `theme.json`. 17 | 18 | The code in this example requires a few files to achieve the effect: 19 | 20 | - `functions.php`: Registers the custom template part area. 21 | - `theme.json`: Assigns the area for the sidebar template part. 22 | - `parts/sidebar.html`: Adds the sidebar template part. 23 | 24 | **Note:** To get this example to work withing a child theme, it required copying the entirety of the `/parts` folder from Twenty Twenty-Four and overwriting the `templateParts` property in `theme.json`. But the primary code for actually registering template part areas is in `functions.php`. 25 | -------------------------------------------------------------------------------- /example-template-part-area/functions.php: -------------------------------------------------------------------------------- 1 | 7 | * @copyright Copyright (c) 2023, Your Name 8 | * @link https://yourwebsite.tld 9 | * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html 10 | */ 11 | 12 | add_filter( 'default_wp_template_part_areas', 'themeslug_template_part_areas' ); 13 | 14 | /** 15 | * Filters the core template part areas to add custom areas. 16 | * 17 | * @since 1.0.0 18 | * @link https://developer.wordpress.org/reference/hooks/default_wp_template_part_areas/ 19 | */ 20 | function themeslug_template_part_areas( $default_area_definitions ) { 21 | 22 | $default_area_definitions[] = array( 23 | 'area' => 'sidebar', 24 | 'area_tag' => 'div', 25 | 'label' => __( 'Sidebar', 'example-template-part-area' ), 26 | 'description' => __( 'The Sidebar template defines a page area that typically contains site metadata.', 'example-template-part-area' ), 27 | // Core only supports four icons at the moment, so this 28 | // one doesn't actually appear. But the value must be 29 | // defined to avoid an error. 30 | // @link https://github.com/WordPress/gutenberg/issues/36814 31 | 'icon' => 'sidebar' 32 | ); 33 | 34 | return $default_area_definitions; 35 | } 36 | -------------------------------------------------------------------------------- /example-template-part-area/parts/footer.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example-template-part-area/parts/header.html: -------------------------------------------------------------------------------- 1 | 2 |
4 | 5 |
6 | 7 |
8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 | 18 | 19 |
20 | 21 |
22 | -------------------------------------------------------------------------------- /example-template-part-area/parts/post-meta.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example-template-part-area/parts/sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example-template-part-area/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/example-template-part-area/screenshot.png -------------------------------------------------------------------------------- /example-template-part-area/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Example - Template Part Area 3 | * Description: A child theme with an example of registering a "sidebar" template part area. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: example-template-part-area 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | -------------------------------------------------------------------------------- /example-template-part-area/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/theme.json", 3 | "version": 2, 4 | "templateParts": [ 5 | { 6 | "area": "header", 7 | "name": "header", 8 | "title": "Header" 9 | }, 10 | { 11 | "area": "footer", 12 | "name": "footer", 13 | "title": "Footer" 14 | }, 15 | { 16 | "area": "sidebar", 17 | "name": "sidebar", 18 | "title": "Sidebar" 19 | }, 20 | { 21 | "area": "uncategorized", 22 | "name": "post-meta", 23 | "title": "Post Meta" 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "block-theme-examples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "zip:create": "node ./_bin/createZipExample.js", 8 | "zip:create:all": "node ./_bin/createAllZipsExamples.js", 9 | "table:update": "node ./_bin/updateTableMarkdown.js", 10 | "table:update:all": "npm run table:update -- all" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "adm-zip": "^0.5.10", 17 | "archiver": "^6.0.1", 18 | "markdown-table": "2", 19 | "chalk": "4.1.1" 20 | } 21 | } -------------------------------------------------------------------------------- /twentytwentyfour-starter-content-patterns/README.md: -------------------------------------------------------------------------------- 1 | # Starter Content Patterns 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/twentytwentyfour-starter-content-patterns) | twentytwentyfour-starter-content-patterns | BLOCK THEME, CURATION | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-content-patterns.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-content-patterns.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 8 | 9 | 10 | This is a child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase an example of a block pattern that appears in a modal when a user adds a new post. To read more about this feature, see the [Starter Content Pattern](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/patterns/) documentation in the Block Editor Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a custom block pattern named `Event Announcement`. The only file with code relevant to this example is: 17 | 18 | - `patterns/event-announcement.php`: Registers a custom pattern. 19 | -------------------------------------------------------------------------------- /twentytwentyfour-starter-content-patterns/patterns/event-announcement.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 |

25 | 26 | 27 | 28 |
29 | 30 |

31 | 32 | 33 |

34 | 35 |
36 | 37 | 38 |
39 | 40 | 41 | 42 |
43 | 44 | 45 |

46 | 47 | 48 | 49 |

50 | 51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 | 64 |
65 | 66 | 67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /twentytwentyfour-starter-content-patterns/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/twentytwentyfour-starter-content-patterns/screenshot.png -------------------------------------------------------------------------------- /twentytwentyfour-starter-content-patterns/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Starter Content Patterns 3 | * Description: A child theme with a starter content pattern for the "post" post type named "Event Announcement." 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: twentytwentyfour-starter-content-patterns 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | -------------------------------------------------------------------------------- /twentytwentyfour-starter-template-patterns/README.md: -------------------------------------------------------------------------------- 1 | # Starter Template Patterns 2 | 3 | 4 | 5 | | Folder | Short description | Tags | Download .zip | Live Demo | 6 | | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | [📁](https://github.com/WordPress/block-theme-examples/tree/master/twentytwentyfour-starter-template-patterns) | twentytwentyfour-starter-template-patterns | BLOCK THEME, CURATION | [📦](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-template-patterns.zip) | [![](https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_assets/icon-wp.svg)](https://playground.wordpress.net/#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin/themes.php%22,%22preferredVersions%22:{%22php%22:%228.0%22,%22wp%22:%22latest%22},%22steps%22:[{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyfour%22}},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-template-patterns.zip%22},%22options%22:{%22activate%22:true}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]}) | 8 | 9 | 10 | This is a child theme of the [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/) theme, which is required for this example to work. 11 | 12 | The goal of this child theme is to showcase an example of a block pattern that appears in a modal when a user adds a new template from the Site Editor. This template will only appear when create archive-type templates (e.g., archive, author, category, date, tag, and taxonomy). To read more about this feature, see the [Starter Template Pattern](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/patterns/#prioritize-starter-patterns-for-template-creation) documentation in the Block Editor Handbook. 13 | 14 | ## Understanding the Example Code 15 | 16 | This child theme adds a custom block pattern named `Archive Template`. The only file with code relevant to this example is: 17 | 18 | - `patterns/template-archive.php`: Registers a custom pattern. 19 | -------------------------------------------------------------------------------- /twentytwentyfour-starter-template-patterns/patterns/template-archive.php: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /twentytwentyfour-starter-template-patterns/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/block-theme-examples/df4445fb96dc18ea54ce8ac91cd2aed8954b3e58/twentytwentyfour-starter-template-patterns/screenshot.png -------------------------------------------------------------------------------- /twentytwentyfour-starter-template-patterns/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme Name: Starter Template Patterns 3 | * Description: A child theme with a template pattern titled "Archive Template," which can be applied to new archive-type templates. 4 | * Version: 1.0.0 5 | * Template: twentytwentyfour 6 | * Tags: full-site-editing 7 | * Text Domain: twentytwentyfour-starter-template-patterns 8 | * Tested up to: 6.4 9 | * Requires at least: 6.4 10 | * Requires PHP: 7.4 11 | * License: GNU General Public License v2.0 or later 12 | * License URI: https://www.gnu.org/licenses/gpl-2.0.html 13 | */ 14 | 15 | /* This file is not loaded by default. */ 16 | --------------------------------------------------------------------------------