Skip to content

Commit 4745844

Browse files
committed
Merge branch 'release/6.0.0'
* release/6.0.0: (56 commits) Apply suggestions from code review Update website/docs/basics/tips-tricks.md Update website/docs/basics/tips-tricks.md Update website/docs/basics/tips-tricks.md updating final fixes adding legacy badge to legacy pages adding legacy badge to legacy pages updating styles updating pr fixes Apply suggestions from code review updating components in blocks Update website/docs/basics/blocks-attributes.md updating storybook updating variation updating wrapper updatin additional copy Apply suggestions from code review Update website/docs/basics/block-structure.md Update website/docs/basics/block-manifest.md updating attributes ...
2 parents 2fb5473 + 33a932e commit 4745844

File tree

167 files changed

+6852
-1302
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

167 files changed

+6852
-1302
lines changed

website/docs/additional-libraries.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
id: additional-libraries
3+
title: Additional Libraries
4+
---
5+
6+
As a development company, we make a lot of helpful stuff for all of our projects. We will keep the list of them here; maybe you will find them useful.
7+
8+
## Eightshift Boilerplate
9+
10+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-boilerplate.svg?style=for-the-badge)](https://github.com/infinum/eightshift-boilerplate)
11+
12+
All the tools you need to start building a modern WordPress project using the latest front-end development tools.
13+
14+
* [Documentation](/eightshift-docs/docs/welcome)
15+
* [Github](https://github.com/infinum/eightshift-boilerplate)
16+
17+
## Eightshift Libs
18+
19+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-libs.svg?style=for-the-badge)](https://github.com/infinum/eightshift-libs)
20+
21+
This library is aimed at bringing the modern back-end development tools to the [Eightshift Boilerplate](https://github.com/infinum/eightshift-boilerplate) or [Eightshift Boilerplate Plugin](https://github.com/infinum/eightshift-boilerplate-plugin), but you can use it on any WordPress project.
22+
23+
* [Documentation](/eightshift-docs/docs/eightshift-libs)
24+
* [Github](https://github.com/infinum/eightshift-libs)
25+
26+
## Eightshift FrontEnd Libs
27+
28+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-frontend-libs.svg?style=for-the-badge)](https://github.com/infinum/eightshift-frontend-libs)
29+
30+
This library is meant to bring the modern front-end development tools to the [Eightshift Boilerplate](https://github.com/infinum/eightshift-boilerplate) or [Eightshift Boilerplate Plugin](https://github.com/infinum/eightshift-boilerplate-plugin), but you can use it on any WordPress project.
31+
32+
* [Documentation](/eightshift-docs/docs/eightshift-frontend-libs)
33+
* [Github](https://github.com/infinum/eightshift-frontend-libs)
34+
35+
## Eightshift Docs
36+
37+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-docs.svg?style=for-the-badge)](https://github.com/infinum/eightshift-docs)
38+
39+
This library hosts all the documentation you have read so far and all of these cool layout pages. We made it on [Docusaurus v2](https://v2.docusaurus.io/).
40+
41+
* [Documentation](/eightshift-docs/docs/welcome)
42+
* [Github](https://github.com/infinum/eightshift-docs)
43+
44+
## Eightshift Storybook
45+
46+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-storybook.svg?style=for-the-badge)](https://github.com/infinum/eightshift-storybook)
47+
48+
This library hosts all the packages necessary for loading Storybook in your project. We are making updates as a new core version comes out and tag the release according to the core release.
49+
50+
* [Documentation](/eightshift-docs/docs/basics/blocks-storybook)
51+
* [Github](https://github.com/infinum/eightshift-storybook)
52+
53+
## Eightshift Forms
54+
55+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-forms.svg?style=for-the-badge)](https://github.com/infinum/eightshift-forms)
56+
57+
This plugin is made on our Eightshift Boilerplate. It lets you create a cool-looking form using our custom block and much more. We are implementing all our custom integrations, such as Salesforce, Mailchimp, Microsoft Dynamics CRM, Buckaroo, Emails, etc.
58+
59+
* [Documentation](https://github.com/infinum/eightshift-forms/wiki)
60+
* [Github](https://github.com/infinum/eightshift-forms)
61+
62+
## Eightshift Dashboard Monitor
63+
64+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-dashboard-monitor.svg?style=for-the-badge)](https://github.com/infinum/eightshift-dashboard-monitor)
65+
66+
This plugin lets you connect all your projects safely and monitor all plugin/theme/core versions. You can assign the developer to a project and notify them once anything in that project is out of date.
67+
68+
* [Documentation](https://github.com/infinum/eightshift-dashboard-monitor/wiki)
69+
* [Github](https://github.com/infinum/eightshift-dashboard-monitor)
70+
71+
## Eightshift Coding Standard
72+
73+
[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-coding-standards.svg?style=for-the-badge)](https://github.com/infinum/eightshift-coding-standards)
74+
75+
This package contains [Eightshift Coding Standards for WordPress](https://handbook.infinum.co/books/wordpress) for [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer/). The package intends to have a unified code across the WordPress projects we do at Eightshift and help with the code review.
76+
77+
* [Documentation](https://github.com/infinum/eightshift-coding-standards/wiki)
78+
* [Github](https://github.com/infinum/eightshift-coding-standards)

website/docs/basics/autowiring.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
id: autowiring
33
title: Autowiring
4-
sidebar_label: Autowiring
54
---
65

76
[![docs-source](https://img.shields.io/badge/source-eigthshift--libs-blue?style=for-the-badge&logo=php&labelColor=2a2a2a)](https://github.com/infinum/eightshift-libs)
@@ -26,9 +25,9 @@ Here is a quick overview of how this works:
2625
- PSR-4 should detect your new class if you followed the PSR-4 naming standard.
2726
- The new class is added to the `classmap` array inside the `vendor` folder.
2827
- Autowiring class reads the new class, checks if your class has any class dependencies, and injects them.
29-
- It just works.
28+
- And it just works.
3029

31-
To put it shortly: just add a new class (that is PSR-4 compliant) with or without some class dependencies and everything will be automatically resolved/injected.
30+
**To put it shortly**: just add a new class (that is PSR-4 compliant) with or without some class dependencies and everything will be automatically resolved/injected.
3231

3332
### What if I have to mock or manually call a class?
3433

@@ -39,7 +38,7 @@ We can think of these scenarios where you want to load a class manually:
3938
- Your classes have a custom structure and autowiring can't resolve it.
4039
- You want to provide a primitive parameter (`string`, `int`, etc.) inside a constructor method.
4140

42-
In those cases, you can manually provide your DI container with the implementation using the `getServiceClasses` method inside the `src>Main>Main` class.
41+
In those cases, you can manually provide your DI container with the implementation using the `getServiceClasses` method inside the `src>Main>Main.php` class.
4342

4443
Provide the method and add your custom implementation like this:
4544

@@ -57,7 +56,9 @@ Provide the method and add your custom implementation like this:
5756
return [
5857

5958
// If you are using a class as a DI.
60-
ProjectNamespace\Rest\Routes\DocumentsRoute::class => [ProjectNamespace\Query\Documents\QueryDocuments::class],
59+
ProjectNamespace\Rest\Routes\DocumentsRoute::class => [
60+
ProjectNamespace\Query\Documents\QueryDocuments::class
61+
],
6162

6263
// If you just want to include a simple class with no DI.
6364
ProjectNamespace\CoolFolder\CoolClass::class,
@@ -72,15 +73,15 @@ This just means that you are not using dependency injection (since you have noth
7273

7374
### What if my class has a **primitive parameter** (`string`, `int`, etc.) inside a constructor method?
7475

75-
If your class **has** a primitive parameter defined in the constructor method, autowiring will **not know** how to handle this because you manually need to provide the primitive parameters at the point of usage. You can find more information about that [here](#what-if-i-have-to-mock-or-manually-call-a-class).
76+
If your class **has** a primitive parameter defined in the constructor method, autowiring will **not know** how to handle this so you must manually provide the primitive parameters at the point of usage. You can find more information about that [here](#what-if-i-have-to-mock-or-manually-call-a-class).
7677

7778
### What if my class does have another class as a parameter inside a constructor method?
7879

7980
This works out of the box, but you shouldn't really do this.
8081

8182
A good coding practice is that your class should never depend on the concrete class implementation because you have tightly coupled your class to another class. This makes it hard to test and your code becomes hard to modify. Imagine that you have put a concrete implementation as a dependency, only to get feedback from the client that you need to change that implementation for a completely different one. Making the changes means that you'll need to track all the places in your codebase where you have used some functionality from this class, and change it completely.
8283

83-
**You should always code against interfaces and not implementation.**
84+
> You should always code against interfaces and not implementation.
8485
8586
We can't stress this enough because as your project grows, so will your headaches. Also, when you start testing your code, that is when your hair will begin to fall off. We recommend reading Uncle Bob Martin's [Clean Code](http://cleancoder.com/products). That will save you a lot of sleepless nights, and you'll learn tons of tips and tricks for writing clean code.
8687

website/docs/basics/backend.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
id: backend
33
title: Backend
4-
sidebar_label: Backend
54
---
65

76
[![docs-source](https://img.shields.io/badge/source-eigthshift--libs-blue?style=for-the-badge&logo=php&labelColor=2a2a2a)](https://github.com/infinum/eightshift-libs)

website/docs/basics/basics.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
---
22
id: basics
33
title: Basics
4-
sidebar_label: Basics
54
---
65

76
Before WordPress 5.0 release, the themes were mostly PHP based on some JavaScript and CSS. Now it's a bit different because we have PHP in the core, JavaScript (specifically React.js) in the block editor, and some styles in the editor and the theme parts of the website.
87

98
Now that everything is different, we must adapt to the changes as well.
109

11-
As you already saw in the previous chapters about [Eightshift Libs](eightshift-libs.md) and [Eightshift Frontend Libs](eightshift-frontend-libs.md), we have two different technologies in out boilerplate, so we must separate the documentation the same way.
12-
1310
## Let's finally start with documentation
1411

1512
We took our time to set up a bunch of WP-CLI commands. That should help you set up everything and use all our features, without worrying about correct names, files, and organization. You can find out more about it on this link:

website/docs/basics/block-manifest.md

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
id: block-manifest
33
title: Block Manifest
4-
sidebar_label: Block Manifest
54
---
65

76
[![docs-source](https://img.shields.io/badge/source-eigthshift--frontend--libs-yellow?style=for-the-badge&logo=javascript&labelColor=2a2a2a)](https://github.com/infinum/eightshift-frontend-libs/tree/develop/blocks/init/src/blocks/)
@@ -41,7 +40,12 @@ This file contains all the configuration required for a block to work. It's used
4140
"type": "number",
4241
"default": 2
4342
}
44-
}
43+
},
44+
"hasInnerBlocks": false,
45+
"components": {},
46+
"responsiveAttributes": {},
47+
"variables": {},
48+
"options": {}
4549
}
4650
```
4751

@@ -67,7 +71,7 @@ This key provides you the ability to give an example mockup of your attributes.
6771

6872
### attributes
6973
Attributes key is an object of attributes where you define and set up default values for a block. These attributes are then passed in the editor as props, and the PHP view part in the `$attributes` variable.
70-
We are using the same structure as described in the [block editor documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/).
74+
We are using the same structure as described in the [block editor documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/). For more details please check [this chapter](blocks-attributes).
7175

7276
### hasInnerBlocks
7377
`default: false`
@@ -86,6 +90,25 @@ If the `hasInnerBlocks` key is set to true, the block's `save` method for inner
8690

8791
This key gives you the ability to use component attributes in your block without mapping all the component's attributes every time. Please check [this chapter](blocks-component-in-block) for more details.
8892

93+
### responsiveAttributes
94+
95+
*custom feature*
96+
97+
This key is used to combine multiple attributes with the similar name for the responsive breakpoints. Please check [this chapter](blocks-styles) for more details.
98+
99+
### variables
100+
101+
*custom feature*
102+
103+
This key is used to provide output for CSS variables. Please check [this chapter](blocks-styles) for more details.
104+
105+
### options
106+
107+
*custom feature*
108+
109+
This key is used to provide options used in the Block Editor options for components like SelectControl or RangeControl. With this key, you can pass options and change them depending on the component used. Please check [this chapter](blocks-component-in-block) for more details.
110+
111+
89112
## The power of manifest.json
90113

91114
As described before we use `manifest.json` to share stuff across PHP / JS / SCSS so you can easily see its power.

website/docs/basics/block-structure.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
id: block-structure
33
title: Block Structure
4-
sidebar_label: Block Structure
54
---
65

76
[![docs-source](https://img.shields.io/badge/source-eigthshift--frontend--libs-yellow?style=for-the-badge&logo=javascript&labelColor=2a2a2a)](https://github.com/infinum/eightshift-frontend-libs/tree/develop/blocks/init/src/blocks/)
@@ -32,6 +31,8 @@ We suggest you always use the full name and never abbreviate the block name. If
3231
* heading-transforms.js
3332
* manifest.json
3433

34+
For example, you can check the [storybook](https://infinum.github.io/eightshift-docs/storybook).
35+
3536
### assets
3637

3738
In this folder, you'll define all the custom JavaScript functionality for your block that will only be used on the front end of the application. You must provide the `index.js` file in this folder, as a starting point, and the rest is up to you. We recommend using [JavaScript dynamic imports](dynamic-import) for all your front-end scripts. This ensures that the JavaScript is only loaded in the application when it is used and not before. By using dynamic import, you optimize your application and make it load faster.
@@ -67,14 +68,14 @@ Holds only the editor styling for the block. You should be using this file to ov
6768

6869
Corrections in the grid layout are necessary because the block editor adds additional HTML and we can't change it.
6970

70-
Please read the [writing styles](writing-styles) chapter for more details.
71+
Please read the [block styles](blocks-styles) chapter for more details.
7172

7273
_This file is optional_.
7374

7475
### heading-style.scss
7576
Holds all the front-end and editor styling for the component.
7677

77-
Please read the [writing styles](writing-styles) chapter for more details.
78+
Please read the [block styles](blocks-styles) chapter for more details.
7879

7980
_This file is optional_.
8081

website/docs/basics/blocks-attributes.md

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
id: blocks-attributes
33
title: Attributes
4-
sidebar_label: Attributes
54
---
65

76
[![docs-source](https://img.shields.io/badge/source-eigthshift--frontend--libs-yellow?style=for-the-badge&logo=javascript&labelColor=2a2a2a)](https://github.com/infinum/eightshift-frontend-libs/tree/develop/blocks/init/src/blocks/)
@@ -13,3 +12,90 @@ The reason for this is that you can't control what key of that object is stored
1312
You can also look at this from the Reacts perspective: setting the entire object every time the key changes is bad for performance.
1413

1514
Yes, you can use objects, but we recommend using them only when you want to store multiple keys simultaneously.
15+
16+
### Structure
17+
18+
All attributes in the block/component must begin with the exact same prefix as it is defined in the `blockName` or `componentName`. The reason behind this naming standard is that our helpers can automatically resolve and know what prefix to use when renaming the component name in the dependency tree. For more details about this feature please check [this chapter](blocks-component-in-block).
19+
20+
Block example:
21+
```json
22+
{
23+
"blockName": "heading",
24+
"attributes": {
25+
"headingContent": {
26+
"type": "string"
27+
},
28+
"headingLevel": {
29+
"type": "integer",
30+
"default": 2
31+
}
32+
}
33+
}
34+
```
35+
36+
or
37+
38+
```json
39+
{
40+
"blockName": "intro",
41+
"attributes": {
42+
"introContent": {
43+
"type": "string"
44+
},
45+
"introLevel": {
46+
"type": "integer",
47+
"default": 2
48+
}
49+
}
50+
}
51+
```
52+
53+
Component example:
54+
```json
55+
{
56+
"componentName": "heading",
57+
"attributes": {
58+
"headingContent": {
59+
"type": "string"
60+
},
61+
"headingLevel": {
62+
"type": "integer",
63+
"default": 2
64+
}
65+
}
66+
}
67+
```
68+
69+
or
70+
71+
```json
72+
{
73+
"componentName": "description",
74+
"attributes": {
75+
"descriptionContent": {
76+
"type": "string"
77+
},
78+
"descriptionLevel": {
79+
"type": "integer",
80+
"default": 2
81+
}
82+
}
83+
}
84+
```
85+
86+
If you have a block/component that contains multiple words you should name it with a dash just like the block/component folder name, but the attributes must follow the `camelCase` naming standard like this:
87+
88+
```json
89+
{
90+
"componentName": "intro-heading",
91+
"attributes": {
92+
"introHeadingContent": {
93+
"type": "string"
94+
},
95+
"introHeadingLevel": {
96+
"type": "integer",
97+
"default": 2
98+
}
99+
}
100+
}
101+
```

0 commit comments

Comments
 (0)