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
  ...

Author: iruzevic

website/docs/additional-libraries.md

@@ -0,0 +1,78 @@
+---
+id: additional-libraries
+title: Additional Libraries
+---
+
+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.
+
+## Eightshift Boilerplate
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-boilerplate.svg?style=for-the-badge)](https://github.com/infinum/eightshift-boilerplate)
+
+All the tools you need to start building a modern WordPress project using the latest front-end development tools.
+
+* [Documentation](/eightshift-docs/docs/welcome)
+* [Github](https://github.com/infinum/eightshift-boilerplate)
+
+## Eightshift Libs
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-libs.svg?style=for-the-badge)](https://github.com/infinum/eightshift-libs)
+
+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.
+
+* [Documentation](/eightshift-docs/docs/eightshift-libs)
+* [Github](https://github.com/infinum/eightshift-libs)
+
+## Eightshift FrontEnd Libs
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-frontend-libs.svg?style=for-the-badge)](https://github.com/infinum/eightshift-frontend-libs)
+
+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.
+
+* [Documentation](/eightshift-docs/docs/eightshift-frontend-libs)
+* [Github](https://github.com/infinum/eightshift-frontend-libs)
+
+## Eightshift Docs
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-docs.svg?style=for-the-badge)](https://github.com/infinum/eightshift-docs)
+
+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/).
+
+* [Documentation](/eightshift-docs/docs/welcome)
+* [Github](https://github.com/infinum/eightshift-docs)
+
+## Eightshift Storybook
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-storybook.svg?style=for-the-badge)](https://github.com/infinum/eightshift-storybook)
+
+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.
+
+* [Documentation](/eightshift-docs/docs/basics/blocks-storybook)
+* [Github](https://github.com/infinum/eightshift-storybook)
+
+## Eightshift Forms
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-forms.svg?style=for-the-badge)](https://github.com/infinum/eightshift-forms)
+
+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.
+
+* [Documentation](https://github.com/infinum/eightshift-forms/wiki)
+* [Github](https://github.com/infinum/eightshift-forms)
+
+## Eightshift Dashboard Monitor
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-dashboard-monitor.svg?style=for-the-badge)](https://github.com/infinum/eightshift-dashboard-monitor)
+
+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.
+
+* [Documentation](https://github.com/infinum/eightshift-dashboard-monitor/wiki)
+* [Github](https://github.com/infinum/eightshift-dashboard-monitor)
+
+## Eightshift Coding Standard
+
+[![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-coding-standards.svg?style=for-the-badge)](https://github.com/infinum/eightshift-coding-standards)
+
+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.
+
+* [Documentation](https://github.com/infinum/eightshift-coding-standards/wiki)
+* [Github](https://github.com/infinum/eightshift-coding-standards)

website/docs/basics/autowiring.md

@@ -1,7 +1,6 @@
 ---
 id: autowiring
 title: Autowiring
-sidebar_label: Autowiring
 ---
 
 [![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:
 - PSR-4 should detect your new class if you followed the PSR-4 naming standard.
 - The new class is added to the `classmap` array inside the `vendor` folder.
 - Autowiring class reads the new class, checks if your class has any class dependencies, and injects them.
-- It just works.
+- And it just works.
 
-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.
+**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.
 
 ### What if I have to mock or manually call a class?
 
@@ -39,7 +38,7 @@ We can think of these scenarios where you want to load a class manually:
 - Your classes have a custom structure and autowiring can't resolve it.
 - You want to provide a primitive parameter (`string`, `int`, etc.) inside a constructor method.
 
-In those cases, you can manually provide your DI container with the implementation using the `getServiceClasses` method inside the `src>Main>Main` class.
+In those cases, you can manually provide your DI container with the implementation using the `getServiceClasses` method inside the `src>Main>Main.php` class.
 
 Provide the method and add your custom implementation like this:
 
@@ -57,7 +56,9 @@ Provide the method and add your custom implementation like this:
     return [
 
       // If you are using a class as a DI.
-      ProjectNamespace\Rest\Routes\DocumentsRoute::class => [ProjectNamespace\Query\Documents\QueryDocuments::class],
+      ProjectNamespace\Rest\Routes\DocumentsRoute::class => [
+        ProjectNamespace\Query\Documents\QueryDocuments::class
+      ],
 
       // If you just want to include a simple class with no DI.
       ProjectNamespace\CoolFolder\CoolClass::class,
@@ -72,15 +73,15 @@ This just means that you are not using dependency injection (since you have noth
 
 ### What if my class has a **primitive parameter** (`string`, `int`, etc.) inside a constructor method?
 
-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).
+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).
 
 ### What if my class does have another class as a parameter inside a constructor method?
 
 This works out of the box, but you shouldn't really do this.
 
 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.
 
-**You should always code against interfaces and not implementation.**
+> You should always code against interfaces and not implementation.
 
 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.
 

website/docs/basics/backend.md

@@ -1,7 +1,6 @@
 ---
 id: backend
 title: Backend
-sidebar_label: Backend
 ---
 
 [![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

@@ -1,15 +1,12 @@
 ---
 id: basics
 title: Basics
-sidebar_label: Basics
 ---
 
 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.
 
 Now that everything is different, we must adapt to the changes as well.
 
-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.
-
 ## Let's finally start with documentation
 
 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

@@ -1,7 +1,6 @@
 ---
 id: block-manifest
 title: Block Manifest
-sidebar_label: Block Manifest
 ---
 
 [![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
       "type": "number",
       "default": 2
     }
-  }
+  },
+  "hasInnerBlocks": false,
+  "components": {},
+  "responsiveAttributes": {},
+  "variables": {},
+  "options": {}
 }
 ```
 
@@ -67,7 +71,7 @@ This key provides you the ability to give an example mockup of your attributes.
 
 ### attributes
 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.
-We are using the same structure as described in the [block editor documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/).
+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).
 
 ### hasInnerBlocks
 `default: false`
@@ -86,6 +90,25 @@ If the `hasInnerBlocks` key is set to true, the block's `save` method for inner
 
 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.
 
+### responsiveAttributes
+
+*custom feature*
+
+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.
+
+### variables
+
+*custom feature*
+
+This key is used to provide output for CSS variables. Please check [this chapter](blocks-styles) for more details.
+
+### options
+
+*custom feature*
+
+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.
+
+
 ## The power of manifest.json
 
 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

@@ -1,7 +1,6 @@
 ---
 id: block-structure
 title: Block Structure
-sidebar_label: Block Structure
 ---
 
 [![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
   * heading-transforms.js
   * manifest.json
 
+For example, you can check the [storybook](https://infinum.github.io/eightshift-docs/storybook).
+
 ### assets
 
 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
 
 Corrections in the grid layout are necessary because the block editor adds additional HTML and we can't change it.
 
-Please read the [writing styles](writing-styles) chapter for more details.
+Please read the [block styles](blocks-styles) chapter for more details.
 
 _This file is optional_.
 
 ### heading-style.scss
 Holds all the front-end and editor styling for the component.
 
-Please read the [writing styles](writing-styles) chapter for more details.
+Please read the [block styles](blocks-styles) chapter for more details.
 
 _This file is optional_.
 

website/docs/basics/blocks-attributes.md

@@ -1,7 +1,6 @@
 ---
 id: blocks-attributes
 title: Attributes
-sidebar_label: Attributes
 ---
 
 [![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
 You can also look at this from the Reacts perspective: setting the entire object every time the key changes is bad for performance.
 
 Yes, you can use objects, but we recommend using them only when you want to store multiple keys simultaneously.
+
+### Structure 
+
+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).
+
+Block example:
+```json
+{
+  "blockName": "heading",
+  "attributes": {
+    "headingContent": {
+      "type": "string"
+    },
+    "headingLevel": {
+      "type": "integer",
+      "default": 2
+    }
+  }
+}
+```
+
+or
+
+```json
+{
+  "blockName": "intro",
+  "attributes": {
+    "introContent": {
+      "type": "string"
+    },
+    "introLevel": {
+      "type": "integer",
+      "default": 2
+    }
+  }
+}
+```
+
+Component example:
+```json
+{
+  "componentName": "heading",
+  "attributes": {
+    "headingContent": {
+      "type": "string"
+    },
+    "headingLevel": {
+      "type": "integer",
+      "default": 2
+    }
+  }
+}
+```
+
+or
+
+```json
+{
+  "componentName": "description",
+  "attributes": {
+    "descriptionContent": {
+      "type": "string"
+    },
+    "descriptionLevel": {
+      "type": "integer",
+      "default": 2
+    }
+  }
+}
+```
+
+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:
+
+```json
+{
+  "componentName": "intro-heading",
+  "attributes": {
+    "introHeadingContent": {
+      "type": "string"
+    },
+    "introHeadingLevel": {
+      "type": "integer",
+      "default": 2
+    }
+  }
+}
+```