├── .github
    └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .phpcs.xml.dist
├── README.md
├── composer.json
├── composer.lock
├── functions.php
├── index.php
├── parts
    ├── footer.html
    ├── header.html
    └── sidebar.html
├── screenshot.png
├── style.css
├── templates
    ├── archive.html
    ├── front-page.html
    └── index.html
└── theme.json


/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | Closes #\_\_
 2 | 
 3 | ### DESCRIPTION
 4 | 
 5 | - What did you do? Give us some context...
 6 | 
 7 | ### SCREENSHOTS
 8 | 
 9 | ![screenshot](https://dl.dropbox.com/s/8k8xh3tuj3g5340/wd_s-pr-template.jpg?dl=0)
10 | 
11 | ### OTHER
12 | 
13 | - [ ] Is this issue accessible? (Section 508/WCAG 2.0AA)
14 | - [ ] Does this issue pass all the linting? (PHPCS, ESLint, SassLint)
15 | - [ ] Does this pass CBT?
16 | 
17 | ### STEPS TO VERIFY
18 | 
19 | How do we test this?
20 | 
21 | ### DOCUMENTATION
22 | 
23 | Will this pull request require updating the theme documentation? Currently on [README.md](https://github.com/WebDevStudios/wds-block-based-theme/blob/main/README.md).
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | vendor/
2 | node_modules/
3 | .vs-code/
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/.phpcs.xml.dist:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <ruleset name="WordPress Coding Standards">
 3 | 	<description>Apply WordPress Coding Standards</description>
 4 | 
 5 | 	<!-- Set the memory limit to 256M.
 6 | 		 For most standard PHP configurations, this means the memory limit will temporarily be raised.
 7 | 		 Ref: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Advanced-Usage#specifying-phpini-settings
 8 | 	-->
 9 | 	<ini name="memory_limit" value="256M"/>
10 | 
11 | 	<!-- Whenever possible, cache the scan results and re-use those for unchanged files on the next scan. -->
12 | 	<arg name="cache"/>
13 | 
14 | 	<!-- Strip the filepaths down to the relevant bit. -->
15 | 	<arg name="basepath" value="./"/>
16 | 
17 | 	<!-- Check up to 20 files simultaneously. -->
18 | 	<arg name="parallel" value="20"/>
19 | 
20 | 	<!-- Show sniff codes in all reports. -->
21 | 	<arg value="ps"/>
22 | 
23 | 	<!-- Use WordPress "Extra" Coding Standards. -->
24 | 	<rule ref="WordPress-Extra">
25 | 		<!-- Allow array short syntax. -->
26 | 		<exclude name="Generic.Arrays.DisallowShortArraySyntax" />
27 | 		<!-- Allow short prefixes. -->
28 | 		<exclude name="WordPress.NamingConventions.PrefixAllGlobals.ShortPrefixPassed"/>
29 | 	</rule>
30 | 
31 | 	<!-- Use WordPress "Docs" Coding Standards. -->
32 | 	<rule ref="WordPress-Docs" />
33 | 
34 | 	<!-- The minimum supported WordPress version. This should match what's listed in style.css. -->
35 | 	<rule ref="WordPress.WP.DeprecatedFunctions">
36 | 		<properties>
37 | 			<property name="minimum_supported_version" value="5.6"/>
38 | 		</properties>
39 | 	</rule>
40 | 
41 | 	<!-- Allow for theme specific exceptions to the file name rules based on the theme hierarchy. -->
42 | 	<rule ref="WordPress.Files.FileName">
43 | 		<properties>
44 | 			<property name="is_theme" value="true"/>
45 | 		</properties>
46 | 	</rule>
47 | 
48 | 	<!-- Verify that everything in the global namespace is prefixed with a theme specific prefix.
49 | 		 Multiple valid prefixes can be provided as a comma-delimited list. -->
50 | 	<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
51 | 		<properties>
52 | <property name="prefixes" type="array" value="Testing\wdsbbt,wdsbbt,wds_block_based_theme_" />
53 | 
54 | 		</properties>
55 | 	</rule>
56 | 
57 | 	<!-- Verify that the text_domain is set to the desired text-domain.
58 | 		 Multiple valid text domains can be provided as a comma-delimited list. -->
59 | 	<rule ref="WordPress.WP.I18n">
60 | 		<properties>
61 | <property name="text_domain" type="array" value="wdsbbt"/>
62 | 
63 | 		</properties>
64 | 	</rule>
65 | 
66 | 	<!-- Use WordPress PHP Compatibility. -->
67 | 	<rule ref="PHPCompatibilityWP"/>
68 | 
69 | 	<!-- WordPress Core currently supports PHP 5.6+. -->
70 | 	<config name="testVersion" value="5.6-"/>
71 | 
72 | 	<!-- Only sniff PHP files. -->
73 | 	<arg name="extensions" value="php"/>
74 | 
75 | 	<!-- Only sniff the theme. -->
76 | 	<file>./</file>
77 | 
78 | 	<!-- Don't sniff the following directories or file types. -->
79 | 	<exclude-pattern>/build/*</exclude-pattern>
80 | 	<exclude-pattern>/node_modules/*</exclude-pattern>
81 | 	<exclude-pattern>/vendor/*</exclude-pattern>
82 | </ruleset>
83 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # WDS Block Based Theme
  2 | 
  3 | A block based theme, which supports full site editing. Learn more about building [Block Based Themes](https://developer.wordpress.org/themes/block-themes/) for WordPress.
  4 | 
  5 | > **Note**
  6 | > With the release of WordPress 5.9, Site Editing is available as part of WordPress without installing Gutenberg. However, this theme started when these features were still experimental, and should not (yet) be used in a production environment.
  7 | 
  8 | <a href="https://webdevstudios.com/contact/"><img src="https://webdevstudios.com/wp-content/uploads/2018/04/wds-github-banner.png" alt="WebDevStudios. Your Success is Our Mission."></a>
  9 | 
 10 | ## Table of Contents
 11 | 
 12 | - [WDS Block Based Theme](#wds-block-based-theme)
 13 |   - [Requirements](#requirements)
 14 |   - [Theme Installation](#theme-installation)
 15 |   - [Glossary](#glossary)
 16 |   - [Site Editor as Page Builder](#site-editor-as-page-builder)
 17 |     - [Export (Optional)](#export-optional)
 18 |   - [Global Styles via Theme JSON](#global-styles-via-theme-json)
 19 |   - [Theme Support](#theme-support)
 20 | 
 21 | ---
 22 | 
 23 | ## Requirements
 24 | 
 25 | > **Note**
 26 | > The previous version of these notes included enabling Full Site Editing under Gutenberg settings, that is no longer necessary (or available, since it is not an experiment anymore).
 27 | 
 28 | 1. _(Optionally)_ The [Gutenberg Plugin](https://wordpress.org/plugins/gutenberg/) can be installed and activated. Gutenberg is no longer required but can be installed for the latest features regarding Site Editing.
 29 | 
 30 | ---
 31 | 
 32 | ## Theme Installation
 33 | 
 34 | Clone this repo into `/wp-content/themes`:
 35 | 
 36 | ```bash
 37 | git clone git@github.com:WebDevStudios/wds-block-based-theme.git
 38 | ```
 39 | 
 40 | Activate the theme:
 41 | 
 42 | ![screenshot](https://dl.dropbox.com/s/f372jqm7xtvmcnm/Screen%20Shot%202020-08-18%20at%2011.43.21%20AM.png?dl=0)
 43 | 
 44 | ---
 45 | 
 46 | ## Glossary
 47 | 
 48 | **Structure** - Block based themes follow this structure:
 49 | 
 50 | ```text
 51 | theme
 52 | |__ style.css
 53 | |__ functions.php
 54 | |__ index.php
 55 | |__ experimental-theme.json
 56 | |__ templates
 57 |     |__ index.html
 58 |     |__ single.html
 59 |     |__ archive.html
 60 |     |__ ...
 61 | |__ parts
 62 |     |__ header.html
 63 |     |__ footer.html
 64 |     |__ sidebar.html
 65 |     |__ ...
 66 | ```
 67 | 
 68 | **Block & Block Grammar** - An [HTML comment](https://developer.wordpress.org/block-editor/principles/key-concepts/#blocks) containing information about a Block or Template Part. The following grammar creates a centered `<p>` tag in the block editor:
 69 | 
 70 | ```html
 71 | <!-- wp:paragraph {"align":"center"} -->
 72 |     <p>I am a centered paragraph tag</p>
 73 | <!-- /wp:paragraph -->
 74 | ```
 75 | 
 76 | **Template Parts** - An HTML container for block grammar, which is displayed in Templates. To call a Template Part in a template, use this block grammar:
 77 | 
 78 | ```html
 79 | <!-- wp:template-part {"slug":"header","theme":"yourtheme"} /-->
 80 | ```
 81 | 
 82 | **Templates** - An HTML container that displays Template Parts and Block Grammar. They follow the WordPress [template hierarchy](https://developer.wordpress.org/themes/basics/template-hierarchy/):
 83 | 
 84 | ```html
 85 | <!-- wp:template-part {"slug":"header","theme":"yourtheme"} /-->
 86 | <!-- wp:paragraph {"align":"center"} -->
 87 |     <p>I am a centered paragraph tag</p>
 88 | <!-- /wp:paragraph -->
 89 | <!-- wp:template-part {"slug":"footer","theme":"yourtheme"} /-->
 90 | ```
 91 | 
 92 | ---
 93 | 
 94 | ## Site Editor as Page Builder
 95 | 
 96 | **Use the Site Editor** to build your site:
 97 | 
 98 | ![screenshot](https://dl.dropbox.com/s/mvmfh7k6db9mazw/Screenshot%202023-03-10%20at%2012.43.02%20PM.png?dl=0)
 99 | 
100 | As you build, your Templates and Template Part block grammar **are saved to the database**, which can be accessed on the `Editor` under the `Template Parts` section:
101 | 
102 | ![screenshot](https://dl.dropbox.com/s/d923uukrexvlmll/Screenshot%202023-03-10%20at%2012.44.33%20PM.png?dl=0)
103 | 
104 | You can even edit Templates and Template Parts individually from the `Editor`:
105 | 
106 | ![screenshot](https://dl.dropbox.com/s/5lq5tuidu1ah6es/Screenshot%202023-03-10%20at%2012.48.17%20PM.png?dl=0)
107 | 
108 | ---
109 | 
110 | ### Export (Optional)
111 | 
112 | When you're finished building your site, you can **export the your changes from the "Tools" menu**:
113 | 
114 | ![screenshot](https://dl.dropbox.com/s/p9j44ao48wtd3pq/Screenshot%202023-03-10%20at%2012.54.47%20PM.png?dl=0)
115 | 
116 | This action will export all of the Block Grammar into their respective Template and Template Part files. This feature is similar to ACF's [Local JSON](https://www.advancedcustomfields.com/resources/local-json/).
117 | 
118 | After updating Templates or Template Parts, the whole theme can be exported:
119 | 
120 | ![screenshot](https://dl.dropbox.com/s/ywmhndvcmxwqq7b/Screenshot%202023-03-10%20at%2012.58.57%20PM.png?dl=0)
121 | 
122 | Everything you built in the Site Editor, is now available as code in your theme, which could be checked into version control or shipped to a client.
123 | 
124 | ![screenshot](https://dl.dropbox.com/s/w6mwivtu36cv7px/Screen%20Shot%202020-08-18%20at%2012.21.16%20PM.png?dl=0)
125 | 
126 | > **Note**
127 | > A previous version of this document mentioend that `postID` was part of an exported Template Part, which does not seem the case anymore. ref: <https://github.com/WordPress/gutenberg/pull/26812#issuecomment-830000230>
128 | 
129 | ---
130 | 
131 | ## Global Styles via Theme JSON
132 | 
133 | Block based themes support an `theme.json` file. WordPress parses this file and makes these CSS variables available, without any need to write CSS. This feature feels similar to [Theme UI](https://theme-ui.com).
134 | 
135 | The `theme.json` file:
136 | 
137 | - Creates CSS variables (also called CSS custom properties) that can be used to style blocks both on the front and in the editor.
138 | - Sets global styles.
139 | - Sets styles for individual block types.
140 | 
141 | The following example would set a global CSS variable for all  `<h2>` Blocks:
142 | 
143 | ```json
144 | {
145 |   "global": {
146 |     "presets": {
147 |       "color": [
148 |         {
149 |           "slug": "strong-magenta",
150 |           "value": "#a156b4"
151 |         }
152 |       ]
153 |     }
154 |   },
155 | 
156 |   "core/heading/h2": {
157 |     "styles": {
158 |       "color": {
159 |         "text": "var( --wp--preset--color--strong-magenta )"
160 |       }
161 |     }
162 |   }
163 | }
164 | ```
165 | 
166 | ![screenshot](https://dl.dropbox.com/s/265wcfzsuls9vz6/Screen%20Shot%202020-08-18%20at%201.38.40%20PM.png?dl=0)
167 | 
168 | Learn more about [Theme JSON](https://developer.wordpress.org/block-editor/developers/themes/theme-json/).
169 | 
170 | ---
171 | 
172 | ## Theme Support
173 | 
174 | Block based themes will continue to leverage `add_theme_support()` as an "opt-in" way to extend and customize Core WordPress features.
175 | 
176 | The following features are:
177 | 
178 | - `align-wide`
179 | - `block-nav-menus`
180 | - `custom-line-height`
181 | - `custom-units`
182 | - `dark-editor-style`
183 | - `editor-color-palette`
184 | - `editor-gradient-presets`
185 | - `editor-font-sizes`
186 | - `experimental-custom-spacing`
187 | - `experimental-link-color`
188 | - `responsive-embeds`
189 | - `wp-block-styles`
190 | 
191 | This example uses `editor-color-palette` to set default colors in the Block Editor:
192 | 
193 | ```php
194 | function yourtheme_setup_theme_supported_features() {
195 |     add_theme_support( 'editor-color-palette', array(
196 |         array(
197 |             'name'  => __( 'strong magenta', 'yourtheme' ),
198 |             'slug'  => 'strong-magenta',
199 |             'color' => '#a156b4',
200 |         ),
201 |         array(
202 |             'name'  => __( 'very light gray', 'yourtheme' ),
203 |             'slug'  => 'very-light-gray',
204 |             'color' => '#f1f1f1',
205 |         ),
206 |     ) );
207 | }
208 | add_action( 'after_setup_theme', 'yourtheme_setup_theme_supported_features' );
209 | ```
210 | 
211 | This would be helpful if you needed to set your client's branding colors as defaults in the Block Editor:
212 | 
213 | ![screenshot](https://dl.dropbox.com/s/qyucddgsub2skn4/Screen%20Shot%202020-08-19%20at%208.06.49%20AM.png?dl=0)
214 | 
215 | Learn more about available [Theme Support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/) options.
216 | 
217 | ---
218 | 
219 | Learn more <https://developer.wordpress.org/block-editor/how-to-guides/themes/>
220 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "webdevstudios/wds-block-based-theme",
 3 |     "description": "An experimental block based theme, which supports full site editing.",
 4 |     "type": "wordpress-theme",
 5 |     "license": "GPL-3.0-or-later",
 6 |     "authors": [
 7 |         {
 8 |             "name": "WebDevStudios",
 9 |             "email": "contact@webdevstudios.com"
10 |         }
11 |     ],
12 |     "minimum-stability": "stable",
13 |     "scripts": {
14 | 		"lint": "composer run compat && composer run lint:php",
15 |         "format": "./vendor/bin/phpcbf -p -v . --standard=.phpcs.xml.dist --extensions=php --report-summary --report-source --ignore='*/node_modules/*,*/vendor/*,*/build/*'",
16 |         "lint:php": "./vendor/bin/phpcs -p -s -n . --standard=.phpcs.xml.dist --extensions=php -n --colors --ignore='*/node_modules/*,*/vendor/*,*/build/*'",
17 |         "compat": "./vendor/bin/phpcs -p . --standard=PHPCompatibility --extensions=php --runtime-set testVersion 8.0 --ignore='.github/*,vendor/*' --warning-severity=8 -d memory_limit=4096M || true || exit"
18 |     },
19 |     "require-dev": {
20 |         "phpcompatibility/phpcompatibility-wp": "^2.1",
21 |         "wp-coding-standards/wpcs": "^2.3",
22 |         "dealerdirect/phpcodesniffer-composer-installer": "^1.0"
23 |     },
24 |     "config": {
25 |         "allow-plugins": {
26 |             "dealerdirect/phpcodesniffer-composer-installer": true
27 |         }
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/composer.lock:
--------------------------------------------------------------------------------
  1 | {
  2 |     "_readme": [
  3 |         "This file locks the dependencies of your project to a known state",
  4 |         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
  5 |         "This file is @generated automatically"
  6 |     ],
  7 |     "content-hash": "0a15672ee5702621b7f97b2e85e76c04",
  8 |     "packages": [],
  9 |     "packages-dev": [
 10 |         {
 11 |             "name": "dealerdirect/phpcodesniffer-composer-installer",
 12 |             "version": "v1.0.0",
 13 |             "source": {
 14 |                 "type": "git",
 15 |                 "url": "https://github.com/PHPCSStandards/composer-installer.git",
 16 |                 "reference": "4be43904336affa5c2f70744a348312336afd0da"
 17 |             },
 18 |             "dist": {
 19 |                 "type": "zip",
 20 |                 "url": "https://api.github.com/repos/PHPCSStandards/composer-installer/zipball/4be43904336affa5c2f70744a348312336afd0da",
 21 |                 "reference": "4be43904336affa5c2f70744a348312336afd0da",
 22 |                 "shasum": ""
 23 |             },
 24 |             "require": {
 25 |                 "composer-plugin-api": "^1.0 || ^2.0",
 26 |                 "php": ">=5.4",
 27 |                 "squizlabs/php_codesniffer": "^2.0 || ^3.1.0 || ^4.0"
 28 |             },
 29 |             "require-dev": {
 30 |                 "composer/composer": "*",
 31 |                 "ext-json": "*",
 32 |                 "ext-zip": "*",
 33 |                 "php-parallel-lint/php-parallel-lint": "^1.3.1",
 34 |                 "phpcompatibility/php-compatibility": "^9.0",
 35 |                 "yoast/phpunit-polyfills": "^1.0"
 36 |             },
 37 |             "type": "composer-plugin",
 38 |             "extra": {
 39 |                 "class": "PHPCSStandards\\Composer\\Plugin\\Installers\\PHPCodeSniffer\\Plugin"
 40 |             },
 41 |             "autoload": {
 42 |                 "psr-4": {
 43 |                     "PHPCSStandards\\Composer\\Plugin\\Installers\\PHPCodeSniffer\\": "src/"
 44 |                 }
 45 |             },
 46 |             "notification-url": "https://packagist.org/downloads/",
 47 |             "license": [
 48 |                 "MIT"
 49 |             ],
 50 |             "authors": [
 51 |                 {
 52 |                     "name": "Franck Nijhof",
 53 |                     "email": "franck.nijhof@dealerdirect.com",
 54 |                     "homepage": "http://www.frenck.nl",
 55 |                     "role": "Developer / IT Manager"
 56 |                 },
 57 |                 {
 58 |                     "name": "Contributors",
 59 |                     "homepage": "https://github.com/PHPCSStandards/composer-installer/graphs/contributors"
 60 |                 }
 61 |             ],
 62 |             "description": "PHP_CodeSniffer Standards Composer Installer Plugin",
 63 |             "homepage": "http://www.dealerdirect.com",
 64 |             "keywords": [
 65 |                 "PHPCodeSniffer",
 66 |                 "PHP_CodeSniffer",
 67 |                 "code quality",
 68 |                 "codesniffer",
 69 |                 "composer",
 70 |                 "installer",
 71 |                 "phpcbf",
 72 |                 "phpcs",
 73 |                 "plugin",
 74 |                 "qa",
 75 |                 "quality",
 76 |                 "standard",
 77 |                 "standards",
 78 |                 "style guide",
 79 |                 "stylecheck",
 80 |                 "tests"
 81 |             ],
 82 |             "support": {
 83 |                 "issues": "https://github.com/PHPCSStandards/composer-installer/issues",
 84 |                 "source": "https://github.com/PHPCSStandards/composer-installer"
 85 |             },
 86 |             "time": "2023-01-05T11:28:13+00:00"
 87 |         },
 88 |         {
 89 |             "name": "phpcompatibility/php-compatibility",
 90 |             "version": "9.3.5",
 91 |             "source": {
 92 |                 "type": "git",
 93 |                 "url": "https://github.com/PHPCompatibility/PHPCompatibility.git",
 94 |                 "reference": "9fb324479acf6f39452e0655d2429cc0d3914243"
 95 |             },
 96 |             "dist": {
 97 |                 "type": "zip",
 98 |                 "url": "https://api.github.com/repos/PHPCompatibility/PHPCompatibility/zipball/9fb324479acf6f39452e0655d2429cc0d3914243",
 99 |                 "reference": "9fb324479acf6f39452e0655d2429cc0d3914243",
100 |                 "shasum": ""
101 |             },
102 |             "require": {
103 |                 "php": ">=5.3",
104 |                 "squizlabs/php_codesniffer": "^2.3 || ^3.0.2"
105 |             },
106 |             "conflict": {
107 |                 "squizlabs/php_codesniffer": "2.6.2"
108 |             },
109 |             "require-dev": {
110 |                 "phpunit/phpunit": "~4.5 || ^5.0 || ^6.0 || ^7.0"
111 |             },
112 |             "suggest": {
113 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.5 || This Composer plugin will sort out the PHPCS 'installed_paths' automatically.",
114 |                 "roave/security-advisories": "dev-master || Helps prevent installing dependencies with known security issues."
115 |             },
116 |             "type": "phpcodesniffer-standard",
117 |             "notification-url": "https://packagist.org/downloads/",
118 |             "license": [
119 |                 "LGPL-3.0-or-later"
120 |             ],
121 |             "authors": [
122 |                 {
123 |                     "name": "Wim Godden",
124 |                     "homepage": "https://github.com/wimg",
125 |                     "role": "lead"
126 |                 },
127 |                 {
128 |                     "name": "Juliette Reinders Folmer",
129 |                     "homepage": "https://github.com/jrfnl",
130 |                     "role": "lead"
131 |                 },
132 |                 {
133 |                     "name": "Contributors",
134 |                     "homepage": "https://github.com/PHPCompatibility/PHPCompatibility/graphs/contributors"
135 |                 }
136 |             ],
137 |             "description": "A set of sniffs for PHP_CodeSniffer that checks for PHP cross-version compatibility.",
138 |             "homepage": "http://techblog.wimgodden.be/tag/codesniffer/",
139 |             "keywords": [
140 |                 "compatibility",
141 |                 "phpcs",
142 |                 "standards"
143 |             ],
144 |             "support": {
145 |                 "issues": "https://github.com/PHPCompatibility/PHPCompatibility/issues",
146 |                 "source": "https://github.com/PHPCompatibility/PHPCompatibility"
147 |             },
148 |             "time": "2019-12-27T09:44:58+00:00"
149 |         },
150 |         {
151 |             "name": "phpcompatibility/phpcompatibility-paragonie",
152 |             "version": "1.3.2",
153 |             "source": {
154 |                 "type": "git",
155 |                 "url": "https://github.com/PHPCompatibility/PHPCompatibilityParagonie.git",
156 |                 "reference": "bba5a9dfec7fcfbd679cfaf611d86b4d3759da26"
157 |             },
158 |             "dist": {
159 |                 "type": "zip",
160 |                 "url": "https://api.github.com/repos/PHPCompatibility/PHPCompatibilityParagonie/zipball/bba5a9dfec7fcfbd679cfaf611d86b4d3759da26",
161 |                 "reference": "bba5a9dfec7fcfbd679cfaf611d86b4d3759da26",
162 |                 "shasum": ""
163 |             },
164 |             "require": {
165 |                 "phpcompatibility/php-compatibility": "^9.0"
166 |             },
167 |             "require-dev": {
168 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.7",
169 |                 "paragonie/random_compat": "dev-master",
170 |                 "paragonie/sodium_compat": "dev-master"
171 |             },
172 |             "suggest": {
173 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.7 || This Composer plugin will sort out the PHP_CodeSniffer 'installed_paths' automatically.",
174 |                 "roave/security-advisories": "dev-master || Helps prevent installing dependencies with known security issues."
175 |             },
176 |             "type": "phpcodesniffer-standard",
177 |             "notification-url": "https://packagist.org/downloads/",
178 |             "license": [
179 |                 "LGPL-3.0-or-later"
180 |             ],
181 |             "authors": [
182 |                 {
183 |                     "name": "Wim Godden",
184 |                     "role": "lead"
185 |                 },
186 |                 {
187 |                     "name": "Juliette Reinders Folmer",
188 |                     "role": "lead"
189 |                 }
190 |             ],
191 |             "description": "A set of rulesets for PHP_CodeSniffer to check for PHP cross-version compatibility issues in projects, while accounting for polyfills provided by the Paragonie polyfill libraries.",
192 |             "homepage": "http://phpcompatibility.com/",
193 |             "keywords": [
194 |                 "compatibility",
195 |                 "paragonie",
196 |                 "phpcs",
197 |                 "polyfill",
198 |                 "standards",
199 |                 "static analysis"
200 |             ],
201 |             "support": {
202 |                 "issues": "https://github.com/PHPCompatibility/PHPCompatibilityParagonie/issues",
203 |                 "source": "https://github.com/PHPCompatibility/PHPCompatibilityParagonie"
204 |             },
205 |             "time": "2022-10-25T01:46:02+00:00"
206 |         },
207 |         {
208 |             "name": "phpcompatibility/phpcompatibility-wp",
209 |             "version": "2.1.4",
210 |             "source": {
211 |                 "type": "git",
212 |                 "url": "https://github.com/PHPCompatibility/PHPCompatibilityWP.git",
213 |                 "reference": "b6c1e3ee1c35de6c41a511d5eb9bd03e447480a5"
214 |             },
215 |             "dist": {
216 |                 "type": "zip",
217 |                 "url": "https://api.github.com/repos/PHPCompatibility/PHPCompatibilityWP/zipball/b6c1e3ee1c35de6c41a511d5eb9bd03e447480a5",
218 |                 "reference": "b6c1e3ee1c35de6c41a511d5eb9bd03e447480a5",
219 |                 "shasum": ""
220 |             },
221 |             "require": {
222 |                 "phpcompatibility/php-compatibility": "^9.0",
223 |                 "phpcompatibility/phpcompatibility-paragonie": "^1.0"
224 |             },
225 |             "require-dev": {
226 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.7"
227 |             },
228 |             "suggest": {
229 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.7 || This Composer plugin will sort out the PHP_CodeSniffer 'installed_paths' automatically.",
230 |                 "roave/security-advisories": "dev-master || Helps prevent installing dependencies with known security issues."
231 |             },
232 |             "type": "phpcodesniffer-standard",
233 |             "notification-url": "https://packagist.org/downloads/",
234 |             "license": [
235 |                 "LGPL-3.0-or-later"
236 |             ],
237 |             "authors": [
238 |                 {
239 |                     "name": "Wim Godden",
240 |                     "role": "lead"
241 |                 },
242 |                 {
243 |                     "name": "Juliette Reinders Folmer",
244 |                     "role": "lead"
245 |                 }
246 |             ],
247 |             "description": "A ruleset for PHP_CodeSniffer to check for PHP cross-version compatibility issues in projects, while accounting for polyfills provided by WordPress.",
248 |             "homepage": "http://phpcompatibility.com/",
249 |             "keywords": [
250 |                 "compatibility",
251 |                 "phpcs",
252 |                 "standards",
253 |                 "static analysis",
254 |                 "wordpress"
255 |             ],
256 |             "support": {
257 |                 "issues": "https://github.com/PHPCompatibility/PHPCompatibilityWP/issues",
258 |                 "source": "https://github.com/PHPCompatibility/PHPCompatibilityWP"
259 |             },
260 |             "time": "2022-10-24T09:00:36+00:00"
261 |         },
262 |         {
263 |             "name": "squizlabs/php_codesniffer",
264 |             "version": "3.7.1",
265 |             "source": {
266 |                 "type": "git",
267 |                 "url": "https://github.com/squizlabs/PHP_CodeSniffer.git",
268 |                 "reference": "1359e176e9307e906dc3d890bcc9603ff6d90619"
269 |             },
270 |             "dist": {
271 |                 "type": "zip",
272 |                 "url": "https://api.github.com/repos/squizlabs/PHP_CodeSniffer/zipball/1359e176e9307e906dc3d890bcc9603ff6d90619",
273 |                 "reference": "1359e176e9307e906dc3d890bcc9603ff6d90619",
274 |                 "shasum": ""
275 |             },
276 |             "require": {
277 |                 "ext-simplexml": "*",
278 |                 "ext-tokenizer": "*",
279 |                 "ext-xmlwriter": "*",
280 |                 "php": ">=5.4.0"
281 |             },
282 |             "require-dev": {
283 |                 "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0"
284 |             },
285 |             "bin": [
286 |                 "bin/phpcs",
287 |                 "bin/phpcbf"
288 |             ],
289 |             "type": "library",
290 |             "extra": {
291 |                 "branch-alias": {
292 |                     "dev-master": "3.x-dev"
293 |                 }
294 |             },
295 |             "notification-url": "https://packagist.org/downloads/",
296 |             "license": [
297 |                 "BSD-3-Clause"
298 |             ],
299 |             "authors": [
300 |                 {
301 |                     "name": "Greg Sherwood",
302 |                     "role": "lead"
303 |                 }
304 |             ],
305 |             "description": "PHP_CodeSniffer tokenizes PHP, JavaScript and CSS files and detects violations of a defined set of coding standards.",
306 |             "homepage": "https://github.com/squizlabs/PHP_CodeSniffer",
307 |             "keywords": [
308 |                 "phpcs",
309 |                 "standards"
310 |             ],
311 |             "support": {
312 |                 "issues": "https://github.com/squizlabs/PHP_CodeSniffer/issues",
313 |                 "source": "https://github.com/squizlabs/PHP_CodeSniffer",
314 |                 "wiki": "https://github.com/squizlabs/PHP_CodeSniffer/wiki"
315 |             },
316 |             "time": "2022-06-18T07:21:10+00:00"
317 |         },
318 |         {
319 |             "name": "wp-coding-standards/wpcs",
320 |             "version": "2.3.0",
321 |             "source": {
322 |                 "type": "git",
323 |                 "url": "https://github.com/WordPress/WordPress-Coding-Standards.git",
324 |                 "reference": "7da1894633f168fe244afc6de00d141f27517b62"
325 |             },
326 |             "dist": {
327 |                 "type": "zip",
328 |                 "url": "https://api.github.com/repos/WordPress/WordPress-Coding-Standards/zipball/7da1894633f168fe244afc6de00d141f27517b62",
329 |                 "reference": "7da1894633f168fe244afc6de00d141f27517b62",
330 |                 "shasum": ""
331 |             },
332 |             "require": {
333 |                 "php": ">=5.4",
334 |                 "squizlabs/php_codesniffer": "^3.3.1"
335 |             },
336 |             "require-dev": {
337 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.5 || ^0.6",
338 |                 "phpcompatibility/php-compatibility": "^9.0",
339 |                 "phpcsstandards/phpcsdevtools": "^1.0",
340 |                 "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0"
341 |             },
342 |             "suggest": {
343 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.6 || This Composer plugin will sort out the PHPCS 'installed_paths' automatically."
344 |             },
345 |             "type": "phpcodesniffer-standard",
346 |             "notification-url": "https://packagist.org/downloads/",
347 |             "license": [
348 |                 "MIT"
349 |             ],
350 |             "authors": [
351 |                 {
352 |                     "name": "Contributors",
353 |                     "homepage": "https://github.com/WordPress/WordPress-Coding-Standards/graphs/contributors"
354 |                 }
355 |             ],
356 |             "description": "PHP_CodeSniffer rules (sniffs) to enforce WordPress coding conventions",
357 |             "keywords": [
358 |                 "phpcs",
359 |                 "standards",
360 |                 "wordpress"
361 |             ],
362 |             "support": {
363 |                 "issues": "https://github.com/WordPress/WordPress-Coding-Standards/issues",
364 |                 "source": "https://github.com/WordPress/WordPress-Coding-Standards",
365 |                 "wiki": "https://github.com/WordPress/WordPress-Coding-Standards/wiki"
366 |             },
367 |             "time": "2020-05-13T23:57:56+00:00"
368 |         }
369 |     ],
370 |     "aliases": [],
371 |     "minimum-stability": "stable",
372 |     "stability-flags": [],
373 |     "prefer-stable": false,
374 |     "prefer-lowest": false,
375 |     "platform": [],
376 |     "platform-dev": [],
377 |     "plugin-api-version": "2.3.0"
378 | }
379 | 


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * _s functions and definitions.
 4 |  *
 5 |  * @link https://developer.wordpress.org/themes/basics/theme-functions/
 6 |  *
 7 |  * @package wds_block_based_theme
 8 |  */
 9 | 
10 | /**
11 |  * Enqueue theme styles.
12 |  */
13 | function wds_block_based_theme_scripts() {
14 | 	wp_enqueue_style(
15 | 		'wdsbbt-theme-style',
16 | 		get_stylesheet_directory_uri() . '/style.css',
17 | 		array(),
18 | 		filemtime( dirname( __FILE__ ) . '/style.css' )
19 | 	);
20 | }
21 | add_action( 'wp_enqueue_scripts', 'wds_block_based_theme_scripts' );
22 | 
23 | /**
24 |  * Sets up theme defaults and registers support for various WordPress features.
25 |  *
26 |  * Note that this function is hooked into the after_setup_theme hook, which runs
27 |  * before the init hook. The init hook is too late for some features, such as indicating
28 |  * support post thumbnails.
29 |  */
30 | function wds_block_based_theme_setup() {
31 | 
32 | 	add_theme_support( 'automatic-feed-links' );
33 | 	add_theme_support( 'post-thumbnails' );
34 | 	add_theme_support( 'wp-block-styles' );
35 | 	add_theme_support( 'align-wide' );
36 | 	add_theme_support( 'custom-units' );
37 | 	add_theme_support( 'block-nav-menus' );
38 | 	add_theme_support(
39 | 		'editor-color-palette',
40 | 		array(
41 | 			array(
42 | 				'name'  => __( 'strong magenta', 'wdsbbt' ),
43 | 				'slug'  => 'strong-magenta',
44 | 				'color' => '#a156b4',
45 | 			),
46 | 			array(
47 | 				'name'  => __( 'very light gray', 'wdsbbt' ),
48 | 				'slug'  => 'very-light-gray',
49 | 				'color' => '#f1f1f1',
50 | 			),
51 | 		)
52 | 	);
53 | 	add_theme_support(
54 | 		'editor-font-sizes',
55 | 		array(
56 | 			array(
57 | 				'name' => __( 'Small', 'wdsbbt' ),
58 | 				'size' => 12,
59 | 				'slug' => 'small',
60 | 			),
61 | 			array(
62 | 				'name' => __( 'Regular', 'wdsbbt' ),
63 | 				'size' => 16,
64 | 				'slug' => 'regular',
65 | 			),
66 | 			array(
67 | 				'name' => __( 'Large', 'wdsbbt' ),
68 | 				'size' => 36,
69 | 				'slug' => 'large',
70 | 			),
71 | 		)
72 | 	);
73 | }
74 | add_action( 'after_setup_theme', 'wds_block_based_theme_setup' );
75 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 | <?php // phpcs:ignore PEAR.Commenting.FileComment.Missing
2 | // Silence is golden.
3 | 


--------------------------------------------------------------------------------
/parts/footer.html:
--------------------------------------------------------------------------------
1 | <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
2 | <p class="has-text-align-center has-small-font-size"> <em>© 2023 MattRyanCo - EmAre, Inc</em> </p>
3 | <!-- /wp:paragraph -->
4 | 


--------------------------------------------------------------------------------
/parts/header.html:
--------------------------------------------------------------------------------
1 | <!-- wp:site-title {"textAlign":"center"} /-->
2 | 
3 | <!-- wp:navigation {"itemsJustification":"center"} -->
4 | <!-- wp:navigation-link {"label":"About","url":"/about"} /-->
5 | <!-- wp:navigation-link {"label":"Contact","url":"/contact"} /-->
6 | <!-- /wp:navigation -->
7 | 


--------------------------------------------------------------------------------
/parts/sidebar.html:
--------------------------------------------------------------------------------
1 | <!-- wp:search {"label":"Search","buttonText":"Search"} /-->
2 | 
3 | <!-- wp:latest-comments /-->


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WebDevStudios/wds-block-based-theme/bf676fc6bbbe8cfcef1fa70b6db27b82eb8dafff/screenshot.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Theme Name: FSEsandbox-WDS Block Based Theme
 3 | Theme URI: https://github.com/webdevstudios/wds-block-based-theme
 4 | Author: WebDevStudios
 5 | Author URI: https://webdevstudios.com
 6 | Description: An experimental block based theme, which supports full site editing.
 7 | Tags:
 8 | Version: 1.0.0
 9 | Requires at least: 5.5
10 | Tested up to: 5.5
11 | Requires PHP: 7.4
12 | License: GNU General Public License v2 or later
13 | License URI: http://www.gnu.org/licenses/gpl-2.0.html
14 | Text Domain: wdsbbt
15 | 
16 | This theme, like WordPress, is licensed under the GPL.
17 | Use it to make something cool, have fun, and share what you've learned with others.
18 | */
19 | 


--------------------------------------------------------------------------------
/templates/archive.html:
--------------------------------------------------------------------------------
 1 | <!-- wp:template-part {"slug":"header","theme":"wds-block-based-theme","tagName":"header"} /-->
 2 | 
 3 | <!-- wp:cover {"minHeight":360,"customGradient":"linear-gradient(253deg,rgba(6,147,227,1) 0%,rgb(84,121,221) 100%)","align":"full"} -->
 4 | <div class="wp-block-cover alignfull has-background-dim has-background-gradient"
 5 | 	style="background:linear-gradient(253deg,rgba(6,147,227,1) 0%,rgb(84,121,221) 100%);min-height:360px">
 6 | 	<div class="wp-block-cover__inner-container">
 7 | 		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 8 | 		<p class="has-text-align-center has-large-font-size">Archive.html Template</p>
 9 | 		<!-- /wp:paragraph -->
10 | 
11 | 		<!-- wp:paragraph {"align":"center"} -->
12 | 		<p class="has-text-align-center"><em>Now you can edit your entire site!</em></p>
13 | 		<!-- /wp:paragraph -->
14 | 	</div>
15 | </div>
16 | <!-- /wp:cover -->
17 | 
18 | <!-- wp:query -->
19 | <!-- wp:post-template -->
20 | <!-- wp:post-title /-->
21 | 
22 | <!-- wp:post-content /-->
23 | <!-- /wp:post-template -->
24 | <!-- /wp:query -->
25 | 
26 | <!-- wp:template-part {"slug":"sidebar","theme":"wds-block-based-theme"} /-->
27 | 
28 | <!-- wp:template-part {"slug":"footer","theme":"wds-block-based-theme","tagName":"footer"} /-->
29 | 


--------------------------------------------------------------------------------
/templates/front-page.html:
--------------------------------------------------------------------------------
 1 | <!-- wp:template-part {"slug":"header","theme":"wds-block-based-theme","tagName":"header"} /-->
 2 | 
 3 | <!-- wp:cover {"minHeight":360,"customGradient":"linear-gradient(253deg,rgba(6,147,227,1) 0%,rgb(84,121,221) 100%)","align":"full"} -->
 4 | <div class="wp-block-cover alignfull has-background-dim has-background-gradient"
 5 |     style="background:linear-gradient(253deg,rgba(6,147,227,1) 0%,rgb(84,121,221) 100%);min-height:360px">
 6 |     <div class="wp-block-cover__inner-container">
 7 |         <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 8 |         <p class="has-text-align-center has-large-font-size">Front-page.html Template</p>
 9 |         <!-- /wp:paragraph -->
10 | 
11 |         <!-- wp:paragraph {"align":"center"} -->
12 |         <p class="has-text-align-center"><em>Now you can edit your entire site! Even the footer. </em></p>
13 |         <!-- /wp:paragraph -->
14 |     </div>
15 | </div>
16 | <!-- /wp:cover -->
17 | 
18 | <!-- wp:template-part {"slug":"sidebar","theme":"wds-block-based-theme"} /-->
19 | 
20 | <!-- wp:template-part {"slug":"footer","theme":"wds-block-based-theme","tagName":"footer"} /-->
21 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | <!-- wp:template-part {"slug":"header", "tagName":"header"} /-->
 2 | 
 3 | <!-- wp:cover {"minHeight":360,"customGradient":"linear-gradient(253deg,rgba(6,147,227,1) 0%,rgb(84,121,221) 100%)","align":"full"} -->
 4 | <div class="wp-block-cover alignfull has-background-dim has-background-gradient"
 5 |     style="background:linear-gradient(253deg,rgba(6,147,227,1) 0%,rgb(84,121,221) 100%);min-height:360px">
 6 |     <div class="wp-block-cover__inner-container">
 7 |         <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 8 |         <p class="has-text-align-center has-large-font-size">Index.html Template</p>
 9 |         <!-- /wp:paragraph -->
10 | 
11 |         <!-- wp:paragraph {"align":"center"} -->
12 |         <p class="has-text-align-center"><em>Now you can edit your entire site!</em></p>
13 |         <!-- /wp:paragraph -->
14 |     </div>
15 | </div>
16 | <!-- /wp:cover -->
17 | 
18 | <!-- wp:post-content /-->
19 | 
20 | <!-- wp:template-part {"slug":"sidebar","theme":"wds-block-based-theme"} /-->
21 | 
22 | <!-- wp:template-part {"slug":"footer","theme":"wds-block-based-theme","tagName":"footer"} /-->
23 | 


--------------------------------------------------------------------------------
/theme.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "global": {
 3 |     "presets": {
 4 |       "color": [
 5 |         {
 6 |           "slug": "strong-magenta",
 7 |           "value": "#a156b4"
 8 |         },
 9 |         {
10 |           "slug": "very-light-gray",
11 |           "value": "#f1f1f1"
12 |         }
13 |       ],
14 |       "line-height": [
15 |         {
16 |           "slug": "small",
17 |           "value": "1.3"
18 |         },
19 |         {
20 |           "slug": "medium",
21 |           "value": "2"
22 |         },
23 |         {
24 |           "slug": "large",
25 |           "value": "2.5"
26 |         }
27 |       ],
28 |       "font-size": [
29 |         {
30 |           "slug": "small",
31 |           "value": "0.5rem"
32 |         },
33 |         {
34 |           "slug": "regular",
35 |           "value": "1rem"
36 |         },
37 |         {
38 |           "slug": "large",
39 |           "value": "2rem"
40 |         }
41 |       ]
42 |     },
43 | 
44 |     "styles": {
45 |       "color": {
46 |         "background": "var(--wp--preset--color--very-light-gray)"
47 |       }
48 |     }
49 |   },
50 | 
51 |   "core/heading/h2": {
52 |     "styles": {
53 |       "color": {
54 |         "text": "var( --wp--preset--color--strong-magenta )"
55 |       },
56 |       "typography": {
57 |         "fontSize": "var(--wp--preset--font-size--large)",
58 |         "lineHeight": "var(--wp--preset--line-height--medium)"
59 |       }
60 |     }
61 |   },
62 | 
63 |   "core/paragraph": {
64 |     "styles": {
65 |       "typography": {
66 |         "fontSize": "calc(1px * var( --wp--preset--font-size--regular)"
67 |       }
68 |     }
69 |   },
70 | 
71 |   "core/group": {
72 |     "styles": {
73 |       "color": {
74 |         "background": "#ffffff"
75 |       }
76 |     }
77 |   }
78 | }
79 | 


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