You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/blog/2023-09-05-wrapper-as-a-standalone-component.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -12,15 +12,15 @@ hide_table_of_contents: false
12
12
As one of the most powerful features in the Eightshift DevKit, the Wrapper is a part of every Eightshift block in the Gutenberg editor, but what about WordPress templates?
13
13
<!--truncate-->
14
14
15
-
:::Note
15
+
:::note
16
16
[Wrapper](https://eightshift.com/docs/basics/blocks-wrapper/) is designed to be the ultimate top-level component that controls how your block behaves in the website layout. It is a sort of a 'section' in traditional builders. By default, you can control a whole lot of stuff, but there is an option to add custom attributes and tailor the Wrapper to the needs of your project.
17
17
:::
18
18
19
19
## What are WordPress templates?
20
20
21
21
Before the days of [Full Site Editing](https://developer.wordpress.org/block-editor/getting-started/full-site-editing/) in WordPress, we used [template files](https://developer.wordpress.org/themes/basics/template-hierarchy/) to add custom layouts to a blog page or post archives.
22
22
23
-
:::Note
23
+
:::note
24
24
While Full-site editing (FSE) _is_ supported in Eightshift Libs, a couple of modifications have to be done in your project to make it work.
25
25
:::
26
26
@@ -30,7 +30,7 @@ Depending on your setup, you might still use those as they are still a core part
30
30
31
31
Thanks to the `Components` helper, we can easily `render()` any component in our template.
32
32
33
-
:::Note
33
+
:::note
34
34
Interested in how to use components in a block? Take a look at [our docs](https://eightshift.com/docs/basics/blocks-component-in-block#i-have-a-component-that-i-want-to-use-manually).
35
35
:::
36
36
@@ -72,7 +72,7 @@ use InfinumLibsVendor\EightshiftLibs\Helpers\Components;
72
72
73
73
If we look deeper into the `render` method, we'll see that for the `$component` parameter, we can pass the _component's name or the full path (ending with .php)_. We made it simple, so use `wrapper`.
74
74
75
-
:::Note
75
+
:::note
76
76
If you are upgrading from an older version (supported since [Libs v6.5.7] (https://github.com/infinum/eightshift-libs/releases/tag/6.5.7) and [Frontend Libs v8.6.2](https://github.com/infinum/eightshift-frontend-libs/releases/tag/8.6.2)) copy code from [wrapper.php](https://github.com/infinum/eightshift-frontend-libs/blob/develop/blocks/init/src/Blocks/wrapper/wrapper.php) into your project.
77
77
:::
78
78
@@ -100,7 +100,7 @@ echo Components::render(
100
100
true
101
101
);
102
102
```
103
-
:::Note
103
+
:::note
104
104
Setting the `$useComponentDefaults` to `true` will save you the trouble of setting a lot of additional properties by using default values defined in your manifest.
105
105
:::
106
106
@@ -117,7 +117,7 @@ To make the Card component look even better, we'll use some of the powerful prop
117
117
'wrapperSpacingBottomLarge' => 50,
118
118
```
119
119
120
-
:::Note
120
+
:::note
121
121
For the list of all available properties, look at the Wrapper's `manifest.json`.
0 commit comments