diff --git a/website/docs/additional-libraries.md b/website/docs/additional-libraries.md index a5a5f21ec..0f107316d 100644 --- a/website/docs/additional-libraries.md +++ b/website/docs/additional-libraries.md @@ -53,7 +53,7 @@ This library hosts all the packages necessary for loading Storybook in your proj ## Code quality tools -### Eightshift Coding Standard +### Eightshift Coding Standards [![GitHub tag](https://img.shields.io/github/tag/infinum/eightshift-coding-standards.svg?style=for-the-badge)](https://github.com/infinum/eightshift-coding-standards) diff --git a/website/docs/basics/block-manifest.md b/website/docs/basics/block-manifest.md index 312c624c4..9b35aed03 100644 --- a/website/docs/basics/block-manifest.md +++ b/website/docs/basics/block-manifest.md @@ -143,5 +143,5 @@ import manifest from 'manifest.json'; ``` As you can see, you can share anything this way. Here are some additional examples: -* [Social Links](https://github.com/infinum/eightshift-frontend-libs/blob/develop/blocks/init/src/Blocks/components/social-links/manifest.json) +* [Social Networks](https://github.com/infinum/eightshift-frontend-libs/blob/develop/blocks/init/src/Blocks/components/social-networks/manifest.json) * [Button](https://github.com/infinum/eightshift-frontend-libs/blob/develop/blocks/init/src/Blocks/components/button/manifest.json) diff --git a/website/docs/basics/blocks-component-in-block.md b/website/docs/basics/blocks-component-in-block.md index 47f2d9b28..33fc62279 100644 --- a/website/docs/basics/blocks-component-in-block.md +++ b/website/docs/basics/blocks-component-in-block.md @@ -29,11 +29,11 @@ As we described in the [block manifest](block-manifest) chapter each block/compo } ``` -Components key is an object that can have multiple items added. +Components key is an object that can have multiple items added. > Key represents the name that is going to be used for this component in this block/component and the prefix used in the attributes (more on this later). -> Value represents the real component name that you have in your project. +> Value represents the real component name that you have in your project. > Each key and value names can be written in the kebab-case or camelCase but we recommend using camelCase. @@ -45,7 +45,7 @@ Components key is an object that can have multiple items added. } ``` -This block/component uses two components, one is heading and the other is paragraphy and they are using the default names. +This block/component uses two components, one is heading and the other is paragraph and they are using the default names. **Multiple components set up with the components of the same type:** ```json @@ -68,6 +68,7 @@ As we described earlier, in order to use our setup you must use our helpers. Her * getAttrKey - [JS](https://github.com/infinum/eightshift-frontend-libs/blob/develop/scripts/editor/attributes.js) - [PHP](https://github.com/infinum/eightshift-libs/blob/develop/src/Helpers/AttributesTrait.php) * checkAttr - [JS](https://github.com/infinum/eightshift-frontend-libs/blob/develop/scripts/editor/attributes.js) - [PHP](https://github.com/infinum/eightshift-libs/blob/develop/src/Helpers/AttributesTrait.php) * render - [PHP](https://github.com/infinum/eightshift-libs/blob/develop/src/Blocks/AbstractBlocks.php) +* renderPartial - [PHP](https://github.com/infinum/eightshift-libs/blob/develop/src/Helpers/Components.php) For more details please check our helpers sections for [JavaScript](helpers-javascript) and [PHP](helpers-php). @@ -269,7 +270,7 @@ In your block attributes object, you will now have these keys: For example, if you have a block called cards grid that uses a card component, that card component uses a heading component. -Structure: +Structure: * Cards * Card @@ -633,7 +634,7 @@ import React from 'react'; import { props } from '@eightshift/frontend-libs/scripts'; import { TypographyEditor } from './../../typography/components/typography-editor'; import manifest from './../manifest.json'; - + export const HeadingEditor = (attributes) => { const { componentClass, diff --git a/website/docs/basics/blocks-faq.md b/website/docs/basics/blocks-faq.md index 53818e13b..9d96bf911 100644 --- a/website/docs/basics/blocks-faq.md +++ b/website/docs/basics/blocks-faq.md @@ -16,7 +16,7 @@ This is so because we defined the name structure for all our blocks and componen The main difference is that blocks are available in the block editor's block picker, and components are not. With that being said, blocks are registered using the `registerBlockType` method, and components are just here for you to bundle some functionality in one place and reuse it wherever you need. -For more information about blocks, read the [block structure](block-structure) chapter. To find out more about components, read the [component structure](blocks-component-structure) chapter. +For more information about blocks, read the [block structure](block-structure) chapter. To find out more about components, read the [component structure](blocks-component-structure) chapter. You can also read our blog post that explains the [difference between components and blocks](/blog/components-and-blocks/) with some examples. ### Do I need to have Storybook stories in my block? @@ -26,11 +26,11 @@ For more details on how to write stories, check out [this chapter](blocks-storyb ### Do you support block variations, and how can I use them? -Yes, we do. All block variations are located in the `src/Blocks/variations` folder. For more information about this, please check the [variations](blocks-variations) chapter. +Yes, we do. All block variations are located in the `src/Blocks/variations` folder. For more information about this, please check the [variations](blocks-variations) chapter and check out our [blog post](/blog/block-variations/) where we explain step-by-step how to register a new block variation. ### Do you support patterns, and how can I use them? -Yes, we do. For more information, please read the [patterns](blocks-patterns) chapter. +Yes, we do. For more information, please read the [patterns](blocks-patterns) chapter. We also have a blog post that describes [Block Patterns](/blog/block-patterns/) in more detail. ### What is a wrapper? @@ -71,7 +71,7 @@ wp boilerplate blocks use-block --help wp boilerplate blocks use-component --help ``` -### Can I use block/component from Eightshift-frontend-libs directly? +### Can I use block/component from Eightshift Frontend Libs directly? It depends. You can't use things from the blocks folder like `components`, `custom`, `variations`, `wrapper`, etc. They are meant to be copied to your project, styled, and changed depending on your project's needs. @@ -150,7 +150,7 @@ Easy. We have a method you can extend that limits your project's block to the on ### How to allow only one pattern category? -*Coming soon* +In the blog post about Block Patterns we covered how to [manage pattern categories](/blog/block-patterns/#managing-pattern-categories). That section should give you an idea how to remove core categories and how to register one or more custom pattern categories. ### Can I have blocks in multiple categories? diff --git a/website/docs/basics/extending-classes.md b/website/docs/basics/extending-classes.md index f940dc810..1ceac4883 100644 --- a/website/docs/basics/extending-classes.md +++ b/website/docs/basics/extending-classes.md @@ -6,9 +6,9 @@ title: Extending Classes [![docs-source](https://img.shields.io/badge/source-eightshift--libs-blue?style=for-the-badge&logo=php&labelColor=2a2a2a)](https://github.com/infinum/eightshift-libs) -You can extend every class from the library. To follow the good practice, you should never use the class directly from the Eightshift-libs in your service container (except from helpers and traits). Instead, you should create a class in your project and extend the class from the Eightshift-libs. That is why we made all those [WP-CLI](wp-cli) commands you saw in the previous chapter. +You can extend every class from the library. To follow the good practice, you should never use the class directly from the Eightshift Libs in your service container (except from helpers and traits). Instead, you should create a class in your project and extend the class from the Eightshift Libs. That is why we made all those [WP-CLI](wp-cli) commands you saw in the previous chapter. -We don't do any magic in the Eightshift-libs like in previous versions. All classes contain only the methods you need to call using WordPress hooks or filters. +We don't do any magic in the Eightshift Libs like in previous versions. All classes contain only the methods you need to call using WordPress hooks or filters. ## Example @@ -88,8 +88,8 @@ class EnqueueAdmin extends AbstractEnqueueAdmin } ``` -As you can see from the provided example, we created a new class and extended the functionality from the Eightshift-libs. +As you can see from the provided example, we created a new class and extended the functionality from the Eightshift Libs. In your new class, you have a `register` method that must be in every class that registers WordPress action hooks or filters. We call these **service classes**. -Your class contains three action hooks now. From this example, you can see that, if you don't want to use some functionality, remove the action, and it will not be used anymore. For more details on what each hook's callback does, go to the extended class in the Eightshift-libs and see the logic defined there. +Your class contains three action hooks now. From this example, you can see that, if you don't want to use some functionality, remove the action, and it will not be used anymore. For more details on what each hook's callback does, go to the extended class in the Eightshift Libs and see the logic defined there. diff --git a/website/docs/basics/helpers-php.md b/website/docs/basics/helpers-php.md index 7b433eb11..fb6c18a9f 100644 --- a/website/docs/basics/helpers-php.md +++ b/website/docs/basics/helpers-php.md @@ -35,6 +35,18 @@ For example, if `$attributes['parentClass'] === 'header'` and `$component === 'l - @throws \Exception When we're unable to find the component by $component. - @return string +## renderPartial + +Render component/block partial. + +- @param string $type Type of content block, component, variable, etc. +- @param string $parent Parent block/component name. +- @param string $name Name of the partial. It can be without extension so .php is used. +- @param array $attributes Attributes that will be passed to partial. +- @param string $partialFolderName Partial folder name. +- @throws ComponentException When we're unable to find the partial. +- @return string Partial html. + ## getManifest Get `manifest json`. Used for getting block/components manifest. @@ -43,6 +55,10 @@ Get `manifest json`. Used for getting block/components manifest. - @throws \Exception When we're unable to find the component by $component. - @return array +## props + +This function is the PHP equivalent of the JavaScript function on this [link](helpers-javascript). + ## responsiveSelectors This function is the PHP equivalent of the JavaScript function on this [link](helpers-javascript). diff --git a/website/docs/basics/writing-styles.md b/website/docs/basics/writing-styles.md index b50e48eea..955d4d6f5 100644 --- a/website/docs/basics/writing-styles.md +++ b/website/docs/basics/writing-styles.md @@ -7,7 +7,7 @@ title: Writing Styles > This chapter is only relevant in setups that don't use CSS variables. If you are using CSS variables please skip to the [Blocks Styles chapter](blocks-styles) chapter. -Everyone says that writing styles is easy and that is usually doesn't require a lot of thinking. But, like everything in programming, if you don't think about it, the problems add up, and you end up with a headache. +Everyone says that writing styles is easy and that it usually doesn't require a lot of thinking. But, like everything in programming, if you don't think about it, the problems add up, and you end up with a headache. Here are some of the recommendations that we use when writing our styles. It's also how we manage everything to be as modular as possible. diff --git a/website/docs/legacy/v8/basics/helpers-scss.md b/website/docs/legacy/v8/basics/helpers-scss.md index 6a0227056..4da04fe64 100644 --- a/website/docs/legacy/v8/basics/helpers-scss.md +++ b/website/docs/legacy/v8/basics/helpers-scss.md @@ -14,7 +14,7 @@ For years, we have collected a list of useful SASS mixins, placeholders, and fun Eightshift Frontend Libs styles library is already implemented in your WordPress project, so you don't need to worry about implementation. -All our sass mixing, functions and helpers are located in `node_modules/@eighshift/frontent-libs/styles/scss/eightshift-frontend-libs.scss` file. +All our sass mixing, functions and helpers are located in `node_modules/@eighshift/frontend-libs/styles/scss/eightshift-frontend-libs.scss` file. We imported that library into this file: `/assets/styles/parts/_shared.scss`. diff --git a/website/docs/plugin.md b/website/docs/plugin.md index f6b0d895e..81d1d30ff 100644 --- a/website/docs/plugin.md +++ b/website/docs/plugin.md @@ -18,7 +18,7 @@ The script will prompt you for a plugin name and local development URL (used for After the script is finished, please follow the instructions provided by the setup script. -All additional steps after the initial setup are done using WP_CLI commands, so please make sure that you have WP-CLI set and ready to use. +All additional steps after the initial setup are done using WP-CLI commands, so please make sure that you have WP-CLI set and ready to use. ## What is next? diff --git a/website/docs/theme.md b/website/docs/theme.md index f75c5a6c7..80986762f 100644 --- a/website/docs/theme.md +++ b/website/docs/theme.md @@ -16,9 +16,7 @@ The script will prompt you for a theme name and local development URL (used for ![](/img/setup.gif) -After the script is finished, please follow the instructions provided by the setup script. - -All additional steps after the initial setup are done using WP_CLI commands, so please make sure that you have WP-CLI set and ready to use. +After the script is finished, your new theme will be set up and activated. ## Specify version to create @@ -29,7 +27,7 @@ If you want to specify a version of Eightshift Libs or Frontend Libs to use, you #### Example: -If you want to pull the `develop` branch of the Eightshift Frontend libs and a specific release of the Eightshift Libs: +If you want to pull the `develop` branch of the Eightshift Frontend Libs and a specific release of the Eightshift Libs: ```bash npx create-wp-project --eightshiftLibsBranch="release/3.1.0" --eightshiftFrontendLibsBranch="develop"