Skip to content

feat: switch header/footer to use WordPress's block visibility #432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
laurelfulford merged 5 commits into from
Apr 2, 2026
Merged

feat: switch header/footer to use WordPress's block visibility #432

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9282b4
feat: switch header/footer to use WordPress's block visibility
laurelfulford Mar 30, 2026
852ad00
fix: remove unused references to desktop- and mobile-only classes
laurelfulford Mar 30, 2026
f8b709f
fix: update supported WP version
laurelfulford Mar 30, 2026
d653ea7
fix: update responsive info in the UTILITY_CLASSES.md doc
laurelfulford Mar 30, 2026
9fa5c14
fix: remove unneeded MD details
laurelfulford Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions .github/UTILITY_CLASSES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,7 @@ Note: The font size still needs to be changed to x-small if we're recreating a N

# Responsive Elements

`mobile-only` and `desktop-only` can be applied to blocks to display them based on the screen size.

| CLASS NAME | DESCRIPTION |
| ------------ | ------------------------------------------------------------------------------- |
| mobile-only | The block will be displayed on the screen if it is 781px wide or less. |
| desktop-only | The block will be displayed on the screen if the screen is at least 782px wide. |
The Newspack Block Theme uses WordPress's blockVisibility to show/hide certain elements on desktop and mobile, including different versions of the header and footer template parts.
Copy link
Copy Markdown
Contributor

@thomasguillot thomasguillot Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whole section is now uncecessary.

Copy link
Copy Markdown
Contributor Author

@laurelfulford laurelfulford Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeaaaah I was totally overthinking that -- removed in 9fa5c14!


# Position

Expand Down
4 changes: 2 additions & 2 deletions parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:template-part {"slug":"footer-desktop","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"className":"footer-desktop desktop-only"} /-->
<!-- wp:template-part {"slug":"footer-desktop","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"className":"footer-desktop","metadata":{"blockVisibility":{"viewport":{"tablet":false,"mobile":false}}}} /-->

<!-- wp:template-part {"slug":"footer-mobile","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"className":"footer-mobile mobile-only"} /-->
<!-- wp:template-part {"slug":"footer-mobile","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"className":"footer-mobile", "metadata":{"blockVisibility":{"viewport":{"desktop":false}}}} /-->
4 changes: 2 additions & 2 deletions parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:template-part {"slug":"header-desktop","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"className":"header-desktop desktop-only"} /-->
<!-- wp:template-part {"slug":"header-desktop","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"metadata":{"blockVisibility":{"viewport":{"tablet":false,"mobile":false}}},"className":"header-desktop"} /-->

<!-- wp:template-part {"slug":"header-mobile","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"className":"header-mobile mobile-only"} /-->
<!-- wp:template-part {"slug":"header-mobile","theme":"newspack-block-theme","tagName":"div","lock":{"move":true,"remove":true},"metadata":{"blockVisibility":{"viewport":{"desktop":false}}},"className":"header-mobile"} /-->
14 changes: 0 additions & 14 deletions src/scss/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,20 +118,6 @@ ol {
}
}

// Mobile-only
.mobile-only {
@include sass-utils.media(medium) {
display: none !important;
}
}

// Desktop-only
.desktop-only {
@include sass-utils.media(small-only) {
display: none !important;
}
}

// Icons
[class*="newspack-icon"] {
line-height: 0;
Expand Down
4 changes: 2 additions & 2 deletions src/scss/_theme-description.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ Theme URI: https://github.com/automattic/newspack-block-theme
Author: Automattic
Author URI: https://newspack.com
Description: A forward-looking news theme designed and developed to be highly customizable with the WordPress block editor. Brought to you by Newspack: https://newspack.com
Requires at least: 6.2
Tested up to: 6.8
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.26.0
License: GNU General Public License v2 or later
Expand Down
Loading