|
| 1 | +--- |
| 2 | +id: architecture-concepts |
| 3 | +title: Architecture concepts |
| 4 | +--- |
| 5 | + |
| 6 | +## Project structure |
| 7 | + |
| 8 | + |
| 9 | +[](https://github.com/infinum/eightshift-libs) |
| 10 | + |
| 11 | +Eightshift Development Kit follows a strict project structure to support autoloading, dependency injection and `wp boilerplate` commands, as well as conventions to increase codebase understanding between developers. As an added benefit, following this structure and conventions makes your codebase more consistent and organized. |
| 12 | + |
| 13 | +While Eightshift Development Kit provides required theme files and common theme files such as `style.css` and `functions.php`, they're used differently to what you might expect if you've worked with WordPress themes previously. For instance, `style.css` is used only to register theme metadata, and doesn't contain any actual styles, as they're built using Webpack and use cache busting. `functions.php` simply bootstraps the execution lifecycle. We also provide very basic template partials, such as `single.php`, which you can acommodate to your needs. An idea to consider is replacing some of them with pages that are editable in Gutenberg. |
| 14 | + |
| 15 | +While you'll find some additional configuration files such as `webpack.config.js` in the project root, the majority of your projects codebase should live in the `src` directory, which is autoloaded via Composer following PSR-4 conventions. This implies that every directory under `src` is a namespace under your base namespace (which is your project name), and PHP files inside of those directories are classes in that namespace, with exceptions for filenames that aren't in `StudlyCase`. |
| 16 | + |
| 17 | +An Eightshift Development Kit convention is to structure namespaces around features and functionality, so for instance, all custom post types would be part of the `ProjectName\CustomPostType` namespace. |
| 18 | + |
| 19 | +## Object-oriented paradigms |
| 20 | + |
| 21 | +Eightshift Libs is entirely object-oriented, providing abstract classes for internal library functionality, interfaces you can use to implement certain classes to make use of Eightshift Development Kit features, as well as concrete class implementations for use in projects. |
| 22 | + |
| 23 | +Our use of OOP allows you to extend, modify or even replace Eightshift Development Kit functionality safely, without breaking compatibility or harming your project. |
| 24 | + |
| 25 | +One of the most important interfaces in Eightshift Libs is the `ServiceInterface`. Classes that implement it are called service classes. This isn't a common pattern in PHP OOP. In Eightshift Development Kit, a service class represents a part of the project's functionality and has a `register` method that sets up the action and filter hooks for the service. If you need to add an action or a filter, you should do that in a service class. All your service classes are automatically loaded and can have dependencies injected using dependency injection. |
| 26 | + |
| 27 | +To ensure there are no naming collisions caused by Composer dependencies, we use the [Imposter Composer plugin](https://github.com/infinum/imposter-plugin) to contain them in the `{ProjectName}Vendor` namespace. This comes with a few caveats which you should be aware of, and about which you can read more in the [namespaces chapter](namespaces). |
| 28 | + |
| 29 | +Read more about [namespaces and Imposter](namespaces), [extending classes and service classes](extending-classes), and [dependency injection and autowiring](autowiring). |
| 30 | + |
| 31 | +## Blocks and Components |
| 32 | + |
| 33 | +While Blocks and Components will be covered in much more detail in the [Blocks chapter](blocks), it's worth getting acquainted with the concepts from the start. |
| 34 | + |
| 35 | +In Gutenberg, Blocks are an abstract unit for structuring content. The same applies in Eightshift, with an additional concept of _Components_, which are abstract units for structuring blocks and layouts. |
| 36 | + |
| 37 | +Components are mostly similar to Blocks, with a few key differences: |
| 38 | +* Components can not be inserted by users in Gutenberg, and are not registered as block types |
| 39 | +* Components can be rendered in any context using the `Components::render` method, with arbitrary attribute values passed to them |
| 40 | +* Blocks are usually only rendered using the render callback provided when registering the block |
| 41 | + * Note that in the Eightshift Development Kit, the render callback is provided for you by Eightshift Libs. It automatically adds the wrapper if neccessary and sets up your block view. |
| 42 | +* Components don't implement the `{blockName}-block.js` file |
| 43 | + |
| 44 | +Blocks and Components have the same structure, which makes extracting components from existing blocks trivially easy. |
| 45 | + |
| 46 | +Components can be _composed_ into a block. In other words, blocks can consist out of zero or more components. Component composition is handled in the block manifest, allows you to avoid using InnerBlocks to include functionality shared with other blocks, and serializes component attributes to the block using prefixed attributes for each component instance depending on your manifest definitions. |
| 47 | + |
| 48 | +To learn more about the differences between blocks and components, read [Igor's blog post on Components and blocks](../../blog/components-and-blocks). To learn how to use blocks and components to build your projects, read the [Blocks chapter](blocks). |
| 49 | + |
| 50 | +## The Manifest |
| 51 | + |
| 52 | +`manifest.json` files contain metadata, configurations and variables. |
| 53 | + |
| 54 | +Every Eightshift project has one global `manifest.json` file stored in `src/Blocks/manifest.json`, which contains global settings, properties, and variables. |
| 55 | + |
| 56 | +Furthermore, every Eightshift block, component, and variation has its own manifest file which is used to provide data required for block registration, such as a list of attributes, the block name, and the template for the inserter example. These local manifest files allow you to define arrays of options for attribute values that your blocks or components can consume. Manifest files also allow you to define relationships between attribute values and CSS variable values, which allows you a great deal of power when styling your blocks and components, as well as saves time as you don't have to provide conditional CSS classes. |
| 57 | + |
| 58 | +To learn more about the [global manifest](blocks-global-manifest.md), [block manifest](block-manifest.md), [component manifest](blocks-component-manifest.md) and using [the manifest to provide CSS variables for use in block styling](blocks-styles.md), read the respective articles in the [Blocks chapter](blocks-important). For information about manifest structure, refer to the manifest schemas available in Eightshift Frontend Libs and linked to in the manifest files. |
| 59 | + |
| 60 | +## The directory structure in detail |
| 61 | + |
| 62 | +Your project might contain a different set of namespaces and classes in the `src` folder, depending on what you've included using wp boilerplate commands. |
| 63 | +By default, your project will include the `Blocks`, `Config`, `Enqueue`, `Main`, `Manifest` and `Menu` namespaces. You can include classes from Eightshift Libs to provide additional functionality manually or using wp boilerplate. |
| 64 | + |
| 65 | +This chapter also doesn't cover all of the namespaces and classes in Eightshift Libs, or their use. Check out the source code documentation for all available namespaces and classes. |
| 66 | + |
| 67 | +- src |
| 68 | + - Blocks |
| 69 | + - assets |
| 70 | + - components |
| 71 | + - custom |
| 72 | + - variations |
| 73 | + - wrapper |
| 74 | + - Columns |
| 75 | + - Config |
| 76 | + - CustomMeta |
| 77 | + - CustomPostType |
| 78 | + - CustomTaxonomy |
| 79 | + - Enqueue |
| 80 | + - Admin |
| 81 | + - Blocks |
| 82 | + - Theme |
| 83 | + - Exception |
| 84 | + - Helpers |
| 85 | + - I18n |
| 86 | + - Main |
| 87 | + - Manifest |
| 88 | + - Media |
| 89 | + - Menu |
| 90 | + - ModifyAdminAppearance |
| 91 | + - Plugin |
| 92 | + - Rest |
| 93 | + - ThemeOptions |
| 94 | + - View |
| 95 | +- .storybook |
| 96 | +- .gitignore |
| 97 | +- .eslintignore |
| 98 | +- .eslintrc |
| 99 | +- .stylelintrc |
| 100 | +- babel.config.js |
| 101 | +- composer.json |
| 102 | +- composer.lock |
| 103 | +- package-lock.json |
| 104 | +- package.json |
| 105 | +- phpcs.xml.dist |
| 106 | +- postcss.config.js |
| 107 | +- README.md |
| 108 | +- webpack.config.js |
| 109 | + |
| 110 | +#### Blocks |
| 111 | + |
| 112 | +The Blocks namespace contains the Blocks class used for block registration. This directory also contains shared assets, components, blocks, variations, and the wrapper. |
| 113 | + |
| 114 | +Read about blocks in detail in the [Blocks chapter](blocks). |
| 115 | + |
| 116 | +#### Columns |
| 117 | + |
| 118 | +This namespace contains all the custom admin listing columns hooks in your project. These include listing column hooks for post types, taxonomy, and user lists, such as `manage_{$post_type}_posts_columns`. |
| 119 | + |
| 120 | +#### Config |
| 121 | + |
| 122 | +The Config class provides getter methods for your project's configuration, such as `getProjectName` or `getProjectVersion`. |
| 123 | + |
| 124 | +#### CustomMeta |
| 125 | + |
| 126 | +This class contains all the custom meta hooks for your project. |
| 127 | + |
| 128 | +#### CustomPostType |
| 129 | + |
| 130 | +This namespace contains classes that register all custom post type hooks for your project. For better code consistency and to save time on boilerplating, Eightshift Development Kit provides an example class implementation you can use with `wp boilerplate create_post_type`. |
| 131 | + |
| 132 | +#### CustomTaxonomy |
| 133 | + |
| 134 | +This namespace contains classes that register all custom taxonomy hooks for your project. For better code consistency and to save time on boilerplating, Eightshift Development Kit provides an example class implementation you can use with `wp boilerplate create_taxonomy`. |
| 135 | + |
| 136 | +#### Enqueue |
| 137 | + |
| 138 | +These Enqueue namespace classes handle loading JavaScript and CSS assets, depending on the location you want to use it: |
| 139 | +- **Admin** - Used in the admin (not block editor) panel. You can find the files inside the `assets` folder with the `-admin` suffix. |
| 140 | +- **Blocks** - Used in the block editor. You can find the files inside the `src/Blocks/assets` folder. As blocks are complicated, we have files loaded only in the admin-editor part of the project, those files have an `-editor` suffix. The rest of the files with no suffix load on the admin-editor part and the project's front end. |
| 141 | +- **Theme** - Used in the theme (frontend) part of your project. You can find the files inside the `assets` folder with no suffix. You would use these files for the assets related to your project that is not associated with components and blocks. These files are rarely used, as styles and JavaScript functionality are usually provided at component, block, or wrapper levels. |
| 142 | + |
| 143 | +Using any of these classes is optional, and you can use only what you need. The `wp boilerplate setup_theme` command will set up all of the three classes already implemented. Keep in mind that Enqueue classes work in combination with the Webpack build of your project. |
| 144 | + |
| 145 | +All of the asset files mentioned are prefixed with `application`. If you don't like the prefix, you can change it by providing project overrides for constants used in Eightshift Libs. If you change the file names, you must make changes to the Webpack build process as well. For modifying the Webpack configuration, read the [Webpack chapter](webpack). |
| 146 | + |
| 147 | +#### Exception |
| 148 | + |
| 149 | +This namespace contains all exceptions that can be thrown from the project. |
| 150 | + |
| 151 | +#### Helpers |
| 152 | + |
| 153 | +All the backend helpers provided by Eightshift Libs are part of the Helpers namespace. Generally, you can use them from Eightshift Libs without extending or modifying them. |
| 154 | + |
| 155 | +#### I18n |
| 156 | + |
| 157 | +Classes in this namespace are used to define all hooks related to internationalization and localization. For more information about i18n and l10n, check out [Tips and tricks](tips-tricks). |
| 158 | + |
| 159 | +#### Main |
| 160 | + |
| 161 | +The Main namespace contains the `Main` class, which sets up the dependency injection container and autowiring using `AbstractMain` and `Autowiring` classes. For most projects, `Main` can be used automagically without any work on your part, but as with all of the Eightshift Development Kit, you can extend it to suit your needs. |
| 162 | + |
| 163 | +You can provide manual service classes here as well. Learn more in the [autowiring chapter](autowiring). |
| 164 | + |
| 165 | +#### Manifest |
| 166 | + |
| 167 | +The Manifest namespace provides the `manifest.json` file location and helpers to return the full path for a specific asset. Learn more about the manifest in the [manifest chapter](manifest). |
| 168 | + |
| 169 | +#### Media |
| 170 | + |
| 171 | +The Media namespace is used to add custom implementations for media, such as adding custom image sizes, enabling SVG image support, etc. By default, it registers theme support for title tags, HTML5 and post thumbnails. |
| 172 | + |
| 173 | +#### Menu |
| 174 | + |
| 175 | +This class is used to register menu positions. |
| 176 | + |
| 177 | +#### ModifyAdminAppearance |
| 178 | + |
| 179 | +This class is used to change admin appearance. We use it to change the admin color palette depending on the environment. |
| 180 | + |
| 181 | +#### Plugin |
| 182 | + |
| 183 | +This namespace is used only in the plugin boilerplate and holds classes required for activation and deactivation of the plugin. |
| 184 | + |
| 185 | +#### Rest |
| 186 | + |
| 187 | +The Rest namespace provides classes for handling REST API fields and routes. This is covered in more detail in the [REST chapter](rest). |
| 188 | + |
| 189 | +#### ThemeOptions |
| 190 | + |
| 191 | +This namespace is used to add admin menu configuration panels such as _Theme Options_, usually using ACF. |
| 192 | + |
| 193 | +#### View |
| 194 | + |
| 195 | +This namespace is used to add filters used when escaping unsafe tags using `wp_kses_post` and `wp_kses` functions. |
| 196 | + |
| 197 | +#### .storybook |
| 198 | + |
| 199 | +This folder contains all of the files necessary to run the storybook in your project. Read more [about the Storybook project](https://storybook.js.org/). |
| 200 | + |
| 201 | +#### .gitignore |
| 202 | + |
| 203 | +As the name implies, this file is used to define restrictions to which files Git watches. Read more [about Git](https://git-scm.com/). |
| 204 | + |
| 205 | +#### .eslintignore |
| 206 | + |
| 207 | +Defines files and folders which ESLint should ignore when linting. |
| 208 | + |
| 209 | +#### .eslintrc |
| 210 | + |
| 211 | +Provides definitions used for linting JavaScript files. Read more [about ESLint](https://eslint.org/). |
| 212 | + |
| 213 | +#### .stylelintrc |
| 214 | + |
| 215 | +Provides definitions used for linting SCSS/CSS stylesheets. Read more [about Stylelint](https://stylelint.io/). |
| 216 | + |
| 217 | +#### babel.config.js |
| 218 | + |
| 219 | +Provides Babel configuration, which determines how your JavaScript code will be compiled, what standard you will use, and much more. Read more [about Babel](https://babeljs.io/). |
| 220 | + |
| 221 | +#### composer.json |
| 222 | + |
| 223 | +Contains a list of your project's Composer dependencies, as well as project metadata and configuration. Dependencies can be added and installed using `composer install`. Read more [about Composer](https://getcomposer.org/). |
| 224 | + |
| 225 | +#### composer.lock |
| 226 | + |
| 227 | +Lock files are used to set the package version to the exact release. This ensures that everyone has the same package version when installing. |
| 228 | + |
| 229 | +#### package-lock.json |
| 230 | + |
| 231 | +The same as `composer.lock`, but for node_modules. |
| 232 | + |
| 233 | +#### package.json |
| 234 | + |
| 235 | +Contains a list of your project's npm dependencies, as well as project metadata and configuration. Dependencies can be added and installed using `npm install`. Read more [about npm](https://nodejs.dev/). |
| 236 | + |
| 237 | +#### phpcs.xml.dist |
| 238 | + |
| 239 | +Provides definitions used for linting PHP files. Read more [about PHPCS](https://github.com/squizlabs/PHP_CodeSniffer). |
| 240 | + |
| 241 | +#### postcss.config.js |
| 242 | + |
| 243 | +PostCSS works in collaboration with Webpack and defines what additional plugins you are going to use when building your CSS files. Read more [about PostCSS](https://postcss.org/). |
| 244 | + |
| 245 | +#### webpack.config.js |
| 246 | + |
| 247 | +`webpack.config.js` provides Webpack configuration, used when building your JavaScript and CSS files. This is covered in more detail in the [Webpack chapter](webpack). |
0 commit comments