From 724966502a0783debf8a1dbd80b651e042aab708 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 29 Jun 2022 16:48:24 +1000 Subject: [PATCH 1/8] Rewrite URL (Permalink) panel as a popover --- .../src/components/preferences-modal/index.js | 22 +-- .../src/components/sidebar/post-link/index.js | 179 ------------------ .../components/sidebar/post-link/style.scss | 20 -- .../components/sidebar/post-status/index.js | 2 + .../src/components/sidebar/post-url/index.js | 42 ++++ .../components/sidebar/post-url/style.scss | 26 +++ .../sidebar/settings-sidebar/index.js | 2 - packages/edit-post/src/style.scss | 2 +- packages/editor/src/components/index.js | 3 + .../editor/src/components/post-url/check.js | 38 ++++ .../editor/src/components/post-url/index.js | 108 +++++++++++ .../editor/src/components/post-url/label.js | 16 ++ .../editor/src/components/post-url/style.scss | 15 ++ packages/editor/src/style.scss | 1 + 14 files changed, 257 insertions(+), 219 deletions(-) delete mode 100644 packages/edit-post/src/components/sidebar/post-link/index.js delete mode 100644 packages/edit-post/src/components/sidebar/post-link/style.scss create mode 100644 packages/edit-post/src/components/sidebar/post-url/index.js create mode 100644 packages/edit-post/src/components/sidebar/post-url/style.scss create mode 100644 packages/editor/src/components/post-url/check.js create mode 100644 packages/editor/src/components/post-url/index.js create mode 100644 packages/editor/src/components/post-url/label.js create mode 100644 packages/editor/src/components/post-url/style.scss diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index f263d026c830ac..9e3e1a53f4a870 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -19,7 +19,6 @@ import { PostTypeSupportCheck, store as editorStore, } from '@wordpress/editor'; -import { store as coreStore } from '@wordpress/core-data'; import { PreferencesModal, PreferencesModalTabs, @@ -45,15 +44,10 @@ const MODAL_NAME = 'edit-post/preferences'; export default function EditPostPreferencesModal() { const isLargeViewport = useViewportMatch( 'medium' ); const { closeModal } = useDispatch( editPostStore ); - const { isModalActive, isViewable } = useSelect( ( select ) => { - const { getEditedPostAttribute } = select( editorStore ); - const { getPostType } = select( coreStore ); - const postType = getPostType( getEditedPostAttribute( 'type' ) ); - return { - isModalActive: select( editPostStore ).isModalActive( MODAL_NAME ), - isViewable: get( postType, [ 'viewable' ], false ), - }; - }, [] ); + const isModalActive = useSelect( + ( select ) => select( editPostStore ).isModalActive( MODAL_NAME ), + [] + ); const showBlockBreadcrumbsOption = useSelect( ( select ) => { const { getEditorSettings } = select( editorStore ); @@ -200,12 +194,6 @@ export default function EditPostPreferencesModal() { ) } > - { isViewable && ( - - ) } ( - { permalinkPrefix } - - ); - postNameElement = postSlug && ( - - { postSlug } - - ); - suffixElement = permalinkSuffix && ( - - { permalinkSuffix } - - ); - } - - return ( - - { isEditable && ( -
- { - editPermalink( newValue ); - // When we delete the field the permalink gets - // reverted to the original value. - // The forceEmptyField logic allows the user to have - // the field temporarily empty while typing. - if ( ! newValue ) { - if ( ! forceEmptyField ) { - setForceEmptyField( true ); - } - return; - } - if ( forceEmptyField ) { - setForceEmptyField( false ); - } - } } - onBlur={ ( event ) => { - editPermalink( cleanForSlug( event.target.value ) ); - if ( forceEmptyField ) { - setForceEmptyField( false ); - } - } } - /> -

- { __( 'The last part of the URL.' ) }{ ' ' } - - { __( 'Read about permalinks' ) } - -

-
- ) } -

- { postTypeLabel || __( 'View post' ) } -

-
- - { isEditable ? ( - <> - { prefixElement } - { postNameElement } - { suffixElement } - - ) : ( - postLink - ) } - -
- - ); -} - -export default compose( [ - withSelect( ( select ) => { - const { - isPermalinkEditable, - getCurrentPost, - isCurrentPostPublished, - getPermalinkParts, - getEditedPostAttribute, - getEditedPostSlug, - } = select( editorStore ); - const { isEditorPanelEnabled, isEditorPanelOpened } = - select( editPostStore ); - const { getPostType } = select( coreStore ); - - const { link } = getCurrentPost(); - - const postTypeName = getEditedPostAttribute( 'type' ); - const postType = getPostType( postTypeName ); - const permalinkParts = getPermalinkParts(); - - return { - postLink: link, - isEditable: isPermalinkEditable(), - isPublished: isCurrentPostPublished(), - isOpened: isEditorPanelOpened( PANEL_NAME ), - isEnabled: isEditorPanelEnabled( PANEL_NAME ), - isViewable: get( postType, [ 'viewable' ], false ), - postSlug: safeDecodeURIComponent( getEditedPostSlug() ), - postTypeLabel: get( postType, [ 'labels', 'view_item' ] ), - hasPermalinkParts: !! permalinkParts, - permalinkPrefix: permalinkParts?.prefix, - permalinkSuffix: permalinkParts?.suffix, - }; - } ), - ifCondition( ( { isEnabled, postLink, isViewable, hasPermalinkParts } ) => { - return isEnabled && postLink && isViewable && hasPermalinkParts; - } ), - withDispatch( ( dispatch ) => { - const { toggleEditorPanelOpened } = dispatch( editPostStore ); - const { editPost } = dispatch( editorStore ); - return { - onTogglePanel: () => toggleEditorPanelOpened( PANEL_NAME ), - editPermalink: ( newSlug ) => { - editPost( { slug: newSlug } ); - }, - }; - } ), -] )( PostLink ); diff --git a/packages/edit-post/src/components/sidebar/post-link/style.scss b/packages/edit-post/src/components/sidebar/post-link/style.scss deleted file mode 100644 index ab442190b61e61..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-link/style.scss +++ /dev/null @@ -1,20 +0,0 @@ -.edit-post-post-link__link-post-name { - font-weight: 600; -} - -.edit-post-post-link__preview-label { - font-weight: 400; - margin: 0; -} - -.edit-post-post-link__link { - text-align: left; - word-wrap: break-word; - display: block; -} - -/* rtl:begin:ignore */ -.edit-post-post-link__preview-link-container { - direction: ltr; -} -/* rtl:end:ignore */ diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js index b0ffe8749b1fe5..7eb4e074ff48d4 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-status/index.js @@ -20,6 +20,7 @@ import PostPendingStatus from '../post-pending-status'; import PluginPostStatusInfo from '../plugin-post-status-info'; import { store as editPostStore } from '../../../store'; import PostTemplate from '../post-template'; +import PostURL from '../post-url'; /** * Module Constants @@ -39,6 +40,7 @@ function PostStatus( { isOpened, onTogglePanel } ) { <> + diff --git a/packages/edit-post/src/components/sidebar/post-url/index.js b/packages/edit-post/src/components/sidebar/post-url/index.js new file mode 100644 index 00000000000000..2b06190c2f1b29 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-url/index.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { useRef } from '@wordpress/element'; +import { PanelRow, Dropdown, Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { + PostURLCheck, + PostURLLabel, + PostURL as PostURLForm, +} from '@wordpress/editor'; + +export default function PostURL() { + const anchorRef = useRef(); + + return ( + + + { __( 'URL' ) } + ( + + ) } + renderContent={ ( { onClose } ) => ( + + ) } + /> + + + ); +} diff --git a/packages/edit-post/src/components/sidebar/post-url/style.scss b/packages/edit-post/src/components/sidebar/post-url/style.scss new file mode 100644 index 00000000000000..ea2e7900e4f026 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-url/style.scss @@ -0,0 +1,26 @@ +.edit-post-post-url { + width: 100%; + justify-content: flex-start; + + span { + display: block; + width: 45%; + } +} + +.edit-post-post-url__dropdown { + max-width: 55%; +} + +.components-button.edit-post-post-url__toggle { + display: inline-block; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.edit-post-post-url__dialog .editor-post-url { + // sidebar width - popover padding - form margin + min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20; + margin: $grid-unit-10; +} diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 23943b9c005991..42c9805212cb1b 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -19,7 +19,6 @@ import LastRevision from '../last-revision'; import PostTaxonomies from '../post-taxonomies'; import FeaturedImage from '../featured-image'; import PostExcerpt from '../post-excerpt'; -import PostLink from '../post-link'; import DiscussionPanel from '../discussion-panel'; import PageAttributes from '../page-attributes'; import MetaBoxes from '../../meta-boxes'; @@ -87,7 +86,6 @@ const SettingsSidebar = () => { - diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 5130efe2b1b938..0e42397b6f85b9 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -11,11 +11,11 @@ @import "./components/sidebar/style.scss"; @import "./components/sidebar/last-revision/style.scss"; @import "./components/sidebar/post-author/style.scss"; -@import "./components/sidebar/post-link/style.scss"; @import "./components/sidebar/post-schedule/style.scss"; @import "./components/sidebar/post-slug/style.scss"; @import "./components/sidebar/post-status/style.scss"; @import "./components/sidebar/post-template/style.scss"; +@import "./components/sidebar/post-url/style.scss"; @import "./components/sidebar/post-visibility/style.scss"; @import "./components/sidebar/settings-header/style.scss"; @import "./components/sidebar/template-summary/style.scss"; diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index c0edc87d48f6ae..2427b52c6032f4 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -59,6 +59,9 @@ export { default as PostTitle } from './post-title'; export { default as PostTrash } from './post-trash'; export { default as PostTrashCheck } from './post-trash/check'; export { default as PostTypeSupportCheck } from './post-type-support-check'; +export { default as PostURL } from './post-url'; +export { default as PostURLCheck } from './post-url/check'; +export { default as PostURLLabel } from './post-url/label'; export { default as PostVisibility } from './post-visibility'; export { default as PostVisibilityLabel } from './post-visibility/label'; export { default as PostVisibilityCheck } from './post-visibility/check'; diff --git a/packages/editor/src/components/post-url/check.js b/packages/editor/src/components/post-url/check.js new file mode 100644 index 00000000000000..65c54846a702b1 --- /dev/null +++ b/packages/editor/src/components/post-url/check.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; + +export default function PostURLCheck( { children } ) { + const isVisible = useSelect( ( select ) => { + const postTypeSlug = select( editorStore ).getCurrentPostType(); + const postType = select( coreStore ).getPostType( postTypeSlug ); + if ( ! postType?.viewable ) { + return false; + } + + const post = select( editorStore ).getCurrentPost(); + if ( ! post.link ) { + return false; + } + + const permalinkParts = select( editorStore ).getPermalinkParts(); + if ( ! permalinkParts ) { + return false; + } + + return true; + }, [] ); + + if ( ! isVisible ) { + return null; + } + + return children; +} diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js new file mode 100644 index 00000000000000..ffef7c675ce3b9 --- /dev/null +++ b/packages/editor/src/components/post-url/index.js @@ -0,0 +1,108 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url'; +import { useState } from '@wordpress/element'; +import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; +import { TextControl, ExternalLink } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; + +export default function PostURL( { onClose } ) { + const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } = + useSelect( ( select ) => { + const permalinkParts = select( editorStore ).getPermalinkParts(); + return { + isEditable: select( editorStore ).isPermalinkEditable(), + postSlug: safeDecodeURIComponent( + select( editorStore ).getEditedPostSlug() + ), + postLink: select( editorStore ).getCurrentPost().link, + permalinkPrefix: permalinkParts?.prefix, + permalinkSuffix: permalinkParts?.suffix, + }; + }, [] ); + + const { editPost } = useDispatch( editorStore ); + + const [ forceEmptyField, setForceEmptyField ] = useState( false ); + + return ( +
+ + { isEditable && ( + + { __( 'The last part of the URL.' ) }{ ' ' } + + { __( 'Learn more.' ) } + + + } + onChange={ ( newValue ) => { + editPost( { slug: newValue } ); + // When we delete the field the permalink gets + // reverted to the original value. + // The forceEmptyField logic allows the user to have + // the field temporarily empty while typing. + if ( ! newValue ) { + if ( ! forceEmptyField ) { + setForceEmptyField( true ); + } + return; + } + if ( forceEmptyField ) { + setForceEmptyField( false ); + } + } } + onBlur={ ( event ) => { + editPost( { + slug: cleanForSlug( event.target.value ), + } ); + if ( forceEmptyField ) { + setForceEmptyField( false ); + } + } } + /> + ) } +

{ __( 'URL' ) }

+

+ + { isEditable ? ( + <> + + { permalinkPrefix } + + + { postSlug } + + + { permalinkSuffix } + + + ) : ( + postLink + ) } + +

+
+ ); +} diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js new file mode 100644 index 00000000000000..ec4e9db6d06819 --- /dev/null +++ b/packages/editor/src/components/post-url/label.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; + +export default function PostURLLabel() { + return useSelect( + ( select ) => select( editorStore ).getCurrentPost().link, + [] + ); +} diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss new file mode 100644 index 00000000000000..4eec575a9c2e6d --- /dev/null +++ b/packages/editor/src/components/post-url/style.scss @@ -0,0 +1,15 @@ +.editor-post-url__link-label { + font-size: $default-font-size; + font-weight: 400; + margin: 0; +} + +/* rtl:begin:ignore */ +.editor-post-url__link { + direction: ltr; +} +/* rtl:end:ignore */ + +.editor-post-url__link-slug { + font-weight: 600; +} diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index 88ed59125a939b..e71f3b0261a239 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -14,6 +14,7 @@ @import "./components/post-saved-state/style.scss"; @import "./components/post-taxonomies/style.scss"; @import "./components/post-text-editor/style.scss"; +@import "./components/post-url/style.scss"; @import "./components/post-visibility/style.scss"; @import "./components/post-title/style.scss"; @import "./components/post-trash/style.scss"; From 0e54767e2850de41dd3579b48411b6d71b2f59be Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 30 Jun 2022 16:43:30 +1000 Subject: [PATCH 2/8] Left truncate the URL --- .../components/sidebar/post-url/style.scss | 3 -- .../editor/src/components/post-url/label.js | 43 ++++++++++++++++++- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-url/style.scss b/packages/edit-post/src/components/sidebar/post-url/style.scss index ea2e7900e4f026..8c756dda50a655 100644 --- a/packages/edit-post/src/components/sidebar/post-url/style.scss +++ b/packages/edit-post/src/components/sidebar/post-url/style.scss @@ -13,10 +13,7 @@ } .components-button.edit-post-post-url__toggle { - display: inline-block; width: 100%; - overflow: hidden; - text-overflow: ellipsis; } .edit-post-post-url__dialog .editor-post-url { diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js index ec4e9db6d06819..b49fbdd6da28c4 100644 --- a/packages/editor/src/components/post-url/label.js +++ b/packages/editor/src/components/post-url/label.js @@ -2,6 +2,8 @@ * WordPress dependencies */ import { useSelect } from '@wordpress/data'; +import { filterURLForDisplay } from '@wordpress/url'; +import { useRef, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -9,8 +11,47 @@ import { useSelect } from '@wordpress/data'; import { store as editorStore } from '../../store'; export default function PostURLLabel() { - return useSelect( + const postLink = useSelect( ( select ) => select( editorStore ).getCurrentPost().link, [] ); + return ( + + { filterURLForDisplay( postLink ) } + + ); +} + +function LeftTruncatedText( { children: text } ) { + const ref = useRef(); + + useEffect( () => { + const container = ref.current; + + container.innerText = text; + + container.style.display = 'block'; + container.style.width = '100%'; + const maxWidth = container.clientWidth; + + container.style.display = null; + container.style.width = null; + + const canvas = container.ownerDocument.createElement( 'canvas' ); + const context = canvas.getContext( '2d' ); + context.font = window + .getComputedStyle( container ) + .getPropertyValue( 'font' ); + + let truncatedText = text; + let truncateAmount = 1; + while ( context.measureText( truncatedText ).width > maxWidth ) { + truncatedText = '…' + text.substring( truncateAmount ); + truncateAmount++; + } + + container.innerText = truncatedText; + }, [ text ] ); + + return ; } From fcae3aaaea1525e7af05de1708274d8332ce84f3 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 30 Jun 2022 16:50:37 +1000 Subject: [PATCH 3/8] Wrap long URLs --- .../sidebar/post-schedule/style.scss | 2 - .../components/sidebar/post-url/style.scss | 9 ++-- .../editor/src/components/post-url/label.js | 41 +------------------ 3 files changed, 5 insertions(+), 47 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss index 39e049bfbeed28..8e251f47f58574 100644 --- a/packages/edit-post/src/components/sidebar/post-schedule/style.scss +++ b/packages/edit-post/src/components/sidebar/post-schedule/style.scss @@ -2,13 +2,11 @@ width: 100%; position: relative; justify-content: flex-start; - align-items: flex-start; span { display: block; width: 45%; flex-shrink: 0; - padding: 6px 0; } } diff --git a/packages/edit-post/src/components/sidebar/post-url/style.scss b/packages/edit-post/src/components/sidebar/post-url/style.scss index 8c756dda50a655..1b91719b4ead32 100644 --- a/packages/edit-post/src/components/sidebar/post-url/style.scss +++ b/packages/edit-post/src/components/sidebar/post-url/style.scss @@ -5,15 +5,14 @@ span { display: block; width: 45%; + flex-shrink: 0; } } -.edit-post-post-url__dropdown { - max-width: 55%; -} - .components-button.edit-post-post-url__toggle { - width: 100%; + text-align: left; + white-space: normal; + height: auto; } .edit-post-post-url__dialog .editor-post-url { diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js index b49fbdd6da28c4..f34a6404605613 100644 --- a/packages/editor/src/components/post-url/label.js +++ b/packages/editor/src/components/post-url/label.js @@ -3,7 +3,6 @@ */ import { useSelect } from '@wordpress/data'; import { filterURLForDisplay } from '@wordpress/url'; -import { useRef, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -15,43 +14,5 @@ export default function PostURLLabel() { ( select ) => select( editorStore ).getCurrentPost().link, [] ); - return ( - - { filterURLForDisplay( postLink ) } - - ); -} - -function LeftTruncatedText( { children: text } ) { - const ref = useRef(); - - useEffect( () => { - const container = ref.current; - - container.innerText = text; - - container.style.display = 'block'; - container.style.width = '100%'; - const maxWidth = container.clientWidth; - - container.style.display = null; - container.style.width = null; - - const canvas = container.ownerDocument.createElement( 'canvas' ); - const context = canvas.getContext( '2d' ); - context.font = window - .getComputedStyle( container ) - .getPropertyValue( 'font' ); - - let truncatedText = text; - let truncateAmount = 1; - while ( context.measureText( truncatedText ).width > maxWidth ) { - truncatedText = '…' + text.substring( truncateAmount ); - truncateAmount++; - } - - container.innerText = truncatedText; - }, [ text ] ); - - return ; + return filterURLForDisplay( postLink ); } From 3bc218fb5941e721b3b54e3ffbf130adf8081a89 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 1 Jul 2022 15:15:57 +1000 Subject: [PATCH 4/8] Use 'View post' instead of 'URL' --- .../editor/src/components/post-url/index.js | 40 ++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index ffef7c675ce3b9..f4d0529b9c668d 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -7,6 +7,7 @@ import { useState } from '@wordpress/element'; import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { TextControl, ExternalLink } from '@wordpress/components'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -14,19 +15,28 @@ import { TextControl, ExternalLink } from '@wordpress/components'; import { store as editorStore } from '../../store'; export default function PostURL( { onClose } ) { - const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } = - useSelect( ( select ) => { - const permalinkParts = select( editorStore ).getPermalinkParts(); - return { - isEditable: select( editorStore ).isPermalinkEditable(), - postSlug: safeDecodeURIComponent( - select( editorStore ).getEditedPostSlug() - ), - postLink: select( editorStore ).getCurrentPost().link, - permalinkPrefix: permalinkParts?.prefix, - permalinkSuffix: permalinkParts?.suffix, - }; - }, [] ); + const { + isEditable, + postSlug, + viewPostLabel, + postLink, + permalinkPrefix, + permalinkSuffix, + } = useSelect( ( select ) => { + const postTypeSlug = select( editorStore ).getCurrentPostType(); + const postType = select( coreStore ).getPostType( postTypeSlug ); + const permalinkParts = select( editorStore ).getPermalinkParts(); + return { + isEditable: select( editorStore ).isPermalinkEditable(), + postSlug: safeDecodeURIComponent( + select( editorStore ).getEditedPostSlug() + ), + viewPostLabel: postType?.labels.view_item, + postLink: select( editorStore ).getCurrentPost().link, + permalinkPrefix: permalinkParts?.prefix, + permalinkSuffix: permalinkParts?.suffix, + }; + }, [] ); const { editPost } = useDispatch( editorStore ); @@ -79,7 +89,9 @@ export default function PostURL( { onClose } ) { } } /> ) } -

{ __( 'URL' ) }

+

+ { viewPostLabel ?? __( 'View post' ) } +

Date: Fri, 1 Jul 2022 15:18:13 +1000 Subject: [PATCH 5/8] Don't show 'View post' if slug is not editable --- packages/editor/src/components/post-url/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index f4d0529b9c668d..32dfbbc63706f9 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -89,9 +89,11 @@ export default function PostURL( { onClose } ) { } } /> ) } -

- { viewPostLabel ?? __( 'View post' ) } -

+ { isEditable && ( +

+ { viewPostLabel ?? __( 'View post' ) } +

+ ) }

Date: Fri, 1 Jul 2022 15:50:09 +1000 Subject: [PATCH 6/8] Break long URLs --- packages/edit-post/src/components/sidebar/post-url/style.scss | 1 + packages/editor/src/components/post-url/style.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/edit-post/src/components/sidebar/post-url/style.scss b/packages/edit-post/src/components/sidebar/post-url/style.scss index 1b91719b4ead32..dbe6d983efc64e 100644 --- a/packages/edit-post/src/components/sidebar/post-url/style.scss +++ b/packages/edit-post/src/components/sidebar/post-url/style.scss @@ -13,6 +13,7 @@ text-align: left; white-space: normal; height: auto; + word-break: break-word; } .edit-post-post-url__dialog .editor-post-url { diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss index 4eec575a9c2e6d..bfdbf2a9697a71 100644 --- a/packages/editor/src/components/post-url/style.scss +++ b/packages/editor/src/components/post-url/style.scss @@ -7,6 +7,7 @@ /* rtl:begin:ignore */ .editor-post-url__link { direction: ltr; + word-break: break-word; } /* rtl:end:ignore */ From 8ddbcdec971e19cc8561b39f7ef8b5bbed142427 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 1 Jul 2022 16:25:55 +1000 Subject: [PATCH 7/8] Update E2E tests --- ...anel.test.js => sidebar-permalink.test.js} | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) rename packages/e2e-tests/specs/editor/various/{sidebar-permalink-panel.test.js => sidebar-permalink.test.js} (54%) diff --git a/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js similarity index 54% rename from packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js rename to packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js index 35b51001788cdb..5ada2ecc837123 100644 --- a/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js +++ b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js @@ -5,17 +5,17 @@ import { activatePlugin, createNewPost, deactivatePlugin, - findSidebarPanelWithTitle, publishPost, } from '@wordpress/e2e-test-utils'; -const permalinkPanelXPath = `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"Permalink")]`; +// TODO: Use a more accessible selector. +const urlRowSelector = '.edit-post-post-url'; // This tests are not together with the remaining sidebar tests, -// because we need to publish/save a post, to correctly test the permalink panel. +// because we need to publish/save a post, to correctly test the permalink row. // The sidebar test suit enforces that focus is never lost, but during save operations // the focus is lost and a new element is focused once the save is completed. -describe( 'Sidebar Permalink Panel', () => { +describe( 'Sidebar Permalink', () => { beforeAll( async () => { await activatePlugin( 'gutenberg-test-custom-post-types' ); } ); @@ -24,39 +24,30 @@ describe( 'Sidebar Permalink Panel', () => { await deactivatePlugin( 'gutenberg-test-custom-post-types' ); } ); - it( 'should allow permalink sidebar panel to be removed', async () => { - await createNewPost(); - await page.evaluate( () => { - const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' ); - removeEditorPanel( 'post-link' ); - } ); - expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] ); - } ); - - it( 'should not render link panel when post is publicly queryable but not public', async () => { + it( 'should not render URL when post is publicly queryable but not public', async () => { await createNewPost( { postType: 'public_q_not_public' } ); await page.keyboard.type( 'aaaaa' ); await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); - expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] ); + expect( await page.$( urlRowSelector ) ).toBeNull(); } ); - it( 'should not render link panel when post is public but not publicly queryable', async () => { + it( 'should not render URL when post is public but not publicly queryable', async () => { await createNewPost( { postType: 'not_public_q_public' } ); await page.keyboard.type( 'aaaaa' ); await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); - expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] ); + expect( await page.$( urlRowSelector ) ).toBeNull(); } ); - it( 'should render link panel when post is public and publicly queryable', async () => { + it( 'should render URL when post is public and publicly queryable', async () => { await createNewPost( { postType: 'public_q_public' } ); await page.keyboard.type( 'aaaaa' ); await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); - expect( await findSidebarPanelWithTitle( 'Permalink' ) ).toBeDefined(); + expect( await page.$( urlRowSelector ) ).not.toBeNull(); } ); } ); From b40835b96c4821e39d11b00316b5ac352afdb159 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 1 Jul 2022 11:09:29 +0400 Subject: [PATCH 8/8] Fix unit tests --- .../src/components/preferences-modal/test/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js index 376bdecc472f12..16f27a32624ea3 100644 --- a/packages/edit-post/src/components/preferences-modal/test/index.js +++ b/packages/edit-post/src/components/preferences-modal/test/index.js @@ -21,13 +21,13 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() ); describe( 'EditPostPreferencesModal', () => { describe( 'should match snapshot when the modal is active', () => { it( 'large viewports', () => { - useSelect.mockImplementation( () => ( { isModalActive: true } ) ); + useSelect.mockImplementation( () => true ); useViewportMatch.mockImplementation( () => true ); const wrapper = shallow( ); expect( wrapper ).toMatchSnapshot(); } ); it( 'small viewports', () => { - useSelect.mockImplementation( () => ( { isModalActive: true } ) ); + useSelect.mockImplementation( () => true ); useViewportMatch.mockImplementation( () => false ); const wrapper = shallow( ); expect( wrapper ).toMatchSnapshot(); @@ -35,7 +35,7 @@ describe( 'EditPostPreferencesModal', () => { } ); it( 'should not render when the modal is not active', () => { - useSelect.mockImplementation( () => ( { isModalActive: false } ) ); + useSelect.mockImplementation( () => false ); const wrapper = shallow( ); expect( wrapper.isEmptyRender() ).toBe( true ); } );