Skip to content

Commit 94e3ce7

Browse files
thomasguillotthomasguillot
authored
feat: allow parent to dictate position when it has the position class (#409)
1 parent 5a235de commit 94e3ce7

File tree

4 files changed

+194
-83
lines changed

4 files changed

+194
-83
lines changed

‎.github/UTILITY_CLASSES.md‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ Note: The font size still needs to be changed to x-small if we're recreating a N
3939
`mobile-only` and `desktop-only` can be applied to blocks to display them based on the screen size.
4040

4141
| CLASS NAME | DESCRIPTION |
42-
| -------------| ------------------------------------------------------------------------------- |
42+
| ------------ | ------------------------------------------------------------------------------- |
4343
| mobile-only | The block will be displayed on the screen if it is 781px wide or less. |
4444
| desktop-only | The block will be displayed on the screen if the screen is at least 782px wide. |
4545

@@ -52,7 +52,7 @@ Adding `is-position-fixed` to a block will make it fixed at the top of the scree
5252
Additionally, `is-position-fixed--mobile-only` and `is-position-fixed--desktop-only` can be applied to blocks to fix their position based on the screen size.
5353

5454
| CLASS NAME | DESCRIPTION |
55-
| --------------------------------| --------------------------------------------------------------------------- |
55+
| ------------------------------- | --------------------------------------------------------------------------- |
5656
| is-position-fixed | Class required to enable the fixed position. |
5757
| is-position-fixed--mobile-only | The block will be fixed on the screen if it is 781px wide or less. |
5858
| is-position-fixed--desktop-only | The block will be fixed on the screen if the screen is at least 782px wide. |
@@ -64,7 +64,7 @@ Adding `is-position-sticky` to a block will ensure it stays within the viewport
6464
Additionally, `is-position-sticky--mobile-only` and `is-position-sticky--desktop-only` can be applied to blocks to make them sticky based on the screen size.
6565

6666
| CLASS NAME | DESCRIPTION |
67-
| ---------------------------------| ---------------------------------------------------------------------------- |
67+
| -------------------------------- | ---------------------------------------------------------------------------- |
6868
| is-position-sticky | Class required to enable the sticky position. |
6969
| is-position-sticky--mobile-only | The block will be sticky on the screen if it is 781px wide or less. |
7070
| is-position-sticky--desktop-only | The block will be sticky on the screen if the screen is at least 782px wide. |
@@ -73,15 +73,21 @@ Additionally, `is-position-sticky--mobile-only` and `is-position-sticky--desktop
7373

7474
The class `overlay-contents` needs to be applied along with a position class: `overlay-contents--position--left`, `overlay-contents--position--right`, or `overlay-contents--position--full-width`.
7575

76-
When using the right or left position, you can also control the width, which defaults to a maximum of 632px.
77-
78-
| CLASS NAME | DESCRIPTION |
79-
| -------------------------------------- | -------------------------------------------------------------------------- |
80-
| overlay-contents | Class required to enable the overlay. |
81-
| overlay-contents--position--left | This is the default behavior, where the content will appear from the left. |
82-
| overlay-contents--position--right | In this case, the content will slide in from the right. |
83-
| overlay-contents--position--full-width | The content will take over the full screen. |
84-
| overlay-contents--width--x-small | The content will expand to a maximum of 300px. |
85-
| overlay-contents--width--small | The content will expand to a maximum of 410px. |
86-
| overlay-contents--width--large | The content will expand to a maximum of 964px. |
87-
| overlay-contents--width--x-large | The content will expand to a maximum of 1296px. |
76+
When the overlay contents are included via a template-part (e.g. mobile menu), the **parent** template-part wrapper can set a **force** position class (e.g. `overlay-contents--position--right--force` on the wrapper) to override the contents’ own position in JavaScript, without changing editor/front-end CSS. This lets patterns control slide direction without editing the shared template part.
77+
78+
When using the right or left position, you can also control the width; by default it uses `overlay-contents--width--medium`, where the content will expand to a maximum of 632px.
79+
80+
| CLASS NAME | DESCRIPTION |
81+
| --------------------------------------------- | ------------------------------------------------------------------------------------------ |
82+
| overlay-contents | Class required to enable the overlay. |
83+
| overlay-contents--position--left | This is the default behavior, where the content will appear from the left. |
84+
| overlay-contents--position--right | In this case, the content will slide in from the right. |
85+
| overlay-contents--position--full-width | The content will take over the full screen. |
86+
| overlay-contents--position--left--force | Use on the parent template-part wrapper to force the content to slide in from the left. |
87+
| overlay-contents--position--right--force | Use on the parent template-part wrapper to force the content to slide in from the right. |
88+
| overlay-contents--position--full-width--force | Use on the parent template-part wrapper to force the content to take over the full screen. |
89+
| overlay-contents--width--x-small | The content will expand to a maximum of 300px. |
90+
| overlay-contents--width--small | The content will expand to a maximum of 410px. |
91+
| overlay-contents--width--medium | The content will expand to a maximum of 632px. |
92+
| overlay-contents--width--large | The content will expand to a maximum of 964px. |
93+
| overlay-contents--width--x-large | The content will expand to a maximum of 1296px. |

‎parts/search-contents.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"metadata":{"name":"Content"},"layout":{"type":"constrained"}} -->
2-
<div class="wp-block-group"><!-- wp:search {"buttonText":"Search","lock":{"move":true,"remove":true},"fontSize":"small"} /--></div>
1+
<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"metadata":{"name":"Search Contents"},"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
2+
<div class="wp-block-group" style="padding-right:0;padding-left:0">
3+
<!-- wp:search {"buttonText":"Search","lock":{"move":true,"remove":true},"fontSize":"small"} /-->
4+
</div>
35
<!-- /wp:group -->

0 commit comments

Comments
 (0)