Skip to content

fix: prevent content-gate editor.scss styles from getting chunked into the common.css file #4716

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

Open
laurelfulford wants to merge 6 commits into
base: release
Choose a base branch
from
+54 −32
Open

fix: prevent content-gate editor.scss styles from getting chunked into the common.css file #4716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
edbbfac
fix: override bottom margin
laurelfulford May 11, 2026
283c05d
fix: move access control styles to own file
laurelfulford May 11, 2026
1c9859b
fix: add CSS class for better specificity
laurelfulford May 11, 2026
4d466c6
fix: actually enqueue new styles
laurelfulford May 26, 2026
e5a95b5
fix: restore spacing on metering and post-exemption panels
laurelfulford May 26, 2026
15c6a2b
fix: use grid-unit token for content gate panel spacing
laurelfulford May 26, 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: 7 additions & 0 deletions includes/content-gate/class-block-visibility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,13 @@ public static function enqueue_block_editor_assets() {
true
);

wp_enqueue_style(
'newspack-content-gate-block-visibility',
Newspack::plugin_url() . '/dist/content-gate-block-visibility.css',
[],
$asset['version']
);

wp_localize_script(
'newspack-content-gate-block-visibility',
'newspackBlockVisibility',
Expand Down
24 changes: 24 additions & 0 deletions src/content-gate/editor/block-visibility.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@use "~@wordpress/base-styles/variables" as wp-vars;

.newspack-access-control-block-visibility-panel {
.components-base-control,
.components-form-token-field {
width: 100%;
}
// Gutenberg's `.block-editor-block-inspector p:not(.components-base-control__help)` rule
// strips the emotion margin-top on FormTokenField's help text. Nested here to bump
// specificity above Gutenberg's and restore the gap.
.components-form-token-field .components-form-token-field__help {
margin-top: wp-vars.$grid-unit-10;
}
.components-toggle-control {
margin-top: wp-vars.$grid-unit-10;
width: 100%;
.components-base-control__field {
margin-bottom: wp-vars.$grid-unit-05;
}
.components-base-control__help {
margin-top: 0;
}
}
}
2 changes: 1 addition & 1 deletion src/content-gate/editor/block-visibility.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import './editor.scss';
import './block-visibility.scss';
Copy link
Copy Markdown
Member

@adekbadek adekbadek May 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Blocker: Moving these styles into a dedicated block-visibility.scss makes this the only importer, so Webpack now emits dist/content-gate-block-visibility.css instead of folding the rules into commons.css. But Block_Visibility (includes/content-gate/class-block-visibility.php) only wp_enqueue_scripts content-gate-block-visibility.js — there's no matching wp_enqueue_style.

Verified in a built env: on the post editor the script loads but the stylesheet does not, so the Access Control panel loses its width: 100%, FormTokenField help spacing, and ToggleControl spacing. Add wp_enqueue_style( 'newspack-content-gate-block-visibility', Newspack::plugin_url() . '/dist/content-gate-block-visibility.css', [], $asset['version'] ); next to the script enqueue.

image

Copy link
Copy Markdown
Contributor Author

@laurelfulford laurelfulford May 26, 2026

Choose a reason for hiding this comment

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

🤦‍♀️ Helps to actually enqueue the CSS to have it used. Thanks @adekbadek! This should be fixed in 4d466c6.


/**
* Target block types that receive access control attributes.
Expand Down
12 changes: 10 additions & 2 deletions src/content-gate/editor/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@ function GateEdit() {
<p>{ __( "Newspack Campaign prompts won't be displayed when rendering gated content.", 'newspack-plugin' ) }</p>
</PluginPostStatusInfo>
) }
<PluginDocumentSettingPanel name="content-gate-styles-panel" title={ __( 'Styles', 'newspack-plugin' ) }>
<PluginDocumentSettingPanel
name="content-gate-styles-panel"
className="newspack-content-gate-panel"
title={ __( 'Styles', 'newspack-plugin' ) }
>
<div className="newspack-content-gate-style-selector">
{ styles.map( style => (
<Button
Expand Down Expand Up @@ -105,7 +109,11 @@ function GateEdit() {
</Fragment>
) }
</PluginDocumentSettingPanel>
<PluginDocumentSettingPanel name="content-gate-settings-panel" title={ __( 'Settings', 'newspack-plugin' ) }>
<PluginDocumentSettingPanel
name="content-gate-settings-panel"
className="newspack-content-gate-panel"
title={ __( 'Settings', 'newspack-plugin' ) }
>
<TextControl
type="number"
min="0"
Expand Down
29 changes: 2 additions & 27 deletions src/content-gate/editor/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
display: none;
}

.components-base-control {
margin-bottom: 16px;
.newspack-content-gate-panel .components-base-control {
Copy link
Copy Markdown
Member

@adekbadek adekbadek May 21, 2026

Choose a reason for hiding this comment

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

Suggestion: Scoping this rule under .newspack-content-gate-panel only covers the two panels in editor.js that received the class. The content-gate-metering-panel (metering-settings.js: Checkbox/Text/Select controls) and content-gate-post-exemptions-panel (post-settings.js: a ToggleControl) also render .components-base-controls, don't carry the class, and don't use __nextHasNoMarginBottom — so they lose the 16px spacing they previously got from the global rule. Either add the class to those panels too or pull it into a shared constant so the next panel doesn't rediscover this.

Copy link
Copy Markdown
Contributor Author

@laurelfulford laurelfulford May 26, 2026

Choose a reason for hiding this comment

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

Confirmed that this got cozy on the Metering Settings - before:

CleanShot 2026-05-26 at 13 49 51

Should look like this now:

CleanShot 2026-05-26 at 13 50 30

Best I can tell Access control settings looks the same in either case, likely because they just have the one toggle right now -- adding the class doesn't hurt, either:

CleanShot 2026-05-26 at 14 02 42

Classes added to both in e5a95b5.

margin-bottom: wp-vars.$grid-unit-20;
&:last-child {
margin-bottom: 0;
}
Expand Down Expand Up @@ -58,28 +58,3 @@
display: none;
}

/**
* Access control block visibility panel.
*/
.newspack-access-control-block-visibility-panel {
.components-base-control,
.components-form-token-field {
width: 100%;
}
// Gutenberg's `.block-editor-block-inspector p:not(.components-base-control__help)` rule
// strips the emotion margin-top on FormTokenField's help text. Nested here to bump
// specificity above Gutenberg's and restore the gap.
.components-form-token-field .components-form-token-field__help {
margin-top: wp-vars.$grid-unit-10;
}
.components-toggle-control {
margin-top: wp-vars.$grid-unit-10;
width: 100%;
.components-base-control__field {
margin-bottom: wp-vars.$grid-unit-05;
}
.components-base-control__help {
margin-top: 0;
}
}
}
6 changes: 5 additions & 1 deletion src/content-gate/editor/metering-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ function MeteringSettings() {
} );
const { editPost } = useDispatch( 'core/editor' );
return (
<PluginDocumentSettingPanel name="content-gate-metering-panel" title={ __( 'Metering', 'newspack-plugin' ) }>
<PluginDocumentSettingPanel
name="content-gate-metering-panel"
className="newspack-content-gate-panel"
title={ __( 'Metering', 'newspack-plugin' ) }
>
<CheckboxControl
label={ __( 'Enable metering', 'newspack-plugin' ) }
checked={ meta.metering }
Expand Down
6 changes: 5 additions & 1 deletion src/content-gate/editor/post-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@ function PostSettings() {
);

return (
<PluginDocumentSettingPanel name="content-gate-post-exemptions-panel" title={ __( 'Access control settings', 'newspack-plugin' ) }>
<PluginDocumentSettingPanel
name="content-gate-post-exemptions-panel"
className="newspack-content-gate-panel"
title={ __( 'Access control settings', 'newspack-plugin' ) }
>
{ matchingGates.length > 0 ? (
<p>
{ __( 'Gates that apply to this post: ', 'newspack-plugin' ) }
Expand Down
Loading