From f244b7e486889f15de3ea7cdd53d9117800993fa Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 14 Nov 2018 18:28:25 +0000 Subject: [PATCH 1/4] Add Post Link Panel --- .../src/components/sidebar/post-link/index.js | 156 ++++++++++++++++++ .../components/sidebar/post-link/style.scss | 21 +++ .../sidebar/settings-sidebar/index.js | 2 + packages/edit-post/src/style.scss | 1 + 4 files changed, 180 insertions(+) create mode 100644 packages/edit-post/src/components/sidebar/post-link/index.js create mode 100644 packages/edit-post/src/components/sidebar/post-link/style.scss diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js new file mode 100644 index 00000000000000..69be010814db0a --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-link/index.js @@ -0,0 +1,156 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import { PanelBody, TextControl } from '@wordpress/components'; +import { withSelect, withDispatch } from '@wordpress/data'; +import { compose, ifCondition, withState } from '@wordpress/compose'; +import { addQueryArgs } from '@wordpress/url'; + +/** + * Module Constants + */ +const PANEL_NAME = 'post-link'; + +function PostLink( { + isOpened, + onTogglePanel, + isEditable, + postLink, + permalinkParts, + editPermalink, + postType, + forceEmptyField, + setState, +} ) { + const { prefix, postName, suffix } = permalinkParts; + let prefixElement, postNameElement, suffixElement; + if ( isEditable ) { + prefixElement = prefix && ( + { prefix } + ); + postNameElement = postName && ( + { postName } + ); + suffixElement = suffix && ( + { suffix } + ); + } + + const singularLabel = get( postType, [ 'labels', 'singular_name' ] ); + 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 ) { + setState( { + forceEmptyField: true, + } ); + } + return; + } + if ( forceEmptyField ) { + setState( { + forceEmptyField: false, + } ); + } + } } + /> + ) } +

+ { __( 'Preview' ) } +

+ + { isEditable ? + ( + { prefixElement }{ postNameElement }{ suffixElement } + ) : + postLink + } + + + { __( 'Permalink Settings' ) } + + + ); +} + +export default compose( [ + withSelect( ( select ) => { + const { + isEditedPostNew, + isPermalinkEditable, + getCurrentPost, + isCurrentPostPublished, + getPermalinkParts, + getEditedPostAttribute, + } = select( 'core/editor' ); + const { + isEditorPanelOpened, + } = select( 'core/edit-post' ); + const { + getPostType, + } = select( 'core' ); + + const { link } = getCurrentPost(); + const postTypeName = getEditedPostAttribute( 'type' ); + return { + isNew: isEditedPostNew(), + postLink: link, + isEditable: isPermalinkEditable(), + isPublished: isCurrentPostPublished(), + isOpened: isEditorPanelOpened( PANEL_NAME ), + permalinkParts: getPermalinkParts(), + postType: getPostType( postTypeName ), + }; + } ), + ifCondition( ( { isNew, postLink, postType } ) => { + return ! isNew && postLink && postType; + } ), + withDispatch( ( dispatch ) => { + const { toggleEditorPanelOpened } = dispatch( 'core/edit-post' ); + const { editPost } = dispatch( 'core/editor' ); + return { + onTogglePanel: () => toggleEditorPanelOpened( PANEL_NAME ), + editPermalink: ( newSlug ) => { + editPost( { slug: newSlug } ); + }, + }; + } ), + withState( { + forceEmptyField: false, + } ), +] )( 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 new file mode 100644 index 00000000000000..a6dd413a3ef51c --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-link/style.scss @@ -0,0 +1,21 @@ +.edit-post-post-link__link { + font-weight: 600; +} + +.edit-post-post-link__link-post-name { + font-weight: 800; +} + +.edit-post-post-link__preview-label { + margin: 0; +} + +.edit-post-post-link__link { + word-wrap: break-word; +} + +.edit-post-post-link__permalink-settings { + margin-top: 1em; + font-weight: 500; + display: block; +} 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 c817b39f7604a5..45dbb75e72539e 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -17,6 +17,7 @@ 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'; @@ -35,6 +36,7 @@ const SettingsSidebar = ( { sidebarName } ) => ( + diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 8dd038300daea3..44ad95c3351652 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -10,6 +10,7 @@ @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-status/style.scss"; @import "./components/sidebar/post-visibility/style.scss"; From 8d70bc228b09460dade4b0280c80b66bf1e1ff8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 15 Nov 2018 11:19:24 -0300 Subject: [PATCH 2/4] Simplify permalink labels and move panel towards the top. --- .../src/components/sidebar/post-link/index.js | 19 +++---------------- .../sidebar/settings-sidebar/index.js | 2 +- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js index 69be010814db0a..08f44345aeae8f 100644 --- a/packages/edit-post/src/components/sidebar/post-link/index.js +++ b/packages/edit-post/src/components/sidebar/post-link/index.js @@ -1,13 +1,8 @@ -/** - * External dependencies - */ -import { get } from 'lodash'; - /** * WordPress dependencies */ import { Fragment } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { PanelBody, TextControl } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose, ifCondition, withState } from '@wordpress/compose'; @@ -25,7 +20,6 @@ function PostLink( { postLink, permalinkParts, editPermalink, - postType, forceEmptyField, setState, } ) { @@ -43,22 +37,15 @@ function PostLink( { ); } - const singularLabel = get( postType, [ 'labels', 'singular_name' ] ); return ( { isEditable && ( { editPermalink( newValue ); 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 45dbb75e72539e..9dbfea4f9a4f5f 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -34,9 +34,9 @@ const SettingsSidebar = ( { sidebarName } ) => ( + - From 73cbb4e55e0e53434931a23c5aa21869f9161c06 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 15 Nov 2018 14:55:22 +0000 Subject: [PATCH 3/4] Add isViewable check. --- .../src/components/sidebar/post-link/index.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js index 08f44345aeae8f..5d9c38bd80a1a3 100644 --- a/packages/edit-post/src/components/sidebar/post-link/index.js +++ b/packages/edit-post/src/components/sidebar/post-link/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + /** * WordPress dependencies */ @@ -114,6 +119,7 @@ export default compose( [ const { link } = getCurrentPost(); const postTypeName = getEditedPostAttribute( 'type' ); + const postType = getPostType( postTypeName ); return { isNew: isEditedPostNew(), postLink: link, @@ -121,11 +127,11 @@ export default compose( [ isPublished: isCurrentPostPublished(), isOpened: isEditorPanelOpened( PANEL_NAME ), permalinkParts: getPermalinkParts(), - postType: getPostType( postTypeName ), + isViewable: get( postType, [ 'viewable' ], false ), }; } ), - ifCondition( ( { isNew, postLink, postType } ) => { - return ! isNew && postLink && postType; + ifCondition( ( { isNew, postLink, isViewable } ) => { + return ! isNew && postLink && isViewable; } ), withDispatch( ( dispatch ) => { const { toggleEditorPanelOpened } = dispatch( 'core/edit-post' ); From c9ecf1a3f48a1b521c7a467aa6a26b794fa74caf Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 15 Nov 2018 15:43:39 +0000 Subject: [PATCH 4/4] Move permalink panel up. --- .../edit-post/src/components/sidebar/settings-sidebar/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9dbfea4f9a4f5f..3d4fa8dfb0ced9 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -33,8 +33,8 @@ const SettingsSidebar = ( { sidebarName } ) => ( - +