From 3b13ff33cca4017fa810fded49f1bbe53d9ae2d6 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Jan 2023 23:33:00 -0800 Subject: [PATCH 1/5] TextControl: remove margin overrides and add new opt-in prop - with minor visual changes --- .../components/date-format-picker/index.js | 1 + .../components/date-format-picker/style.scss | 10 +- .../url-popover/image-url-input-ui.js | 8 +- .../src/components/url-popover/style.scss | 16 +- .../block-library/src/post-comment/edit.js | 1 + .../block-library/src/social-link/edit.js | 2 + .../src/template-part/edit/title-modal.js | 26 ++-- packages/block-library/src/video/editor.scss | 35 +---- .../block-library/src/video/tracks-editor.js | 25 +++- .../src/placeholder/stories/index.tsx | 1 + .../create-template-part-modal/index.js | 141 ++++++++++-------- .../create-template-part-modal/style.scss | 10 -- 12 files changed, 127 insertions(+), 149 deletions(-) diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js index 555910d70f76c..52085b833e94e 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -135,6 +135,7 @@ function NonDefaultControls( { format, onChange } ) { { isCustom && ( + - + ); const linkEditorValue = urlInput !== null ? urlInput : url; diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss index 2ef1009019e4e..a57f300a703d1 100644 --- a/packages/block-editor/src/components/url-popover/style.scss +++ b/packages/block-editor/src/components/url-popover/style.scss @@ -2,11 +2,13 @@ border-top: $border-width solid $gray-300; } -.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg { +.block-editor-url-popover__additional-controls > div[role="menu"] +.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg { box-shadow: none; } -.block-editor-url-popover__additional-controls div[role="menu"] > .components-button { +.block-editor-url-popover__additional-controls +div[role="menu"] > .components-button { padding-left: $grid-unit-15; } @@ -52,12 +54,6 @@ transform: rotate(180deg); } } -.block-editor-url-popover__input-container { - .components-base-control:last-child, - .components-base-control:last-child .components-base-control__field { - margin-bottom: 0; - } -} .block-editor-url-popover__settings { display: block; @@ -68,10 +64,6 @@ .block-editor-url-popover__link-editor, .block-editor-url-popover__link-viewer { display: flex; - - .block-editor-url-input .components-base-control__field { - margin-bottom: 0; - } } .block-editor-url-popover__link-viewer-url { diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js index 7a012042dcfab..35c0eee93308f 100644 --- a/packages/block-library/src/post-comment/edit.js +++ b/packages/block-library/src/post-comment/edit.js @@ -43,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) { ) } > setCommentIdInput( parseInt( val ) ) diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js index 01863f1fd7e74..96714e55e2562 100644 --- a/packages/block-library/src/social-link/edit.js +++ b/packages/block-library/src/social-link/edit.js @@ -102,6 +102,7 @@ const SocialLinkEdit = ( { > setAttributes( { rel: value } ) } diff --git a/packages/block-library/src/template-part/edit/title-modal.js b/packages/block-library/src/template-part/edit/title-modal.js index f5336e718e57a..94f512aa457b7 100644 --- a/packages/block-library/src/template-part/edit/title-modal.js +++ b/packages/block-library/src/template-part/edit/title-modal.js @@ -5,10 +5,10 @@ import { useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { TextControl, - Flex, - FlexItem, Button, Modal, + __experimentalHStack as HStack, + __experimentalVStack as VStack, } from '@wordpress/components'; export default function TitleModal( { areaLabel, onClose, onSubmit } ) { @@ -33,16 +33,14 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) { onRequestClose={ onClose } >
- - - + + + - - + + ); diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index 60c68fb74d1be..21689c4fa90e9 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -71,36 +71,19 @@ } .block-library-video-tracks-editor__track-list-track { - display: flex; - place-content: space-between; - align-items: baseline; padding-left: $grid-unit-15; } -.block-library-video-tracks-editor__single-track-editor-label-language { - display: flex; - margin-top: $grid-unit-15; - & > .components-base-control { - width: 50%; - } - & > .components-base-control:first-child { - margin-right: $grid-unit-20; - } -} - .block-library-video-tracks-editor__single-track-editor-kind-select { max-width: 240px; } .block-library-video-tracks-editor__single-track-editor-buttons-container { - display: flex; - place-content: space-between; - margin-top: $grid-unit-40; + margin-top: $grid-unit-20; } .block-library-video-tracks-editor__single-track-editor-edit-track-label { margin-top: $grid-unit-05; - margin-bottom: $grid-unit-15; color: $gray-700; text-transform: uppercase; font-size: 11px; @@ -126,17 +109,7 @@ padding: $grid-unit-15; } -.block-library-video-tracks-editor__single-track-editor .components-base-control { - .components-base-control__label { - margin-bottom: $grid-unit-05; - } - .components-base-control__field { - margin-bottom: $grid-unit-15; - } - .components-text-control__input { - margin-left: 0; - } - .components-input-control__label { - margin-bottom: $grid-unit-05; - } +.block-library-video-tracks-editor__single-track-editor-track-title, +.block-library-video-tracks-editor__single-track-editor-source-language { + flex: 1; } diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js index a9c9e24c53f73..a9df0d4f4c228 100644 --- a/packages/block-library/src/video/tracks-editor.js +++ b/packages/block-library/src/video/tracks-editor.js @@ -13,6 +13,8 @@ import { Button, TextControl, SelectControl, + __experimentalHStack as HStack, + __experimentalVStack as VStack, } from '@wordpress/components'; import { MediaUpload, @@ -49,7 +51,7 @@ function TrackList( { tracks, onEditPress } ) { } else { content = tracks.map( ( track, index ) => { return ( -
@@ -65,7 +67,7 @@ function TrackList( { tracks, onEditPress } ) { > { __( 'Edit' ) } -
+ ); } ); } @@ -84,15 +86,20 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) { const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || ''; return ( -
+ { __( 'Edit track' ) } { __( 'File' ) }: { fileName } -
+ onChange( { ...track, @@ -117,7 +126,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) { value={ srcLang } help={ __( 'Language tag (en, fr, etc.)' ) } /> -
+ -
+ -
-
+ + ); } diff --git a/packages/components/src/placeholder/stories/index.tsx b/packages/components/src/placeholder/stories/index.tsx index e501b98c4b0e6..3796c8efd1e60 100644 --- a/packages/components/src/placeholder/stories/index.tsx +++ b/packages/components/src/placeholder/stories/index.tsx @@ -44,6 +44,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
- - - + + - { templatePartAreas.map( - ( { icon, label, area: value, description } ) => ( - - - - - - - { label } -
{ description }
- - - - { area === value && ( - - ) } - - - - ) - ) } - - - - - - - - - - + { templatePartAreas.map( + ( { + icon, + label, + area: value, + description, + } ) => ( + + + + + + + { label } +
{ description }
+ + + + { area === value && ( + + ) } + + + + ) + ) } + + + + + + + + + + + ); diff --git a/packages/edit-site/src/components/create-template-part-modal/style.scss b/packages/edit-site/src/components/create-template-part-modal/style.scss index 71bba3db9974d..1dba3be142cea 100644 --- a/packages/edit-site/src/components/create-template-part-modal/style.scss +++ b/packages/edit-site/src/components/create-template-part-modal/style.scss @@ -8,16 +8,6 @@ } } - -.edit-site-create-template-part-modal__modal-actions { - padding-top: $grid-unit-15; -} - -.edit-site-create-template-part-modal__area-base-control .components-base-control__label { - margin: $grid-unit-20 0 $grid-unit-10; - cursor: auto; -} - .edit-site-create-template-part-modal__area-radio-group { width: 100%; border: $border-width solid $gray-700; From c17e550120e69afe3e0cfe459017a0cc6c6d783b Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 17 Jan 2023 13:59:50 -0800 Subject: [PATCH 2/5] Replace CSS with components based on PR feedback --- .../components/date-format-picker/index.js | 46 +++++++++---------- .../components/date-format-picker/style.scss | 4 -- packages/block-library/src/video/editor.scss | 8 ---- .../block-library/src/video/tracks-editor.js | 9 ++-- 4 files changed, 26 insertions(+), 41 deletions(-) diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js index 52085b833e94e..6bda9f933e366 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -9,8 +9,8 @@ import { ExternalLink, VisuallyHidden, CustomSelectControl, - BaseControl, ToggleControl, + __experimentalVStack as VStack, } from '@wordpress/components'; // So that we can illustrate the different formats in the dropdown properly, @@ -110,29 +110,27 @@ function NonDefaultControls( { format, onChange } ) { ); return ( - <> - - option.format === format - ) ?? customOption + + option.format === format + ) ?? customOption + } + onChange={ ( { selectedItem } ) => { + if ( selectedItem === customOption ) { + setIsCustom( true ); + } else { + setIsCustom( false ); + onChange( selectedItem.format ); } - onChange={ ( { selectedItem } ) => { - if ( selectedItem === customOption ) { - setIsCustom( true ); - } else { - setIsCustom( false ); - onChange( selectedItem.format ); - } - } } - /> - + } } + /> { isCustom && ( onChange( value ) } /> ) } - + ); } diff --git a/packages/block-editor/src/components/date-format-picker/style.scss b/packages/block-editor/src/components/date-format-picker/style.scss index 9d3db2dbef9fc..f8d82c591cc0a 100644 --- a/packages/block-editor/src/components/date-format-picker/style.scss +++ b/packages/block-editor/src/components/date-format-picker/style.scss @@ -1,9 +1,5 @@ .block-editor-date-format-picker { margin-bottom: $grid-unit-20; - - .block-editor-date-format-picker__custom-format-select-control { - margin-bottom: 0; - } } .block-editor-date-format-picker__default-format-toggle-control__hint { diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index 21689c4fa90e9..f1a7a0b27173e 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -78,10 +78,6 @@ max-width: 240px; } -.block-library-video-tracks-editor__single-track-editor-buttons-container { - margin-top: $grid-unit-20; -} - .block-library-video-tracks-editor__single-track-editor-edit-track-label { margin-top: $grid-unit-05; color: $gray-700; @@ -109,7 +105,3 @@ padding: $grid-unit-15; } -.block-library-video-tracks-editor__single-track-editor-track-title, -.block-library-video-tracks-editor__single-track-editor-source-language { - flex: 1; -} diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js index a9df0d4f4c228..c4b04549ababe 100644 --- a/packages/block-library/src/video/tracks-editor.js +++ b/packages/block-library/src/video/tracks-editor.js @@ -13,6 +13,7 @@ import { Button, TextControl, SelectControl, + __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, } from '@wordpress/components'; @@ -88,7 +89,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) { { __( 'Edit track' ) } @@ -96,10 +97,9 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) { { __( 'File' ) }: { fileName } - + onChange( { ...track, @@ -126,7 +125,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) { value={ srcLang } help={ __( 'Language tag (en, fr, etc.)' ) } /> - + Date: Tue, 17 Jan 2023 14:00:13 -0800 Subject: [PATCH 3/5] Revert CSS to previous state based on unintended change --- packages/block-editor/src/components/url-popover/style.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss index a57f300a703d1..b0aacc5ff6e41 100644 --- a/packages/block-editor/src/components/url-popover/style.scss +++ b/packages/block-editor/src/components/url-popover/style.scss @@ -2,13 +2,11 @@ border-top: $border-width solid $gray-300; } -.block-editor-url-popover__additional-controls > div[role="menu"] -.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg { +.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg { box-shadow: none; } -.block-editor-url-popover__additional-controls -div[role="menu"] > .components-button { +.block-editor-url-popover__additional-controls div[role="menu"] > .components-button { padding-left: $grid-unit-15; } From 5dcf0a4101679d8f714bb8e77235e219cdadbaad Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 17 Jan 2023 17:10:55 -0800 Subject: [PATCH 4/5] Add prop and VStack to additional component --- .../hierarchical-term-selector.js | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js index 58734bea26789..ed6548e2aafa4 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -14,6 +14,7 @@ import { TextControl, TreeSelect, withFilters, + __experimentalVStack as VStack, } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useDebounce } from '@wordpress/compose'; @@ -415,6 +416,7 @@ export function HierarchicalTermSelector( { slug } ) { <> { showFilter && ( - - { !! availableTerms.length && ( - + - ) } + { !! availableTerms.length && ( + + ) } + - - + /> + + + + + );