Page Not Found
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
custom and not blocks, for example?",id:"why-is-my-blocks-folder-called-custom-and-not-blocks-for-example",level:3},{value:"In the global manifest, you have a key called \u201ccustomBlocksName\u201d: \u201ceightshift-block\u201d. Can I change this to my-project-name-block?",id:"in-the-global-manifest-you-have-a-key-called-customblocksname-eightshift-block-can-i-change-this-to-my-project-name-block",level:3},{value:"Simple vs Compound blocks",id:"simple-vs-compound-blocks",level:3},{value:"Naming is hard",id:"naming-is-hard",level:3}];function d(e){const o={a:"a",code:"code",em:"em",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.M)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.p,{children:(0,t.jsx)(o.a,{href:"https://github.com/infinum/eightshift-frontend-libs/tree/4.0.0/blocks/init/src/blocks/",children:(0,t.jsx)(o.img,{src:"https://img.shields.io/badge/source-eigthshift--frontend--libs-yellow?style=for-the-badge&logo=javascript&labelColor=2a2a2a",alt:"docs-source"})})}),"\n",(0,t.jsxs)(o.p,{children:["Before we dive into blocks and see how everything is set, we should describe this setup's mindset.\nIf you've managed to set up your project by this point with the ",(0,t.jsx)(o.a,{href:"wp-cli",children:"WP-CLI"})," command ",(0,t.jsx)(o.code,{children:"setup_theme"}),", you might have a few questions. We will try to answer all those questions here."]}),"\n",(0,t.jsx)(o.h3,{id:"why-do-all-my-blocks-look-the-same-and-have-the-same-name-structure",children:"Why do all my blocks look the same and have the same name structure?"}),"\n",(0,t.jsxs)(o.p,{children:["This is so because we defined the name structure for all our blocks and components to load everything automatically. For more information, please check the ",(0,t.jsx)(o.a,{href:"block-structure",children:"block structure"})," and ",(0,t.jsx)(o.a,{href:"blocks-component-structure",children:"component structure"})," chapters."]}),"\n",(0,t.jsx)(o.h3,{id:"what-is-the-difference-between-components-and-blocks",children:"What is the difference between components and blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["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 ",(0,t.jsx)(o.code,{children:"registerBlockType"})," method, and components are just here for you to bundle some functionality in one place and reuse it wherever you need."]}),"\n",(0,t.jsxs)(o.p,{children:["For more information about blocks, read the ",(0,t.jsx)(o.a,{href:"block-structure",children:"block structure"})," chapter. To find out more about components, read the ",(0,t.jsx)(o.a,{href:"blocks-component-structure",children:"component structure"})," chapter."]}),"\n",(0,t.jsx)(o.h3,{id:"do-i-need-to-have-storybook-stories-in-my-block",children:"Do I need to have Storybook stories in my block?"}),"\n",(0,t.jsx)(o.p,{children:"No, you don't. But we provided you with the ability to use the Storybook for all of your blocks and components. Why not use it? It will speed up your development time. Trust us. \ud83d\ude42"}),"\n",(0,t.jsxs)(o.p,{children:["For more details on how to write stories, check out ",(0,t.jsx)(o.a,{href:"blocks-storybook",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"do-you-support-block-variations-and-how-can-i-use-them",children:"Do you support block variations, and how can I use them?"}),"\n",(0,t.jsxs)(o.p,{children:["Yes, we do. All block variations are located in the ",(0,t.jsx)(o.code,{children:"src/Blocks/variations"})," folder. For more information about this, please check the ",(0,t.jsx)(o.a,{href:"blocks-variations",children:"variations"})," chapter."]}),"\n",(0,t.jsx)(o.h3,{id:"do-you-support-patterns-and-how-can-i-use-them",children:"Do you support patterns, and how can I use them?"}),"\n",(0,t.jsxs)(o.p,{children:["Yes, we do. For more information, please read the ",(0,t.jsx)(o.a,{href:"blocks-patterns",children:"patterns"})," chapter."]}),"\n",(0,t.jsx)(o.h3,{id:"what-is-a-wrapper",children:"What is a wrapper?"}),"\n",(0,t.jsxs)(o.p,{children:["Read about wrappers in ",(0,t.jsx)(o.a,{href:"blocks-wrapper",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"do-you-support-inner-blocks",children:"Do you support inner blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["Yes, we support everything that the core natively supports. You can find more information on how to use them in ",(0,t.jsx)(o.a,{href:"block-manifest",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"why-do-you-use-manifestjson-in-all-blocks-and-components",children:"Why do you use manifest.json in all blocks and components?"}),"\n",(0,t.jsxs)(o.p,{children:["So that we can provide content, attributes, options, and much more across multiple different files in multiple contexts (in both PHP and JS). You can read all about it in ",(0,t.jsx)(o.a,{href:"block-manifest",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"why-do-you-use-global-manifestjson",children:"Why do you use global manifest.json?"}),"\n",(0,t.jsxs)(o.p,{children:["The answer is the same as the previous one. In the global ",(0,t.jsx)(o.code,{children:"manifest.json"}),", we have options that are shared across all blocks and components. Read more about it in ",(0,t.jsx)(o.a,{href:"blocks-global-manifest",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"if-i-want-to-create-a-new-blockcomponent-what-do-i-do",children:"If I want to create a new block/component, what do I do?"}),"\n",(0,t.jsxs)(o.p,{children:["In your terminal, write ",(0,t.jsx)(o.code,{children:"wp boilerplate use_block --name=example"})," and style that block however you seem fit."]}),"\n",(0,t.jsx)(o.h3,{id:"how-can-i-use-your-pre-made-blocks",children:"How can I use your pre-made blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["You can check all available blocks/components using our ",(0,t.jsx)(o.code,{children:"wp boilerplate use_block --help"})," or ",(0,t.jsx)(o.code,{children:"wp boilerplate use_component --help"})," command."]}),"\n",(0,t.jsx)(o.h3,{id:"can-i-use-blockcomponent-from-eightshift-frontend-libs-directly",children:"Can I use block/component from Eightshift-frontend-libs directly?"}),"\n",(0,t.jsxs)(o.p,{children:["It depends. You can't use things from the blocks folder like ",(0,t.jsx)(o.code,{children:"components"}),", ",(0,t.jsx)(o.code,{children:"custom"}),", ",(0,t.jsx)(o.code,{children:"variations"}),", ",(0,t.jsx)(o.code,{children:"wrapper"}),", etc. They are meant to be copied to your project, styled, and changed depending on your project's needs."]}),"\n",(0,t.jsxs)(o.p,{children:["You can move things from a block to your project using the commands described in ",(0,t.jsx)(o.a,{href:"blocks-intro#how-can-i-use-your-pre-made-blocks",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"i-want-to-change-attributes-on-inner-blocks-how-do-i-do-it",children:"I want to change attributes on inner blocks. How do I do it?"}),"\n",(0,t.jsxs)(o.p,{children:["We described how attributes are used and combined in ",(0,t.jsx)(o.a,{href:"blocks-attributes",children:"this chapter"})," and ",(0,t.jsx)(o.a,{href:"blocks-component-in-block",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"do-i-need-to-write-js-and-php-implementation-for-all-my-blocks",children:"Do I need to write JS and PHP implementation for all my blocks?"}),"\n",(0,t.jsx)(o.p,{children:"For a block, you must provide the JS and PHP implementations because it won't work without them."}),"\n",(0,t.jsx)(o.p,{children:"For components, if you are not using the JS part, you don't need to write one, but we recommend you do so because the JS part is used in Storybook."}),"\n",(0,t.jsxs)(o.p,{children:["If you have a more advanced block and don't benefit from writing the JS implementation of the block, you can always use the ",(0,t.jsx)(o.a,{href:"https://developer.wordpress.org/block-editor/packages/packages-server-side-render/",children:"ServerSideRender component"})," form the core. If you have no inputs in the editor from the admin, there is no need to write JS implementation of the block. Just use ",(0,t.jsx)(o.code,{children:"ServerSideRender"})," component in that case."]}),"\n",(0,t.jsx)(o.h3,{id:"how-do-i-use-components-in-blocks",children:"How do I use components in blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["Please check out ",(0,t.jsx)(o.a,{href:"blocks-component-in-block",children:"this chapter"})," for more information."]}),"\n",(0,t.jsx)(o.h3,{id:"how-do-i-use-multiple-heading-components-in-my-block",children:"How do I use multiple heading components in my block?"}),"\n",(0,t.jsxs)(o.p,{children:["You can follow the instructions given in ",(0,t.jsx)(o.a,{href:"blocks-component-in-block",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"where-can-i-define-my-global-styles",children:"Where can I define my global styles?"}),"\n",(0,t.jsxs)(o.p,{children:["You can follow the instructions given in ",(0,t.jsx)(o.a,{href:"writing-styles",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"where-can-i-define-global-typography-for-all-my-blockscomponents",children:"Where can I define global typography for all my blocks/components?"}),"\n",(0,t.jsxs)(o.p,{children:["You can follow the instructions given in ",(0,t.jsx)(o.a,{href:"writing-styles",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"can-i-make-a-component-with-wp_query-logic-in-it",children:"Can I make a component with WP_Query logic in it?"}),"\n",(0,t.jsx)(o.p,{children:"Yes, you can, but think of the component as a dumb and simple piece of code that should not hold any business logic. A component should only be used as a view. If you need to write WP_Query logic, you can do that in a block and just pass the data to your component as props."}),"\n",(0,t.jsx)(o.h3,{id:"do-i-need-to-make-components-for-all-my-blocks",children:"Do I need to make components for all my blocks?"}),"\n",(0,t.jsx)(o.p,{children:"No, it might look like that from the examples provided, but that is not the case. You should create components depending on your needs."}),"\n",(0,t.jsx)(o.p,{children:"Ask yourself, will I reuse this functionality anywhere else?"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsxs)(o.li,{children:["If the answer is ",(0,t.jsx)(o.strong,{children:"yes"}),", create a component."]}),"\n",(0,t.jsxs)(o.li,{children:["If the answer is ",(0,t.jsx)(o.strong,{children:"no"}),", don't create a component."]}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:"Our recommendation is not to burden yourself with components from the beginning. Start creating blocks and, if you find yourself in need of code that you already wrote, just extract it in a component."}),"\n",(0,t.jsx)(o.h3,{id:"will-this-setup-work-with-full-site-editing",children:"Will this setup work with full site editing?"}),"\n",(0,t.jsx)(o.p,{children:"Yes, it will. We are constantly upgrading this documentation and our code to say that it will work with full site editing. This boilerplate was made for the Infinum/Eightshift WordPress team, so we are constantly using it in our projects."}),"\n",(0,t.jsx)(o.h3,{id:"can-i-use-core-blocks-with-your-setup",children:"Can I use core blocks with your setup?"}),"\n",(0,t.jsx)(o.p,{children:"Yes, you can. We are working on the ability to override core blocks in our smart way. Until we make this work, you can use everything that is already defined in the core documentation."}),"\n",(0,t.jsx)(o.p,{children:"We avoid using core blocks because they add different class naming and additional markup that makes it harder to style things."}),"\n",(0,t.jsx)(o.p,{children:"Also, they are prone to breaking changes every several months, so we prefer to write our own implementation."}),"\n",(0,t.jsx)(o.h3,{id:"how-can-i-limit-my-blocklist",children:"How can I limit my blocklist?"}),"\n",(0,t.jsxs)(o.p,{children:["Easy. We have a method you can extend that limits your project's block to the only block from your project. You should put this filter in your project's ",(0,t.jsx)(o.code,{children:"src/Blocks/Blocks.php"})," file under the ",(0,t.jsx)(o.code,{children:"register"})," method:"]}),"\n",(0,t.jsx)(o.pre,{children:(0,t.jsx)(o.code,{className:"language-php",children:" // Limits the usage of only custom project blocks.\n add_filter('allowed_block_types', [ $this, 'getAllBlocksList' ], 10, 2);\n"})}),"\n",(0,t.jsx)(o.h3,{id:"how-to-allow-only-one-pattern-category",children:"How to allow only one pattern category?"}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.em,{children:"Coming soon"})}),"\n",(0,t.jsx)(o.h3,{id:"can-i-have-blocks-in-multiple-categories",children:"Can I have blocks in multiple categories?"}),"\n",(0,t.jsxs)(o.p,{children:["In your block manifest, you can define in what category your block will appear. You can create a new category for your project or use our category. We created our category called ",(0,t.jsx)(o.code,{children:"eightshift"})," using this filter:"]}),"\n",(0,t.jsx)(o.pre,{children:(0,t.jsx)(o.code,{className:"language-php",children:" // Create a new custom category for custom blocks.\n add_filter('block_categories', [ $this, 'getCustomCategory' ]);\n"})}),"\n",(0,t.jsx)(o.h3,{id:"how-can-i-add-a-new-blocks-category",children:"How can I add a new blocks category?"}),"\n",(0,t.jsx)(o.p,{children:"You can provide your implementation, or you can extend our method for registering a custom category. Here is how you do it:"}),"\n",(0,t.jsx)(o.pre,{children:(0,t.jsx)(o.code,{className:"language-php",children:" /**\n * Register all the hooks\n *\n * @return void\n */\npublic function register(): void\n{\n // Create a new custom category for custom blocks.\n add_filter('block_categories', [ $this, 'getCustomCategory' ]);\n}\n\n /**\n * Create a custom category to assign all custom blocks\n *\n * This category will be shown on all blocks list in the \"Add Block\" button.\n *\n * @param array[] $categories Array of all block categories.\n * @param \\WP_Post $post Post being loaded.\n *\n * @return array[] Array of block categories.\n */\npublic function getCustomCategory(array $categories, \\WP_Post $post): array\n{\n return array_merge(\n parent::getCustomCategory($categories, $post),\n [\n [\n 'slug' => 'custom-category-name',\n 'title' => \\esc_html__('Custom Category', 'project-text-domain'),\n 'icon' => 'admin-settings',\n ],\n ]\n );\n}\n"})}),"\n",(0,t.jsx)(o.h3,{id:"what-if-you-dont-yet-support-something-from-the-native-setup-what-can-i-do",children:"What if you don't yet support something from the native setup? What can I do?"}),"\n",(0,t.jsxs)(o.p,{children:["As we described in ",(0,t.jsx)(o.a,{href:"blocks",children:"this chapter"}),", if we don't support something natively from the core or you can't find it in this documentation, you can always use it in the normal native way from the ",(0,t.jsx)(o.a,{href:"https://developer.wordpress.org/block-editor/tutorials/block-tutorial/",children:"WordPress documentation"}),". Also, if you think we are missing something, please open a ",(0,t.jsx)(o.a,{href:"https://github.com/infinum/eightshift-frontend-libs/pulls",children:"pull request"})," or an ",(0,t.jsx)(o.a,{href:"https://github.com/infinum/eightshift-frontend-libs/issues",children:"issue"})," on our GitHub repository."]}),"\n",(0,t.jsxs)(o.h3,{id:"why-is-my-blocks-folder-called-custom-and-not-blocks-for-example",children:["Why is my blocks folder called ",(0,t.jsx)(o.code,{children:"custom"})," and not ",(0,t.jsx)(o.code,{children:"blocks"}),", for example?"]}),"\n",(0,t.jsx)(o.p,{children:"The idea was to put all your custom blocks inside the custom folder and all core block in the core folder. This boilerplate is not designed only for your custom block, but you can use it as an ultimate block setup."}),"\n",(0,t.jsxs)(o.p,{children:["And folder structure ",(0,t.jsx)(o.code,{children:"src/Blocks/blocks"})," is kind of weird."]}),"\n",(0,t.jsx)(o.h3,{id:"in-the-global-manifest-you-have-a-key-called-customblocksname-eightshift-block-can-i-change-this-to-my-project-name-block",children:"In the global manifest, you have a key called \u201ccustomBlocksName\u201d: \u201ceightshift-block\u201d. Can I change this to my-project-name-block?"}),"\n",(0,t.jsx)(o.p,{children:"You can, but you shouldn't. We use this key to provide the CSS selectors on all our custom blocks in the block editor. Additional styles are added to this selector for the wrapper to work on full width and remove some of the native block editor styles."}),"\n",(0,t.jsx)(o.p,{children:"So don't remove or change this \ud83d\ude05."}),"\n",(0,t.jsx)(o.h3,{id:"simple-vs-compound-blocks",children:"Simple vs Compound blocks"}),"\n",(0,t.jsx)(o.p,{children:"In a nutshell, there is no difference between blocks. The WordPress core block is a block, but we like to make a distinction between what is simple and what is a compound block."}),"\n",(0,t.jsxs)(o.p,{children:[(0,t.jsx)(o.strong,{children:"Simple block"})," is a block that is used just as is and provides a small isolated functionality. For example: heading, paragraph, button, etc."]}),"\n",(0,t.jsxs)(o.p,{children:[(0,t.jsx)(o.strong,{children:"Compound block"})," is a block built from multiple components. For example: card, featured posts, etc"]}),"\n",(0,t.jsx)(o.h3,{id:"naming-is-hard",children:"Naming is hard"}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.em,{children:"There are only two hard things in Computer Science: cache invalidation and naming things. - Phil Karlton"})}),"\n",(0,t.jsx)(o.p,{children:"Yes, naming is hard, and no matter how long your development experience is you will always struggle with names for your components, block, files, variables, functions, etc."}),"\n",(0,t.jsx)(o.p,{children:"Here are some of our recommendations to ease your pain:"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsxs)(o.li,{children:["Always try to name your block based on ",(0,t.jsx)(o.strong,{children:"what they are"}),", rather than ",(0,t.jsx)(o.strong,{children:"what they will be used for"}),". For example, if you have a component card for custom post-type ",(0,t.jsx)(o.code,{children:"books"}),", you should never call this component ",(0,t.jsx)(o.code,{children:"card-book"}),". Instead, use a more generic name like ",(0,t.jsx)(o.code,{children:"card-product"}),"."]}),"\n",(0,t.jsx)(o.li,{children:"Make your names as generic as possible for better reusability, but specific enough to fully understand what the block/component is used for."}),"\n",(0,t.jsx)(o.li,{children:"Always think about the future. How can this feature be used in some other way?"}),"\n",(0,t.jsxs)(o.li,{children:['When naming your attributes ask yourself: "is this attribute going to be used in any other way?". For example, you have an attribute for adding font-weight: bold to your text. You can create an attribute called font-weight and set it as a ',(0,t.jsx)(o.code,{children:"boolean"})," type and that will be ok if you have only one font-weight. A better way would be to put it as a string and provide a ",(0,t.jsx)(o.code,{children:"SelectControl"})," component if there is any possibility that in the future you will have additional font-weight."]}),"\n",(0,t.jsxs)(o.li,{children:["Name booleans positively as a question. Example: ",(0,t.jsx)(o.code,{children:"isValid"}),", ",(0,t.jsx)(o.code,{children:"isLoading"}),", ",(0,t.jsx)(o.code,{children:"isComplete"}),"."]}),"\n",(0,t.jsx)(o.li,{children:"Don\u2019t hesitate to use longer names."}),"\n",(0,t.jsx)(o.li,{children:"Use singular names."}),"\n",(0,t.jsx)(o.li,{children:"The variables or functions should be named by their work: Name of variables/functions should always try to express their meaning without diving into the code base try to pack meaningful information inside the name."}),"\n",(0,t.jsx)(o.li,{children:"Naming should be simple enough to be understood by everyone: Using complex words to describe a simple thing only creates hassle while reading the code. Also, use simple English."}),"\n",(0,t.jsx)(o.li,{children:"You might not be the only person working on your particular project in the future. Think about the next person. Your naming will provide an insight into the process and project."}),"\n",(0,t.jsxs)(o.li,{children:[(0,t.jsx)(o.strong,{children:"BE CONSISTENT"}),"."]}),"\n"]})]})}function h(e={}){const{wrapper:o}={...(0,s.M)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},4552:(e,o,n)=>{n.d(o,{I:()=>a,M:()=>l});var t=n(11504);const s={},i=t.createContext(s);function l(e){const o=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function a(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),t.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/01980361.8717faba.js b/assets/js/01980361.8717faba.js
deleted file mode 100644
index b8fdece6b..000000000
--- a/assets/js/01980361.8717faba.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_eightshift_docs=self.webpackChunk_eightshift_docs||[]).push([[99248],{46097:(e,o,n)=>{n.r(o),n.d(o,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var t=n(85893),s=n(11151);const i={id:"blocks-intro",title:"Intro",sidebar_label:"Intro"},l=void 0,a={id:"legacy/v5/basics/blocks-intro",title:"Intro",description:"docs-source",source:"@site/docs/legacy/v5/basics/blocks-intro.md",sourceDirName:"legacy/v5/basics",slug:"/legacy/v5/basics/blocks-intro",permalink:"/docs/legacy/v5/basics/blocks-intro",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{id:"blocks-intro",title:"Intro",sidebar_label:"Intro"},sidebar:"docs",previous:{title:"Important",permalink:"/docs/legacy/v5/basics/blocks-important"},next:{title:"Registration",permalink:"/docs/legacy/v5/basics/blocks-registration"}},r={},c=[{value:"Why do all my blocks look the same and have the same name structure?",id:"why-do-all-my-blocks-look-the-same-and-have-the-same-name-structure",level:3},{value:"What is the difference between components and blocks?",id:"what-is-the-difference-between-components-and-blocks",level:3},{value:"Do I need to have Storybook stories in my block?",id:"do-i-need-to-have-storybook-stories-in-my-block",level:3},{value:"Do you support block variations, and how can I use them?",id:"do-you-support-block-variations-and-how-can-i-use-them",level:3},{value:"Do you support patterns, and how can I use them?",id:"do-you-support-patterns-and-how-can-i-use-them",level:3},{value:"What is a wrapper?",id:"what-is-a-wrapper",level:3},{value:"Do you support inner blocks?",id:"do-you-support-inner-blocks",level:3},{value:"Why do you use manifest.json in all blocks and components?",id:"why-do-you-use-manifestjson-in-all-blocks-and-components",level:3},{value:"Why do you use global manifest.json?",id:"why-do-you-use-global-manifestjson",level:3},{value:"If I want to create a new block/component, what do I do?",id:"if-i-want-to-create-a-new-blockcomponent-what-do-i-do",level:3},{value:"How can I use your pre-made blocks?",id:"how-can-i-use-your-pre-made-blocks",level:3},{value:"Can I use block/component from Eightshift-frontend-libs directly?",id:"can-i-use-blockcomponent-from-eightshift-frontend-libs-directly",level:3},{value:"I want to change attributes on inner blocks. How do I do it?",id:"i-want-to-change-attributes-on-inner-blocks-how-do-i-do-it",level:3},{value:"Do I need to write JS and PHP implementation for all my blocks?",id:"do-i-need-to-write-js-and-php-implementation-for-all-my-blocks",level:3},{value:"How do I use components in blocks?",id:"how-do-i-use-components-in-blocks",level:3},{value:"How do I use multiple heading components in my block?",id:"how-do-i-use-multiple-heading-components-in-my-block",level:3},{value:"Where can I define my global styles?",id:"where-can-i-define-my-global-styles",level:3},{value:"Where can I define global typography for all my blocks/components?",id:"where-can-i-define-global-typography-for-all-my-blockscomponents",level:3},{value:"Can I make a component with WP_Query logic in it?",id:"can-i-make-a-component-with-wp_query-logic-in-it",level:3},{value:"Do I need to make components for all my blocks?",id:"do-i-need-to-make-components-for-all-my-blocks",level:3},{value:"Will this setup work with full site editing?",id:"will-this-setup-work-with-full-site-editing",level:3},{value:"Can I use core blocks with your setup?",id:"can-i-use-core-blocks-with-your-setup",level:3},{value:"How can I limit my blocklist?",id:"how-can-i-limit-my-blocklist",level:3},{value:"How to allow only one pattern category?",id:"how-to-allow-only-one-pattern-category",level:3},{value:"Can I have blocks in multiple categories?",id:"can-i-have-blocks-in-multiple-categories",level:3},{value:"How can I add a new blocks category?",id:"how-can-i-add-a-new-blocks-category",level:3},{value:"What if you don't yet support something from the native setup? What can I do?",id:"what-if-you-dont-yet-support-something-from-the-native-setup-what-can-i-do",level:3},{value:"Why is my blocks folder called custom and not blocks, for example?",id:"why-is-my-blocks-folder-called-custom-and-not-blocks-for-example",level:3},{value:"In the global manifest, you have a key called \u201ccustomBlocksName\u201d: \u201ceightshift-block\u201d. Can I change this to my-project-name-block?",id:"in-the-global-manifest-you-have-a-key-called-customblocksname-eightshift-block-can-i-change-this-to-my-project-name-block",level:3},{value:"Simple vs Compound blocks",id:"simple-vs-compound-blocks",level:3},{value:"Naming is hard",id:"naming-is-hard",level:3}];function d(e){const o={a:"a",code:"code",em:"em",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.p,{children:(0,t.jsx)(o.a,{href:"https://github.com/infinum/eightshift-frontend-libs/tree/4.0.0/blocks/init/src/blocks/",children:(0,t.jsx)(o.img,{src:"https://img.shields.io/badge/source-eigthshift--frontend--libs-yellow?style=for-the-badge&logo=javascript&labelColor=2a2a2a",alt:"docs-source"})})}),"\n",(0,t.jsxs)(o.p,{children:["Before we dive into blocks and see how everything is set, we should describe this setup's mindset.\nIf you've managed to set up your project by this point with the ",(0,t.jsx)(o.a,{href:"wp-cli",children:"WP-CLI"})," command ",(0,t.jsx)(o.code,{children:"setup_theme"}),", you might have a few questions. We will try to answer all those questions here."]}),"\n",(0,t.jsx)(o.h3,{id:"why-do-all-my-blocks-look-the-same-and-have-the-same-name-structure",children:"Why do all my blocks look the same and have the same name structure?"}),"\n",(0,t.jsxs)(o.p,{children:["This is so because we defined the name structure for all our blocks and components to load everything automatically. For more information, please check the ",(0,t.jsx)(o.a,{href:"block-structure",children:"block structure"})," and ",(0,t.jsx)(o.a,{href:"blocks-component-structure",children:"component structure"})," chapters."]}),"\n",(0,t.jsx)(o.h3,{id:"what-is-the-difference-between-components-and-blocks",children:"What is the difference between components and blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["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 ",(0,t.jsx)(o.code,{children:"registerBlockType"})," method, and components are just here for you to bundle some functionality in one place and reuse it wherever you need."]}),"\n",(0,t.jsxs)(o.p,{children:["For more information about blocks, read the ",(0,t.jsx)(o.a,{href:"block-structure",children:"block structure"})," chapter. To find out more about components, read the ",(0,t.jsx)(o.a,{href:"blocks-component-structure",children:"component structure"})," chapter."]}),"\n",(0,t.jsx)(o.h3,{id:"do-i-need-to-have-storybook-stories-in-my-block",children:"Do I need to have Storybook stories in my block?"}),"\n",(0,t.jsx)(o.p,{children:"No, you don't. But we provided you with the ability to use the Storybook for all of your blocks and components. Why not use it? It will speed up your development time. Trust us. \ud83d\ude42"}),"\n",(0,t.jsxs)(o.p,{children:["For more details on how to write stories, check out ",(0,t.jsx)(o.a,{href:"blocks-storybook",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"do-you-support-block-variations-and-how-can-i-use-them",children:"Do you support block variations, and how can I use them?"}),"\n",(0,t.jsxs)(o.p,{children:["Yes, we do. All block variations are located in the ",(0,t.jsx)(o.code,{children:"src/Blocks/variations"})," folder. For more information about this, please check the ",(0,t.jsx)(o.a,{href:"blocks-variations",children:"variations"})," chapter."]}),"\n",(0,t.jsx)(o.h3,{id:"do-you-support-patterns-and-how-can-i-use-them",children:"Do you support patterns, and how can I use them?"}),"\n",(0,t.jsxs)(o.p,{children:["Yes, we do. For more information, please read the ",(0,t.jsx)(o.a,{href:"blocks-patterns",children:"patterns"})," chapter."]}),"\n",(0,t.jsx)(o.h3,{id:"what-is-a-wrapper",children:"What is a wrapper?"}),"\n",(0,t.jsxs)(o.p,{children:["Read about wrappers in ",(0,t.jsx)(o.a,{href:"blocks-wrapper",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"do-you-support-inner-blocks",children:"Do you support inner blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["Yes, we support everything that the core natively supports. You can find more information on how to use them in ",(0,t.jsx)(o.a,{href:"block-manifest",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"why-do-you-use-manifestjson-in-all-blocks-and-components",children:"Why do you use manifest.json in all blocks and components?"}),"\n",(0,t.jsxs)(o.p,{children:["So that we can provide content, attributes, options, and much more across multiple different files in multiple contexts (in both PHP and JS). You can read all about it in ",(0,t.jsx)(o.a,{href:"block-manifest",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"why-do-you-use-global-manifestjson",children:"Why do you use global manifest.json?"}),"\n",(0,t.jsxs)(o.p,{children:["The answer is the same as the previous one. In the global ",(0,t.jsx)(o.code,{children:"manifest.json"}),", we have options that are shared across all blocks and components. Read more about it in ",(0,t.jsx)(o.a,{href:"blocks-global-manifest",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"if-i-want-to-create-a-new-blockcomponent-what-do-i-do",children:"If I want to create a new block/component, what do I do?"}),"\n",(0,t.jsxs)(o.p,{children:["In your terminal, write ",(0,t.jsx)(o.code,{children:"wp boilerplate use_block --name=example"})," and style that block however you seem fit."]}),"\n",(0,t.jsx)(o.h3,{id:"how-can-i-use-your-pre-made-blocks",children:"How can I use your pre-made blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["You can check all available blocks/components using our ",(0,t.jsx)(o.code,{children:"wp boilerplate use_block --help"})," or ",(0,t.jsx)(o.code,{children:"wp boilerplate use_component --help"})," command."]}),"\n",(0,t.jsx)(o.h3,{id:"can-i-use-blockcomponent-from-eightshift-frontend-libs-directly",children:"Can I use block/component from Eightshift-frontend-libs directly?"}),"\n",(0,t.jsxs)(o.p,{children:["It depends. You can't use things from the blocks folder like ",(0,t.jsx)(o.code,{children:"components"}),", ",(0,t.jsx)(o.code,{children:"custom"}),", ",(0,t.jsx)(o.code,{children:"variations"}),", ",(0,t.jsx)(o.code,{children:"wrapper"}),", etc. They are meant to be copied to your project, styled, and changed depending on your project's needs."]}),"\n",(0,t.jsxs)(o.p,{children:["You can move things from a block to your project using the commands described in ",(0,t.jsx)(o.a,{href:"blocks-intro#how-can-i-use-your-pre-made-blocks",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"i-want-to-change-attributes-on-inner-blocks-how-do-i-do-it",children:"I want to change attributes on inner blocks. How do I do it?"}),"\n",(0,t.jsxs)(o.p,{children:["We described how attributes are used and combined in ",(0,t.jsx)(o.a,{href:"blocks-attributes",children:"this chapter"})," and ",(0,t.jsx)(o.a,{href:"blocks-component-in-block",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"do-i-need-to-write-js-and-php-implementation-for-all-my-blocks",children:"Do I need to write JS and PHP implementation for all my blocks?"}),"\n",(0,t.jsx)(o.p,{children:"For a block, you must provide the JS and PHP implementations because it won't work without them."}),"\n",(0,t.jsx)(o.p,{children:"For components, if you are not using the JS part, you don't need to write one, but we recommend you do so because the JS part is used in Storybook."}),"\n",(0,t.jsxs)(o.p,{children:["If you have a more advanced block and don't benefit from writing the JS implementation of the block, you can always use the ",(0,t.jsx)(o.a,{href:"https://developer.wordpress.org/block-editor/packages/packages-server-side-render/",children:"ServerSideRender component"})," form the core. If you have no inputs in the editor from the admin, there is no need to write JS implementation of the block. Just use ",(0,t.jsx)(o.code,{children:"ServerSideRender"})," component in that case."]}),"\n",(0,t.jsx)(o.h3,{id:"how-do-i-use-components-in-blocks",children:"How do I use components in blocks?"}),"\n",(0,t.jsxs)(o.p,{children:["Please check out ",(0,t.jsx)(o.a,{href:"blocks-component-in-block",children:"this chapter"})," for more information."]}),"\n",(0,t.jsx)(o.h3,{id:"how-do-i-use-multiple-heading-components-in-my-block",children:"How do I use multiple heading components in my block?"}),"\n",(0,t.jsxs)(o.p,{children:["You can follow the instructions given in ",(0,t.jsx)(o.a,{href:"blocks-component-in-block",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"where-can-i-define-my-global-styles",children:"Where can I define my global styles?"}),"\n",(0,t.jsxs)(o.p,{children:["You can follow the instructions given in ",(0,t.jsx)(o.a,{href:"writing-styles",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"where-can-i-define-global-typography-for-all-my-blockscomponents",children:"Where can I define global typography for all my blocks/components?"}),"\n",(0,t.jsxs)(o.p,{children:["You can follow the instructions given in ",(0,t.jsx)(o.a,{href:"writing-styles",children:"this chapter"}),"."]}),"\n",(0,t.jsx)(o.h3,{id:"can-i-make-a-component-with-wp_query-logic-in-it",children:"Can I make a component with WP_Query logic in it?"}),"\n",(0,t.jsx)(o.p,{children:"Yes, you can, but think of the component as a dumb and simple piece of code that should not hold any business logic. A component should only be used as a view. If you need to write WP_Query logic, you can do that in a block and just pass the data to your component as props."}),"\n",(0,t.jsx)(o.h3,{id:"do-i-need-to-make-components-for-all-my-blocks",children:"Do I need to make components for all my blocks?"}),"\n",(0,t.jsx)(o.p,{children:"No, it might look like that from the examples provided, but that is not the case. You should create components depending on your needs."}),"\n",(0,t.jsx)(o.p,{children:"Ask yourself, will I reuse this functionality anywhere else?"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsxs)(o.li,{children:["If the answer is ",(0,t.jsx)(o.strong,{children:"yes"}),", create a component."]}),"\n",(0,t.jsxs)(o.li,{children:["If the answer is ",(0,t.jsx)(o.strong,{children:"no"}),", don't create a component."]}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:"Our recommendation is not to burden yourself with components from the beginning. Start creating blocks and, if you find yourself in need of code that you already wrote, just extract it in a component."}),"\n",(0,t.jsx)(o.h3,{id:"will-this-setup-work-with-full-site-editing",children:"Will this setup work with full site editing?"}),"\n",(0,t.jsx)(o.p,{children:"Yes, it will. We are constantly upgrading this documentation and our code to say that it will work with full site editing. This boilerplate was made for the Infinum/Eightshift WordPress team, so we are constantly using it in our projects."}),"\n",(0,t.jsx)(o.h3,{id:"can-i-use-core-blocks-with-your-setup",children:"Can I use core blocks with your setup?"}),"\n",(0,t.jsx)(o.p,{children:"Yes, you can. We are working on the ability to override core blocks in our smart way. Until we make this work, you can use everything that is already defined in the core documentation."}),"\n",(0,t.jsx)(o.p,{children:"We avoid using core blocks because they add different class naming and additional markup that makes it harder to style things."}),"\n",(0,t.jsx)(o.p,{children:"Also, they are prone to breaking changes every several months, so we prefer to write our own implementation."}),"\n",(0,t.jsx)(o.h3,{id:"how-can-i-limit-my-blocklist",children:"How can I limit my blocklist?"}),"\n",(0,t.jsxs)(o.p,{children:["Easy. We have a method you can extend that limits your project's block to the only block from your project. You should put this filter in your project's ",(0,t.jsx)(o.code,{children:"src/Blocks/Blocks.php"})," file under the ",(0,t.jsx)(o.code,{children:"register"})," method:"]}),"\n",(0,t.jsx)(o.pre,{children:(0,t.jsx)(o.code,{className:"language-php",children:" // Limits the usage of only custom project blocks.\n add_filter('allowed_block_types', [ $this, 'getAllBlocksList' ], 10, 2);\n"})}),"\n",(0,t.jsx)(o.h3,{id:"how-to-allow-only-one-pattern-category",children:"How to allow only one pattern category?"}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.em,{children:"Coming soon"})}),"\n",(0,t.jsx)(o.h3,{id:"can-i-have-blocks-in-multiple-categories",children:"Can I have blocks in multiple categories?"}),"\n",(0,t.jsxs)(o.p,{children:["In your block manifest, you can define in what category your block will appear. You can create a new category for your project or use our category. We created our category called ",(0,t.jsx)(o.code,{children:"eightshift"})," using this filter:"]}),"\n",(0,t.jsx)(o.pre,{children:(0,t.jsx)(o.code,{className:"language-php",children:" // Create a new custom category for custom blocks.\n add_filter('block_categories', [ $this, 'getCustomCategory' ]);\n"})}),"\n",(0,t.jsx)(o.h3,{id:"how-can-i-add-a-new-blocks-category",children:"How can I add a new blocks category?"}),"\n",(0,t.jsx)(o.p,{children:"You can provide your implementation, or you can extend our method for registering a custom category. Here is how you do it:"}),"\n",(0,t.jsx)(o.pre,{children:(0,t.jsx)(o.code,{className:"language-php",children:" /**\n * Register all the hooks\n *\n * @return void\n */\npublic function register(): void\n{\n // Create a new custom category for custom blocks.\n add_filter('block_categories', [ $this, 'getCustomCategory' ]);\n}\n\n /**\n * Create a custom category to assign all custom blocks\n *\n * This category will be shown on all blocks list in the \"Add Block\" button.\n *\n * @param array[] $categories Array of all block categories.\n * @param \\WP_Post $post Post being loaded.\n *\n * @return array[] Array of block categories.\n */\npublic function getCustomCategory(array $categories, \\WP_Post $post): array\n{\n return array_merge(\n parent::getCustomCategory($categories, $post),\n [\n [\n 'slug' => 'custom-category-name',\n 'title' => \\esc_html__('Custom Category', 'project-text-domain'),\n 'icon' => 'admin-settings',\n ],\n ]\n );\n}\n"})}),"\n",(0,t.jsx)(o.h3,{id:"what-if-you-dont-yet-support-something-from-the-native-setup-what-can-i-do",children:"What if you don't yet support something from the native setup? What can I do?"}),"\n",(0,t.jsxs)(o.p,{children:["As we described in ",(0,t.jsx)(o.a,{href:"blocks",children:"this chapter"}),", if we don't support something natively from the core or you can't find it in this documentation, you can always use it in the normal native way from the ",(0,t.jsx)(o.a,{href:"https://developer.wordpress.org/block-editor/tutorials/block-tutorial/",children:"WordPress documentation"}),". Also, if you think we are missing something, please open a ",(0,t.jsx)(o.a,{href:"https://github.com/infinum/eightshift-frontend-libs/pulls",children:"pull request"})," or an ",(0,t.jsx)(o.a,{href:"https://github.com/infinum/eightshift-frontend-libs/issues",children:"issue"})," on our GitHub repository."]}),"\n",(0,t.jsxs)(o.h3,{id:"why-is-my-blocks-folder-called-custom-and-not-blocks-for-example",children:["Why is my blocks folder called ",(0,t.jsx)(o.code,{children:"custom"})," and not ",(0,t.jsx)(o.code,{children:"blocks"}),", for example?"]}),"\n",(0,t.jsx)(o.p,{children:"The idea was to put all your custom blocks inside the custom folder and all core block in the core folder. This boilerplate is not designed only for your custom block, but you can use it as an ultimate block setup."}),"\n",(0,t.jsxs)(o.p,{children:["And folder structure ",(0,t.jsx)(o.code,{children:"src/Blocks/blocks"})," is kind of weird."]}),"\n",(0,t.jsx)(o.h3,{id:"in-the-global-manifest-you-have-a-key-called-customblocksname-eightshift-block-can-i-change-this-to-my-project-name-block",children:"In the global manifest, you have a key called \u201ccustomBlocksName\u201d: \u201ceightshift-block\u201d. Can I change this to my-project-name-block?"}),"\n",(0,t.jsx)(o.p,{children:"You can, but you shouldn't. We use this key to provide the CSS selectors on all our custom blocks in the block editor. Additional styles are added to this selector for the wrapper to work on full width and remove some of the native block editor styles."}),"\n",(0,t.jsx)(o.p,{children:"So don't remove or change this \ud83d\ude05."}),"\n",(0,t.jsx)(o.h3,{id:"simple-vs-compound-blocks",children:"Simple vs Compound blocks"}),"\n",(0,t.jsx)(o.p,{children:"In a nutshell, there is no difference between blocks. The WordPress core block is a block, but we like to make a distinction between what is simple and what is a compound block."}),"\n",(0,t.jsxs)(o.p,{children:[(0,t.jsx)(o.strong,{children:"Simple block"})," is a block that is used just as is and provides a small isolated functionality. For example: heading, paragraph, button, etc."]}),"\n",(0,t.jsxs)(o.p,{children:[(0,t.jsx)(o.strong,{children:"Compound block"})," is a block built from multiple components. For example: card, featured posts, etc"]}),"\n",(0,t.jsx)(o.h3,{id:"naming-is-hard",children:"Naming is hard"}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.em,{children:"There are only two hard things in Computer Science: cache invalidation and naming things. - Phil Karlton"})}),"\n",(0,t.jsx)(o.p,{children:"Yes, naming is hard, and no matter how long your development experience is you will always struggle with names for your components, block, files, variables, functions, etc."}),"\n",(0,t.jsx)(o.p,{children:"Here are some of our recommendations to ease your pain:"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsxs)(o.li,{children:["Always try to name your block based on ",(0,t.jsx)(o.strong,{children:"what they are"}),", rather than ",(0,t.jsx)(o.strong,{children:"what they will be used for"}),". For example, if you have a component card for custom post-type ",(0,t.jsx)(o.code,{children:"books"}),", you should never call this component ",(0,t.jsx)(o.code,{children:"card-book"}),". Instead, use a more generic name like ",(0,t.jsx)(o.code,{children:"card-product"}),"."]}),"\n",(0,t.jsx)(o.li,{children:"Make your names as generic as possible for better reusability, but specific enough to fully understand what the block/component is used for."}),"\n",(0,t.jsx)(o.li,{children:"Always think about the future. How can this feature be used in some other way?"}),"\n",(0,t.jsxs)(o.li,{children:['When naming your attributes ask yourself: "is this attribute going to be used in any other way?". For example, you have an attribute for adding font-weight: bold to your text. You can create an attribute called font-weight and set it as a ',(0,t.jsx)(o.code,{children:"boolean"})," type and that will be ok if you have only one font-weight. A better way would be to put it as a string and provide a ",(0,t.jsx)(o.code,{children:"SelectControl"})," component if there is any possibility that in the future you will have additional font-weight."]}),"\n",(0,t.jsxs)(o.li,{children:["Name booleans positively as a question. Example: ",(0,t.jsx)(o.code,{children:"isValid"}),", ",(0,t.jsx)(o.code,{children:"isLoading"}),", ",(0,t.jsx)(o.code,{children:"isComplete"}),"."]}),"\n",(0,t.jsx)(o.li,{children:"Don\u2019t hesitate to use longer names."}),"\n",(0,t.jsx)(o.li,{children:"Use singular names."}),"\n",(0,t.jsx)(o.li,{children:"The variables or functions should be named by their work: Name of variables/functions should always try to express their meaning without diving into the code base try to pack meaningful information inside the name."}),"\n",(0,t.jsx)(o.li,{children:"Naming should be simple enough to be understood by everyone: Using complex words to describe a simple thing only creates hassle while reading the code. Also, use simple English."}),"\n",(0,t.jsx)(o.li,{children:"You might not be the only person working on your particular project in the future. Think about the next person. Your naming will provide an insight into the process and project."}),"\n",(0,t.jsxs)(o.li,{children:[(0,t.jsx)(o.strong,{children:"BE CONSISTENT"}),"."]}),"\n"]})]})}function h(e={}){const{wrapper:o}={...(0,s.a)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},11151:(e,o,n)=>{n.d(o,{Z:()=>a,a:()=>l});var t=n(67294);const s={},i=t.createContext(s);function l(e){const o=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function a(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),t.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/01a85c17.2d1c9198.js b/assets/js/01a85c17.2d1c9198.js
new file mode 100644
index 000000000..f7c608138
--- /dev/null
+++ b/assets/js/01a85c17.2d1c9198.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_eightshift_docs=self.webpackChunk_eightshift_docs||[]).push([[58412],{9452:(e,t,s)=>{s.d(t,{c:()=>v});var a=s(11504),i=s(65456),r=s(520),l=s(11432),n=s(10867),c=s(84357),o=s(55592),m=s(13376);function d(e){const{pathname:t}=(0,o.IT)();return(0,a.useMemo)((()=>e.filter((e=>function(e,t){return!(e.unlisted&&!(0,m.Sc)(e.permalink,t))}(e,t)))),[e,t])}const h={sidebar:"sidebar_re4s",sidebarItemTitle:"sidebarItemTitle_pO2u",sidebarItemList:"sidebarItemList_Yudw",sidebarItem:"sidebarItem__DBe",sidebarItemLink:"sidebarItemLink_mo7H",sidebarItemLinkActive:"sidebarItemLinkActive_I1ZP"};var u=s(17624);function g(e){let{sidebar:t}=e;const s=d(t.items);return(0,u.jsx)("aside",{className:"col col--3",children:(0,u.jsxs)("nav",{className:(0,i.c)(h.sidebar,"thin-scrollbar"),"aria-label":(0,c.G)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"}),children:[(0,u.jsx)("div",{className:(0,i.c)(h.sidebarItemTitle,"margin-bottom--md"),children:t.title}),(0,u.jsx)("ul",{className:(0,i.c)(h.sidebarItemList,"clean-list"),children:s.map((e=>(0,u.jsx)("li",{className:h.sidebarItem,children:(0,u.jsx)(n.c,{isNavLink:!0,to:e.permalink,className:h.sidebarItemLink,activeClassName:h.sidebarItemLinkActive,children:e.title})},e.permalink)))})]})})}var b=s(45168);function p(e){let{sidebar:t}=e;const s=d(t.items);return(0,u.jsx)("ul",{className:"menu__list",children:s.map((e=>(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(n.c,{isNavLink:!0,to:e.permalink,className:"menu__link",activeClassName:"menu__link--active",children:e.title})},e.permalink)))})}function j(e){return(0,u.jsx)(b.Mx,{component:p,props:e})}function x(e){let{sidebar:t}=e;const s=(0,l.U)();return t?.items.length?"mobile"===s?(0,u.jsx)(j,{sidebar:t}):(0,u.jsx)(g,{sidebar:t}):null}function v(e){const{sidebar:t,toc:s,children:a,...l}=e,n=t&&t.items.length>0;return(0,u.jsx)(r.c,{...l,children:(0,u.jsx)("div",{className:"container margin-vert--lg",children:(0,u.jsxs)("div",{className:"row",children:[(0,u.jsx)(x,{sidebar:t}),(0,u.jsx)("main",{className:(0,i.c)("col",{"col--7":n,"col--9 col--offset-1":!n}),itemScope:!0,itemType:"https://schema.org/Blog",children:a}),s&&(0,u.jsx)("div",{className:"col col--2",children:s})]})})})}},43024:(e,t,s)=>{s.r(t),s.d(t,{default:()=>p});s(11504);var a=s(65456),i=s(84357);const r=()=>(0,i.G)({id:"theme.tags.tagsPageTitle",message:"Tags",description:"The title of the tag list page"});var l=s(85008),n=s(45864),c=s(9452),o=s(83020),m=s(56448);const d={tag:"tag_Nnez"};var h=s(17624);function u(e){let{letterEntry:t}=e;return(0,h.jsxs)("article",{children:[(0,h.jsx)(m.c,{as:"h2",id:t.letter,children:t.letter}),(0,h.jsx)("ul",{className:"padding--none",children:t.tags.map((e=>(0,h.jsx)("li",{className:d.tag,children:(0,h.jsx)(o.c,{...e})},e.permalink)))}),(0,h.jsx)("hr",{})]})}function g(e){let{tags:t}=e;const s=function(e){const t={};return Object.values(e).forEach((e=>{const s=function(e){return e[0].toUpperCase()}(e.label);t[s]??=[],t[s].push(e)})),Object.entries(t).sort(((e,t)=>{let[s]=e,[a]=t;return s.localeCompare(a)})).map((e=>{let[t,s]=e;return{letter:t,tags:s.sort(((e,t)=>e.label.localeCompare(t.label)))}}))}(t);return(0,h.jsx)("section",{className:"margin-vert--lg",children:s.map((e=>(0,h.jsx)(u,{letterEntry:e},e.letter)))})}var b=s(48712);function p(e){let{tags:t,sidebar:s}=e;const i=r();return(0,h.jsxs)(l.cr,{className:(0,a.c)(n.W.wrapper.blogPages,n.W.page.blogTagsListPage),children:[(0,h.jsx)(l.U7,{title:i}),(0,h.jsx)(b.c,{tag:"blog_tags_list"}),(0,h.jsxs)(c.c,{sidebar:s,children:[(0,h.jsx)(m.c,{as:"h1",children:i}),(0,h.jsx)(g,{tags:t})]})]})}},83020:(e,t,s)=>{s.d(t,{c:()=>n});s(11504);var a=s(65456),i=s(10867);const r={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var l=s(17624);function n(e){let{permalink:t,label:s,count:n}=e;return(0,l.jsxs)(i.c,{href:t,className:(0,a.c)(r.tag,n?r.tagWithCount:r.tagRegular),children:[s,n&&(0,l.jsx)("span",{children:n})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/01a85c17.9251edb3.js b/assets/js/01a85c17.9251edb3.js
deleted file mode 100644
index 517e9ead7..000000000
--- a/assets/js/01a85c17.9251edb3.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_eightshift_docs=self.webpackChunk_eightshift_docs||[]).push([[64013],{61460:(e,t,s)=>{s.d(t,{Z:()=>v});var a=s(67294),i=s(36905),l=s(22189),r=s(87524),n=s(33692),c=s(95999),o=s(16550),m=s(48596);function d(e){const{pathname:t}=(0,o.TH)();return(0,a.useMemo)((()=>e.filter((e=>function(e,t){return!(e.unlisted&&!(0,m.Mg)(e.permalink,t))}(e,t)))),[e,t])}const u={sidebar:"sidebar_re4s",sidebarItemTitle:"sidebarItemTitle_pO2u",sidebarItemList:"sidebarItemList_Yudw",sidebarItem:"sidebarItem__DBe",sidebarItemLink:"sidebarItemLink_mo7H",sidebarItemLinkActive:"sidebarItemLinkActive_I1ZP"};var g=s(85893);function h(e){let{sidebar:t}=e;const s=d(t.items);return(0,g.jsx)("aside",{className:"col col--3",children:(0,g.jsxs)("nav",{className:(0,i.Z)(u.sidebar,"thin-scrollbar"),"aria-label":(0,c.I)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"}),children:[(0,g.jsx)("div",{className:(0,i.Z)(u.sidebarItemTitle,"margin-bottom--md"),children:t.title}),(0,g.jsx)("ul",{className:(0,i.Z)(u.sidebarItemList,"clean-list"),children:s.map((e=>(0,g.jsx)("li",{className:u.sidebarItem,children:(0,g.jsx)(n.Z,{isNavLink:!0,to:e.permalink,className:u.sidebarItemLink,activeClassName:u.sidebarItemLinkActive,children:e.title})},e.permalink)))})]})})}var b=s(13102);function p(e){let{sidebar:t}=e;const s=d(t.items);return(0,g.jsx)("ul",{className:"menu__list",children:s.map((e=>(0,g.jsx)("li",{className:"menu__list-item",children:(0,g.jsx)(n.Z,{isNavLink:!0,to:e.permalink,className:"menu__link",activeClassName:"menu__link--active",children:e.title})},e.permalink)))})}function j(e){return(0,g.jsx)(b.Zo,{component:p,props:e})}function x(e){let{sidebar:t}=e;const s=(0,r.i)();return null!=t&&t.items.length?"mobile"===s?(0,g.jsx)(j,{sidebar:t}):(0,g.jsx)(h,{sidebar:t}):null}function v(e){const{sidebar:t,toc:s,children:a,...r}=e,n=t&&t.items.length>0;return(0,g.jsx)(l.Z,{...r,children:(0,g.jsx)("div",{className:"container margin-vert--lg",children:(0,g.jsxs)("div",{className:"row",children:[(0,g.jsx)(x,{sidebar:t}),(0,g.jsx)("main",{className:(0,i.Z)("col",{"col--7":n,"col--9 col--offset-1":!n}),itemScope:!0,itemType:"https://schema.org/Blog",children:a}),s&&(0,g.jsx)("div",{className:"col col--2",children:s})]})})})}},91223:(e,t,s)=>{s.r(t),s.d(t,{default:()=>p});s(67294);var a=s(36905),i=s(95999);const l=()=>(0,i.I)({id:"theme.tags.tagsPageTitle",message:"Tags",description:"The title of the tag list page"});var r=s(10833),n=s(35281),c=s(61460),o=s(13008),m=s(92503);const d={tag:"tag_Nnez"};var u=s(85893);function g(e){let{letterEntry:t}=e;return(0,u.jsxs)("article",{children:[(0,u.jsx)(m.Z,{as:"h2",id:t.letter,children:t.letter}),(0,u.jsx)("ul",{className:"padding--none",children:t.tags.map((e=>(0,u.jsx)("li",{className:d.tag,children:(0,u.jsx)(o.Z,{...e})},e.permalink)))}),(0,u.jsx)("hr",{})]})}function h(e){let{tags:t}=e;const s=function(e){const t={};return Object.values(e).forEach((e=>{const s=function(e){return e[0].toUpperCase()}(e.label);null!=t[s]||(t[s]=[]),t[s].push(e)})),Object.entries(t).sort(((e,t)=>{let[s]=e,[a]=t;return s.localeCompare(a)})).map((e=>{let[t,s]=e;return{letter:t,tags:s.sort(((e,t)=>e.label.localeCompare(t.label)))}}))}(t);return(0,u.jsx)("section",{className:"margin-vert--lg",children:s.map((e=>(0,u.jsx)(g,{letterEntry:e},e.letter)))})}var b=s(90197);function p(e){let{tags:t,sidebar:s}=e;const i=l();return(0,u.jsxs)(r.FG,{className:(0,a.Z)(n.k.wrapper.blogPages,n.k.page.blogTagsListPage),children:[(0,u.jsx)(r.d,{title:i}),(0,u.jsx)(b.Z,{tag:"blog_tags_list"}),(0,u.jsxs)(c.Z,{sidebar:s,children:[(0,u.jsx)(m.Z,{as:"h1",children:i}),(0,u.jsx)(h,{tags:t})]})]})}},13008:(e,t,s)=>{s.d(t,{Z:()=>n});s(67294);var a=s(36905),i=s(33692);const l={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var r=s(85893);function n(e){let{permalink:t,label:s,count:n}=e;return(0,r.jsxs)(i.Z,{href:t,className:(0,a.Z)(l.tag,n?l.tagWithCount:l.tagRegular),children:[s,n&&(0,r.jsx)("span",{children:n})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/0205c089.028f9c72.js b/assets/js/0205c089.028f9c72.js
new file mode 100644
index 000000000..20d30f0b4
--- /dev/null
+++ b/assets/js/0205c089.028f9c72.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_eightshift_docs=self.webpackChunk_eightshift_docs||[]).push([[17852],{82256:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>s,metadata:()=>l,toc:()=>m});var r=n(17624),i=n(4552),a=n(80148);const s={id:"jira",title:"Jira"},o=void 0,l={id:"php/filters/integrations/jira",title:"Jira",description:"",source:"@site/forms/php/filters/integrations/jira.mdx",sourceDirName:"php/filters/integrations",slug:"/php/filters/integrations/jira",permalink:"/forms/php/filters/integrations/jira",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{id:"jira",title:"Jira"},sidebar:"forms",previous:{title:"HubSpot",permalink:"/forms/php/filters/integrations/hubspot"},next:{title:"Mailchimp",permalink:"/forms/php/filters/integrations/mailchimp"}},d={},m=[];function f(t){return(0,r.jsx)(a.y,{name:"Jira",filter:"jira",onlyUse:["prePostParamsFilter"]})}function c(t={}){const{wrapper:e}={...(0,i.M)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(f,{...t})}):f()}},80148:(t,e,n)=>{n.d(e,{g:()=>o,y:()=>s});n(11504);var r=n(1608),i=n(96616),a=n(17624);function s(t){let{filter:e,onlyUse:n=["dataFilter","orderFilter","prePostIdFilter","prePostParamsFilter"]}=t;return(0,a.jsxs)(a.Fragment,{children:[n.includes("dataFilter")&&(0,a.jsx)(l,{filter:e}),n.includes("orderFilter")&&(0,a.jsx)(d,{filter:e}),n.includes("prePostIdFilter")&&(0,a.jsx)(m,{filter:e}),n.includes("prePostParamsFilter")&&(0,a.jsx)(f,{filter:e})]})}function o(t){let{filter:e}=t;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{children:"Allows adding custom content before the field element's closing tag. Useful for adding markup, styles, etc."}),(0,a.jsx)(r.c,{language:"php",children:(0,i.c)(`\n\t\t\tadd_filter('es_forms_block_${e}_additional_content', function(): string {\n\t\t\t\treturn 'string, int, etc.) inside a constructor method?",id:"what-if-my-class-has-a-primitive-parameter-string-int-etc-inside-a-constructor-method",level:3},{value:"What if my class does have another class as a parameter inside a constructor method?",id:"what-if-my-class-does-have-another-class-as-a-parameter-inside-a-constructor-method",level:3},{value:"What if my class has an interface parameter inside the constructor method?",id:"what-if-my-class-has-an-interface-parameter-inside-the-constructor-method",level:3},{value:"Example",id:"example",level:4},{value:"To sum it up",id:"to-sum-it-up",level:2}];function d(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://github.com/infinum/eightshift-libs/tree/3.0.0/",children:(0,t.jsx)(n.img,{src:"https://img.shields.io/badge/source-eigthshift--libs-blue?style=for-the-badge&logo=php&labelColor=2a2a2a",alt:"docs-source"})})}),"\n",(0,t.jsx)(n.p,{children:"What is autowiring?"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"Autowiring is an exotic word that represents something very simple: the container's ability to create and inject dependencies automatically."})}),"\n",(0,t.jsxs)(n.p,{children:["The quote is taken from the ",(0,t.jsx)(n.a,{href:"https://php-di.org/doc/autowiring.html",children:"PHP-DI"})," library that we use."]}),"\n",(0,t.jsx)(n.p,{children:"In a nutshell, we use a dependency injection (DI) container to load all your service classes. Alongside the DI container, we also use the PSR-4 coding standard for autoloading. That allows us to predict what your file/folder structure will look like in correlation to the namespace. With that in mind, you don't have to worry about requiring your classes. Our autoloading takes care of everything. All you need to do is follow a few coding standards so that you can automatically inject other classes as dependencies."}),"\n",(0,t.jsxs)(n.p,{children:["Autowiring runs inside the ",(0,t.jsx)(n.code,{children:"Main"})," service class as an extended class of our ",(0,t.jsx)(n.code,{children:"AbstractMain"})," class. You can install the main class using this command:"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"wp boilerplate create_main"})}),"\n",(0,t.jsx)(n.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,t.jsx)(n.p,{children:"Here is a quick overview of how this works:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"You create a new class manually or using the WP-CLI command."}),"\n",(0,t.jsx)(n.li,{children:"PSR-4 should detect your new class if you followed the PSR-4 naming standard."}),"\n",(0,t.jsxs)(n.li,{children:["The new class is added to the ",(0,t.jsx)(n.code,{children:"classmap"})," array inside the ",(0,t.jsx)(n.code,{children:"vendor"})," folder."]}),"\n",(0,t.jsx)(n.li,{children:"Autowiring class reads the new class, checks if your class has any class dependencies, and injects them."}),"\n",(0,t.jsx)(n.li,{children:"It just works."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"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."}),"\n",(0,t.jsx)(n.h3,{id:"what-if-i-have-to-mock-or-manually-call-a-class",children:"What if I have to mock or manually call a class?"}),"\n",(0,t.jsx)(n.p,{children:"Before we start with the automatization and autowiring, let's see how service classes are called manually."}),"\n",(0,t.jsx)(n.p,{children:"We can think of these scenarios where you want to load a class manually:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"You have to write tests and manually provide mocked classes."}),"\n",(0,t.jsx)(n.li,{children:"Your classes have a custom structure and autowiring can't resolve it."}),"\n",(0,t.jsxs)(n.li,{children:["You want to provide a primitive parameter (",(0,t.jsx)(n.code,{children:"string"}),", ",(0,t.jsx)(n.code,{children:"int"}),", etc.) inside a constructor method."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["In those cases, you can manually provide your DI container with the implementation using the ",(0,t.jsx)(n.code,{children:"getServiceClasses"})," method inside the ",(0,t.jsx)(n.code,{children:"src>Main>Main"})," class."]}),"\n",(0,t.jsx)(n.p,{children:"Provide the method and add your custom implementation like this:"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"src>Main>Main.php"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-php",children:" /**\n * Get the list of services to register.\n *\n * A list of classes which contain hooks.\n *\n * @return arraystring, int, etc.) inside a constructor method?",id:"what-if-my-class-has-a-primitive-parameter-string-int-etc-inside-a-constructor-method",level:3},{value:"What if my class does have another class as a parameter inside a constructor method?",id:"what-if-my-class-does-have-another-class-as-a-parameter-inside-a-constructor-method",level:3},{value:"What if my class has an interface parameter inside the constructor method?",id:"what-if-my-class-has-an-interface-parameter-inside-the-constructor-method",level:3},{value:"Example",id:"example",level:4},{value:"To sum it up",id:"to-sum-it-up",level:2}];function d(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.M)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://github.com/infinum/eightshift-libs/tree/3.0.0/",children:(0,t.jsx)(n.img,{src:"https://img.shields.io/badge/source-eigthshift--libs-blue?style=for-the-badge&logo=php&labelColor=2a2a2a",alt:"docs-source"})})}),"\n",(0,t.jsx)(n.p,{children:"What is autowiring?"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"Autowiring is an exotic word that represents something very simple: the container's ability to create and inject dependencies automatically."})}),"\n",(0,t.jsxs)(n.p,{children:["The quote is taken from the ",(0,t.jsx)(n.a,{href:"https://php-di.org/doc/autowiring.html",children:"PHP-DI"})," library that we use."]}),"\n",(0,t.jsx)(n.p,{children:"In a nutshell, we use a dependency injection (DI) container to load all your service classes. Alongside the DI container, we also use the PSR-4 coding standard for autoloading. That allows us to predict what your file/folder structure will look like in correlation to the namespace. With that in mind, you don't have to worry about requiring your classes. Our autoloading takes care of everything. All you need to do is follow a few coding standards so that you can automatically inject other classes as dependencies."}),"\n",(0,t.jsxs)(n.p,{children:["Autowiring runs inside the ",(0,t.jsx)(n.code,{children:"Main"})," service class as an extended class of our ",(0,t.jsx)(n.code,{children:"AbstractMain"})," class. You can install the main class using this command:"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"wp boilerplate create_main"})}),"\n",(0,t.jsx)(n.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,t.jsx)(n.p,{children:"Here is a quick overview of how this works:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"You create a new class manually or using the WP-CLI command."}),"\n",(0,t.jsx)(n.li,{children:"PSR-4 should detect your new class if you followed the PSR-4 naming standard."}),"\n",(0,t.jsxs)(n.li,{children:["The new class is added to the ",(0,t.jsx)(n.code,{children:"classmap"})," array inside the ",(0,t.jsx)(n.code,{children:"vendor"})," folder."]}),"\n",(0,t.jsx)(n.li,{children:"Autowiring class reads the new class, checks if your class has any class dependencies, and injects them."}),"\n",(0,t.jsx)(n.li,{children:"It just works."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"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."}),"\n",(0,t.jsx)(n.h3,{id:"what-if-i-have-to-mock-or-manually-call-a-class",children:"What if I have to mock or manually call a class?"}),"\n",(0,t.jsx)(n.p,{children:"Before we start with the automatization and autowiring, let's see how service classes are called manually."}),"\n",(0,t.jsx)(n.p,{children:"We can think of these scenarios where you want to load a class manually:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"You have to write tests and manually provide mocked classes."}),"\n",(0,t.jsx)(n.li,{children:"Your classes have a custom structure and autowiring can't resolve it."}),"\n",(0,t.jsxs)(n.li,{children:["You want to provide a primitive parameter (",(0,t.jsx)(n.code,{children:"string"}),", ",(0,t.jsx)(n.code,{children:"int"}),", etc.) inside a constructor method."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["In those cases, you can manually provide your DI container with the implementation using the ",(0,t.jsx)(n.code,{children:"getServiceClasses"})," method inside the ",(0,t.jsx)(n.code,{children:"src>Main>Main"})," class."]}),"\n",(0,t.jsx)(n.p,{children:"Provide the method and add your custom implementation like this:"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"src>Main>Main.php"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-php",children:" /**\n * Get the list of services to register.\n *\n * A list of classes which contain hooks.\n *\n * @return array