Skip to content
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

Add margin-bottom lint rules for ToggleControl #64213

Merged
merged 13 commits into from
Aug 6, 2024
Merged

Add margin-bottom lint rules for ToggleControl #64213

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
aadf524
Fix in ImageSettingsPanel
mirka Aug 2, 2024
71287ed
Fix in block hooks
mirka Aug 2, 2024
e24495d
Fix in Avatar block
mirka Aug 2, 2024
c084230
Fix in Details block
mirka Aug 2, 2024
af06717
Fix in Latest posts block
mirka Aug 2, 2024
e9e48e0
Fix in Query Loop block
mirka Aug 2, 2024
f9d793e
Fix in Tag Cloud block
mirka Aug 2, 2024
2316998
Fix in Add New Pattern modal
mirka Aug 2, 2024
c2d8505
Fix in Create pattern modal
mirka Aug 2, 2024
1620be8
Fix in ReusableBlockConvertButton
mirka Aug 5, 2024
639fb00
Add eslint rule
mirka Aug 5, 2024
8ccb6a2
Add prop to docs
mirka Aug 6, 2024
e3e6b76
Fix up
mirka Aug 6, 2024
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
1 change: 1 addition & 0 deletions packages/block-editor/src/components/global-styles/image-settings-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export default function ImageSettingsPanel( {
panelId={ panelId }
>
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

In Global Styles, go to Blocks ▸ Image.

Global Styles Image block

label={ __( 'Expand on click' ) }
checked={ lightboxChecked }
onChange={ onChangeLightbox }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/block-hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ function BlockHooksControlPure( {

return (
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

Apply the following diff. In the Site Editor, go to Templates ▸ Single Posts template. See the block inspector for the Content block.

diff --git a/gutenberg.php b/gutenberg.php
index b12c346741..fe14f2cafb 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -74,3 +74,14 @@ function gutenberg_pre_init() {
 
 	require_once __DIR__ . '/lib/load.php';
 }
+
+add_filter( 'hooked_block_types', function ( $hooked_blocks, $position, $anchor_block ) {
+	if ( $anchor_block === 'core/post-content' && $position === 'after' ) {
+		// Add some core blocks after the post content.
+		$hooked_blocks[] = 'core/paragraph';
+		$hooked_blocks[] = 'core/separator';
+		$hooked_blocks[] = 'core/page-list';
+	}
+
+	return $hooked_blocks;
+}, 10, 3 );
ToggleControls in Content block inspector

checked={ checked }
key={ block.title }
label={
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/avatar/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const AvatarInspectorControls = ( {
/>
{ attributes.isLink && (
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instruction

In the editor, add an Avatar block. In the block inspector, enable the "Link to user profile" toggle.

Avatar block inspector

label={ __( 'Open in new tab' ) }
onChange={ ( value ) =>
setAttributes( {
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/details/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

In the editor, add a Details block and see the block inspector.

Details block inspector

label={ __( 'Open by default' ) }
checked={ showContent }
onChange={ () =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/latest-posts/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
<InspectorControls>
<PanelBody title={ __( 'Post content' ) }>
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

In the editor, add a Latest Posts block and see the block inspector.

Latest Posts block inspector

label={ __( 'Post content' ) }
checked={ displayPostContent }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default function EnhancedPaginationControl( {
return (
<>
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

In the editor, add a Query Loop block and choose the Standard pattern. See the block inspector.

Query Loop block inspector

label={ __( 'Force page reload' ) }
help={ help }
checked={
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/tag-cloud/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
required
/>
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

In the editor, add a Tag Cloud block and see the block inspector.

Tag Cloud block inspector

label={ __( 'Show tag counts' ) }
checked={ showTagCounts }
onChange={ () =>
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/init-pattern-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export default function InitPatternModal() {
__next40pxDefaultSize
/>
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

Go to wp-admin/post-new.php?post_type=wp_block.

Before After
Create pattern modal, before Create pattern modal, after

Copy link
Member Author

Choose a reason for hiding this comment

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

Related discussion about how much space we actually want before the primary button. Tl;dr — we're not sure yet.

label={ _x( 'Synced', 'pattern (singular)' ) }
help={ __(
'Sync this pattern across multiple locations.'
Expand Down
1 change: 1 addition & 0 deletions packages/patterns/src/components/create-pattern-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export function CreatePatternModalContents( {
categoryMap={ categoryMap }
/>
<ToggleControl
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

In the Site Editor, go to Patterns ▸ Add New Pattern ▸ Add New Pattern.

Before After
Add New Pattern modal, before Add New Pattern modal, after

label={ _x( 'Synced', 'pattern (singular)' ) }
help={ __(
'Sync this pattern across multiple locations.'
Expand Down
Loading