Skip to content

Commit

Permalink
SelectControl: remove margin overrides and add new opt-in prop (#46448)
Browse files Browse the repository at this point in the history 
* SelectControl: remove margin overrides and add new opt-in prop

* remove margin overrides for components

* edits based on PR feedback
  • Loading branch information
@brookewp
brookewp authored Jan 6, 2023
1 parent 5dd408c commit 59ce2c8
Show file tree
Hide file tree
Showing 34 changed files with 68 additions and 39 deletions.
1 change: 1 addition & 0 deletions packages/block-editor/src/components/default-style-picker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export default function DefaultStylePicker( { blockName } ) {
onUpdatePreferredStyleVariations && (
<div className="default-style-picker__default-switcher">
<SelectControl
__nextHasNoMarginBottom
options={ selectOptions }
value={ preferredStyle || '' }
label={ __( 'Default Style' ) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/image-size-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default function ImageSizeControl( {
<>
{ ! isEmpty( imageSizeOptions ) && (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Image size' ) }
value={ slug }
options={ imageSizeOptions }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/archives/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
}
/>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Group by:' ) }
options={ [
{ label: __( 'Year' ), value: 'yearly' },
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/audio/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@ function AudioEdit( {
checked={ loop }
/>
<SelectControl
__nextHasNoMarginBottom
label={ _x( 'Preload', 'noun; Audio block parameter' ) }
value={ preload || '' }
// `undefined` is required for the preload attribute to be unset.
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/comments/edit/comments-inspector-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default function CommentsInspectorControls( {
<InspectorControls>
<InspectorControls __experimentalGroup="advanced">
<SelectControl
__nextHasNoMarginBottom
label={ __( 'HTML element' ) }
options={ [
{ label: __( 'Default (<div>)' ), value: 'div' },
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/file/inspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export default function FileBlockInspector( {
) }
<PanelBody title={ __( 'Settings' ) }>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Link to' ) }
value={ textLinkHref }
options={ linkDestinationOptions }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/gallery/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -531,6 +531,7 @@ function GalleryEdit( props ) {
help={ getImageCropHelp }
/>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Link to' ) }
value={ linkTo }
onChange={ setLinkTo }
Expand All @@ -546,6 +547,7 @@ function GalleryEdit( props ) {
) }
{ imageSizeOptions?.length > 0 && (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Image size' ) }
value={ sizeSlug }
options={ imageSizeOptions }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/gallery/v1/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,7 @@ function GalleryEdit( props ) {
help={ getImageCropHelp }
/>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Link to' ) }
value={ linkTo }
onChange={ setLinkTo }
Expand All @@ -428,6 +429,7 @@ function GalleryEdit( props ) {
/>
{ shouldShowSizeOptions && (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Image size' ) }
value={ sizeSlug }
options={ imageSizeOptions }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/group/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
return (
<InspectorControls __experimentalGroup="advanced">
<SelectControl
__nextHasNoMarginBottom
label={ __( 'HTML element' ) }
options={ [
{ label: __( 'Default (<div>)' ), value: 'div' },
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/post-author/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ function PostAuthorEdit( {
/>
) ) || (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Author' ) }
value={ authorId }
options={ authorOptions }
Expand All @@ -127,6 +128,7 @@ function PostAuthorEdit( {
/>
{ showAvatar && (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Avatar size' ) }
value={ attributes.avatarSize }
options={ avatarSizes }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/post-featured-image/dimension-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ const DimensionControls = ( {
panelId={ clientId }
>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Image size' ) }
value={ sizeSlug || DEFAULT_SIZE }
options={ imageSizeOptions }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ export default function QueryInspectorControls( {
) }
{ showPostTypeControl && (
<SelectControl
__nextHasNoMarginBottom
options={ postTypesSelectOptions }
value={ postType }
label={ __( 'Post type' ) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/query/edit/inspector-controls/order-control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const orderOptions = [
function OrderControl( { order, orderBy, onChange } ) {
return (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Order by' ) }
value={ `${ orderBy }/${ order }` }
options={ orderOptions }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/query/edit/inspector-controls/sticky-control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const stickyOptions = [
export default function StickyControl( { value, onChange } ) {
return (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Sticky posts' ) }
options={ stickyOptions }
value={ value }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/query/edit/query-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ export default function QueryContent( {
</BlockControls>
<InspectorControls __experimentalGroup="advanced">
<SelectControl
__nextHasNoMarginBottom
label={ __( 'HTML element' ) }
options={ [
{ label: __( 'Default (<div>)' ), value: 'div' },
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/tag-cloud/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Taxonomy' ) }
options={ getTaxonomyOptions() }
value={ taxonomy }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/template-part/edit/advanced-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export function TemplatePartAdvancedControls( {
/>

<SelectControl
__nextHasNoMarginBottom
label={ __( 'Area' ) }
labelPosition="top"
options={ areaOptions }
Expand All @@ -72,6 +73,7 @@ export function TemplatePartAdvancedControls( {
</>
) }
<SelectControl
__nextHasNoMarginBottom
label={ __( 'HTML element' ) }
options={ [
{
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/video/edit-common-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
checked={ !! playsInline }
/>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Preload' ) }
value={ preload }
onChange={ onChangePreload }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/video/tracks-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
/>
</div>
<SelectControl
__nextHasNoMarginBottom
className="block-library-video-tracks-editor__single-track-editor-kind-select"
options={ KIND_OPTIONS }
value={ kind }
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
### Internal

- `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)).
- `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).

### Bug Fix

Expand Down
1 change: 1 addition & 0 deletions packages/components/src/color-picker/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ const ColorPicker = (
<AuxiliaryColorArtefactWrapper>
<AuxiliaryColorArtefactHStackHeader justify="space-between">
<SelectControl
__nextHasNoMarginBottom
options={ options }
value={ colorType }
onChange={ ( nextColorType ) =>
Expand Down
5 changes: 0 additions & 5 deletions packages/components/src/color-picker/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import styled from '@emotion/styled';
import NumberControl from '../number-control';
import InnerSelectControl from '../select-control';
import InnerRangeControl from '../range-control';
import { StyledField } from '../base-control/styles/base-control-styles';
import { space } from '../ui/utils/space';
import { boxSizingReset } from '../utils';
import Button from '../button';
Expand Down Expand Up @@ -111,10 +110,6 @@ export const ColorfulWrapper = styled.div`
}
${ interactiveHueStyles }
${ StyledField } {
margin-bottom: 0;
}
`;

export const CopyButton = styled( Button )`
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/query-controls/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default function QueryControls( {
return [
onOrderChange && onOrderByChange && (
<SelectControl
__nextHasNoMarginBottom
key="query-controls-order-select"
label={ __( 'Order by' ) }
value={ `${ orderBy }/${ order }` }
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/sidebar/post-template/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ export default function PostTemplateForm( { onClose } ) {
</Notice>
) : (
<SelectControl
__nextHasNoMarginBottom
hideLabelFromVision
label={ __( 'Template' ) }
value={ selectedOption?.value ?? '' }
Expand Down
2 changes: 2 additions & 0 deletions ...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,8 @@ export default function NavigationInspector() {
) }
{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
<SelectControl
__nextHasNoMarginBottom
className="edit-site-navigation-inspector__select-menu"
aria-controls={
// aria-controls should only apply when referenced element is in DOM
hasLoadedInnerBlocks ? navMenuListId : undefined
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
.block-editor-list-view-block__menu-cell {
padding-right: 0;
}

.edit-site-navigation-inspector__select-menu {
margin-bottom: $grid-unit-10;
}
}

.edit-site-navigation-inspector__placeholder {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/template-details/edit-template-title.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default function EditTemplateTitle( { template } ) {

return (
<TextControl
__nextHasNoMarginBottom
label={ __( 'Title' ) }
value={ forceEmpty ? '' : title }
help={
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/template-details/template-part-area-selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default function TemplatePartAreaSelector( { id } ) {

return (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Area' ) }
labelPosition="top"
options={ areaOptions }
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-author/select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ function PostAuthorSelect() {

return (
<SelectControl
__nextHasNoMarginBottom
className="post-author-selector"
label={ __( 'Author' ) }
options={ authorOptions }
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-format/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export default function PostFormat() {
<PostFormatCheck>
<div className="editor-post-format">
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Post Format' ) }
value={ postFormat }
onChange={ ( format ) => onUpdatePostFormat( format ) }
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-template/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export function PostTemplate() {

return (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Template:' ) }
value={ selectedTemplate }
onChange={ ( templateSlug ) => {
Expand Down
54 changes: 29 additions & 25 deletions packages/widgets/src/blocks/legacy-widget/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
BlockIcon,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { Spinner, Placeholder } from '@wordpress/components';
import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
import { brush as brushIcon } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { useState, useCallback } from '@wordpress/element';
Expand Down Expand Up @@ -57,30 +57,34 @@ function Empty( { attributes: { id, idBase }, setAttributes } ) {
icon={ <BlockIcon icon={ brushIcon } /> }
label={ __( 'Legacy Widget' ) }
>
<WidgetTypeSelector
selectedId={ id ?? idBase }
onSelect={ ( { selectedId, isMulti } ) => {
if ( ! selectedId ) {
setAttributes( {
id: null,
idBase: null,
instance: null,
} );
} else if ( isMulti ) {
setAttributes( {
id: null,
idBase: selectedId,
instance: {},
} );
} else {
setAttributes( {
id: selectedId,
idBase: null,
instance: null,
} );
}
} }
/>
<Flex>
<FlexBlock>
<WidgetTypeSelector
selectedId={ id ?? idBase }
onSelect={ ( { selectedId, isMulti } ) => {
if ( ! selectedId ) {
setAttributes( {
id: null,
idBase: null,
instance: null,
} );
} else if ( isMulti ) {
setAttributes( {
id: null,
idBase: selectedId,
instance: {},
} );
} else {
setAttributes( {
id: selectedId,
idBase: null,
instance: null,
} );
}
} }
/>
</FlexBlock>
</Flex>
</Placeholder>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {

return (
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Select a legacy widget to display:' ) }
value={ selectedId ?? '' }
options={ [
Expand Down
9 changes: 0 additions & 9 deletions packages/widgets/src/blocks/legacy-widget/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,12 +163,3 @@
min-width: 400px;
}

.wp-block-legacy-widget {
.components-base-control {
width: 100%;
}
.components-select-control__input {
padding: 0;
font-family: system-ui;
}
}

1 comment on commit 59ce2c8

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 59ce2c8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3857715179
📝 Reported issues:

Please sign in to comment.