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

Jump to bottom

ToggleControl: remove margin overrides and add opt-in prop #47866

Merged
merged 3 commits into from
Mar 1, 2023
Merged

ToggleControl: remove margin overrides and add opt-in prop #47866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6daaa19
ToggleControl: remove margin overrides and add opt-in prop
brookewp Feb 8, 2023
376f2fd
Replace span with help prop
brookewp Feb 8, 2023
2cb814c
Remove CSS for removed class
brookewp Feb 28, 2023
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/block-lock/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
</ul>
{ hasTemplateLock && (
<ToggleControl
__nextHasNoMarginBottom
className="block-editor-block-lock-modal__template-lock"
label={ __( 'Apply to all blocks inside' ) }
checked={ applyTemplateLock }
Expand Down
9 changes: 0 additions & 9 deletions packages/block-editor/src/components/block-lock/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,6 @@
.components-checkbox-control__label {
font-weight: 600;
}

.components-base-control__field {
align-items: center;
display: flex;
}
}
.block-editor-block-lock-modal__checklist-item {
display: flex;
Expand All @@ -48,10 +43,6 @@
border-top: $border-width solid $gray-300;
margin-top: $grid-unit-20;
padding: $grid-unit-15 0;

.components-base-control__field {
margin: 0;
}
}

.block-editor-block-lock-modal__actions {
Expand Down
14 changes: 6 additions & 8 deletions packages/block-editor/src/components/date-format-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,12 @@ export default function DateFormatPicker( {
<fieldset className="block-editor-date-format-picker">
<VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden>
<ToggleControl
label={
<>
{ __( 'Default format' ) }
<span className="block-editor-date-format-picker__default-format-toggle-control__hint">
Copy link
Member

Choose a reason for hiding this comment

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

Can we also remove the associated CSS?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, good catch! Will update this, rebase, and then merge.

{ dateI18n( defaultFormat, EXAMPLE_DATE ) }
</span>
</>
}
__nextHasNoMarginBottom
label={ __( 'Default format' ) }
help={ `${ __( 'Example:' ) } ${ dateI18n(
defaultFormat,
EXAMPLE_DATE
) }` }
checked={ ! format }
onChange={ ( checked ) =>
onChange( checked ? null : defaultFormat )
Expand Down
5 changes: 0 additions & 5 deletions packages/block-editor/src/components/date-format-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,6 @@
margin-bottom: $grid-unit-20;
}

.block-editor-date-format-picker__default-format-toggle-control__hint {
color: $gray-700;
display: block;
}

.block-editor-date-format-picker__custom-format-select-control__custom-option {
border-top: 1px solid $gray-300;

Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/link-control/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {

const theSettings = settings.map( ( setting ) => (
<ToggleControl
__nextHasNoMarginBottom
className="block-editor-link-control__setting"
key={ setting.id }
label={ setting.title }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/responsive-block-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ function ResponsiveBlockControl( props ) {

<div className="block-editor-responsive-block-control__inner">
<ToggleControl
__nextHasNoMarginBottom
className="block-editor-responsive-block-control__toggle"
label={ toggleControlLabel }
checked={ ! isResponsive }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/url-popover/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const TestURLPopover = () => {
onClose={ close }
renderSettings={ () => (
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Open in new tab' ) }
onChange={ setTarget }
/>
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@ function LayoutPanel( {
{ showInheritToggle && (
<>
<ToggleControl
__nextHasNoMarginBottom
className="block-editor-hooks__toggle-control"
label={ __( 'Inner blocks use content width' ) }
checked={
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/layouts/flex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,7 @@ function FlexWrapControl( { layout, onChange } ) {
const { flexWrap = 'wrap' } = layout;
return (
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Allow to wrap to multiple lines' ) }
onChange={ ( value ) => {
onChange( {
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/archives/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display as dropdown' ) }
checked={ displayAsDropdown }
onChange={ () =>
Expand All @@ -29,6 +30,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
/>
{ displayAsDropdown && (
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show label' ) }
checked={ showLabel }
onChange={ () =>
Expand All @@ -39,6 +41,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
/>
) }
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show post counts' ) }
checked={ showPostCounts }
onChange={ () =>
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,12 +207,14 @@ function AudioEdit( {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Autoplay' ) }
onChange={ toggleAttribute( 'autoplay' ) }
checked={ autoplay }
help={ getAutoplayHelp }
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Loop' ) }
onChange={ toggleAttribute( 'loop' ) }
checked={ loop }
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 @@ -48,6 +48,7 @@ const AvatarInspectorControls = ( {
value={ attributes?.size }
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Link to user profile' ) }
onChange={ () =>
setAttributes( { isLink: ! attributes.isLink } )
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/categories/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,27 +143,32 @@ export default function CategoriesEdit( {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display as dropdown' ) }
checked={ displayAsDropdown }
onChange={ toggleAttribute( 'displayAsDropdown' ) }
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show post counts' ) }
checked={ showPostCounts }
onChange={ toggleAttribute( 'showPostCounts' ) }
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show only top level categories' ) }
checked={ showOnlyTopLevel }
onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show empty categories' ) }
checked={ showEmpty }
onChange={ toggleAttribute( 'showEmpty' ) }
/>
{ ! showOnlyTopLevel && (
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show hierarchy' ) }
checked={ showHierarchy }
onChange={ toggleAttribute( 'showHierarchy' ) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ function ColumnsEditContainer( {
</Notice>
) }
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Stack on mobile' ) }
checked={ isStackedOnMobile }
onChange={ () =>
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/comment-author-name/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,14 @@ export default function Edit( {
<InspectorControls>
<PanelBody title={ __( 'Link settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Link to authors URL' ) }
onChange={ () => setAttributes( { isLink: ! isLink } ) }
checked={ isLink }
/>
{ isLink && (
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Open in new tab' ) }
onChange={ ( value ) =>
setAttributes( {
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/comment-date/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default function Edit( {
}
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Link to comment' ) }
onChange={ () => setAttributes( { isLink: ! isLink } ) }
checked={ isLink }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/comment-edit-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function Edit( {
<InspectorControls>
<PanelBody title={ __( 'Link settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Open in new tab' ) }
onChange={ ( value ) =>
setAttributes( {
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/comments-title/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,15 @@ export default function Edit( {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show post title' ) }
checked={ showPostTitle }
onChange={ ( value ) =>
setAttributes( { showPostTitle: value } )
}
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show comments count' ) }
checked={ showCommentsCount }
onChange={ ( value ) =>
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/cover/edit/inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,12 +171,14 @@ export default function CoverInspectorControls( {
{ isImageBackground && (
<>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Fixed background' ) }
checked={ hasParallax }
onChange={ toggleParallax }
/>

<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Repeated background' ) }
checked={ isRepeated }
onChange={ toggleIsRepeated }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/embed/embed-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const EmbedControls = ( {
className="blocks-responsive"
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Resize for smaller devices' ) }
checked={ allowResponsive }
help={ getResponsiveHelp }
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/file/inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default function FileBlockInspector( {
{ href.endsWith( '.pdf' ) && (
<PanelBody title={ __( 'PDF settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show inline embed' ) }
help={
displayPreview
Expand Down Expand Up @@ -78,11 +79,13 @@ export default function FileBlockInspector( {
onChange={ changeLinkDestinationOption }
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Open in new tab' ) }
checked={ openInNewWindow }
onChange={ changeOpenInNewWindow }
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show download button' ) }
checked={ showDownloadButton }
onChange={ changeShowDownloadButton }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -565,6 +565,7 @@ function GalleryEdit( props ) {
/>
) }
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Crop images' ) }
checked={ !! imageCrop }
onChange={ toggleImageCrop }
Expand All @@ -580,6 +581,7 @@ function GalleryEdit( props ) {
/>
{ hasLinkTo && (
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Open in new tab' ) }
checked={ linkTarget === '_blank' }
onChange={ toggleOpenInNewTab }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/gallery/v1/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,7 @@ function GalleryEdit( props ) {
/>
) }
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Crop images' ) }
checked={ !! imageCrop }
onChange={ toggleImageCrop }
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/latest-comments/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,23 @@ export default function LatestComments( { attributes, setAttributes } ) {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display avatar' ) }
checked={ displayAvatar }
onChange={ () =>
setAttributes( { displayAvatar: ! displayAvatar } )
}
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display date' ) }
checked={ displayDate }
onChange={ () =>
setAttributes( { displayDate: ! displayDate } )
}
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display excerpt' ) }
checked={ displayExcerpt }
onChange={ () =>
Expand Down
4 changes: 4 additions & 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 @@ -247,13 +247,15 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {

<PanelBody title={ __( 'Post meta settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display author name' ) }
checked={ displayAuthor }
onChange={ ( value ) =>
setAttributes( { displayAuthor: value } )
}
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display post date' ) }
checked={ displayPostDate }
onChange={ ( value ) =>
Expand All @@ -264,6 +266,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {

<PanelBody title={ __( 'Featured image settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display featured image' ) }
checked={ displayFeaturedImage }
onChange={ ( value ) =>
Expand Down Expand Up @@ -315,6 +318,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
/>
</BaseControl>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Add link to featured image' ) }
checked={ addLinkToFeaturedImage }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/list/ordered-list-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
step="1"
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Reverse list numbering' ) }
checked={ reversed || false }
onChange={ ( value ) => {
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/loginout/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display login as form' ) }
checked={ displayLoginAsForm }
onChange={ () =>
Expand All @@ -22,6 +23,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
}
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Redirect to current URL' ) }
checked={ redirectToCurrent }
onChange={ () =>
Expand Down
Loading