From 28ec833e2ab132f6c4f04f22718864b7d7f6c456 Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Tue, 7 Jul 2020 23:15:34 +0800 Subject: [PATCH 01/14] Add Post Settings menu --- src/components/editor/editor.js | 2 + src/components/post-settings/index.js | 162 ++++++++++++++++++++++++++ src/styles/ui/hidden.scss | 2 +- 3 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 src/components/post-settings/index.js diff --git a/src/components/editor/editor.js b/src/components/editor/editor.js index f8f1443..78b0fa2 100644 --- a/src/components/editor/editor.js +++ b/src/components/editor/editor.js @@ -5,6 +5,7 @@ */ import BlockLimiter from '../block-limiter'; import ThemeSwitcher from '../theme-switcher'; +import PostSettings from '../post-settings'; import MoreMenu from '../more-menu'; import Shortcuts from '../shortcuts'; import RegisterShortcuts from '../shortcuts/shortcuts'; @@ -214,6 +215,7 @@ class IcebergEditor extends Component { /> { isActive && } + diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js new file mode 100644 index 0000000..68d3b3d --- /dev/null +++ b/src/components/post-settings/index.js @@ -0,0 +1,162 @@ +/*global icebergSettings*/ + +/** + * External dependencies + */ +import { get } from 'lodash'; + +/** + * Internal dependencies + */ +import UpdateTitleHeight from '../utils/title-height'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { withDispatch, withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; +import { Fragment, Component, render } from '@wordpress/element'; +import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { + withSpokenMessages, + DropdownMenu, + Button, + DropZone, + MenuGroup, + MenuItem, + BaseControl, +} from '@wordpress/components'; + +class PostSettings extends Component { + constructor() { + super(...arguments); + + this.addPostSettings = this.addPostSettings.bind(this); + + this.state = { + isEnabled: false, + isSettingsOpen: false, + }; + } + + componentDidMount() { + this.addPostSettings(); + } + + componentDidUpdate() { + this.addPostSettings(); + } + + addPostSettings() { + const { isActive, toggleEditorMode, postType } = this.props; + + if (!postType) { + return null; + } + + const POPOVER_PROPS = { + className: + 'components-iceberg-popover components-iceberg-post-settings__content', + position: 'bottom left', + }; + + const TOGGLE_PROPS = { + tooltipPosition: 'bottom', + }; + + const MoreMenuDropdown = () => { + return ( + + + {({ onClose }) => ( + +

{ __('Post Settings', 'iceberg') }

+
+ + console.log('selected ' + media.length)} + allowedTypes={['image']} + // value={mediaId} + render={({ open }) => ( + + + { + + }} /> + + )} + /> + +
+ + )} + + + ); + }; + + const wrapper = document.querySelector('.edit-post-header__settings'); + + if (!wrapper.classList.contains('iceberg-post-settings') && isActive) { + wrapper.classList.add('iceberg-post-settings'); + wrapper.insertAdjacentHTML( + 'beforeend', + '
' + ); + + render( + , + document.getElementById('components-iceberg-post-settings') + ); + } else if ( + wrapper.classList.contains('iceberg-post-settings') && + !isActive + ) { + document.getElementById('components-iceberg-post-settings').remove(); + wrapper.classList.remove('iceberg-post-settings'); + } + } + + render() { + return false; + } +} + +export default compose([ + withSelect((select) => { + const { getCurrentPostType } = select('core/editor'); + const { getPostType } = select('core'); + + return { + postType: getPostType(getCurrentPostType()), + }; + }), + withDispatch((dispatch) => ({ + toggleEditorMode() { + dispatch('core/edit-post').toggleFeature('icebergWritingMode'); + + setTimeout(function () { + UpdateTitleHeight(); + }, 100); + + // Reset post meta + dispatch('core/editor').editPost({ + meta: { + _iceberg_editor_remember: false, + }, + }); + + dispatch('core/editor').savePost(); + }, + })), + withSpokenMessages, +])(PostSettings); diff --git a/src/styles/ui/hidden.scss b/src/styles/ui/hidden.scss index 0377006..86d40df 100644 --- a/src/styles/ui/hidden.scss +++ b/src/styles/ui/hidden.scss @@ -61,7 +61,7 @@ .edit-post-header__settings { > div { - &:nth-last-child(2) { + &:nth-last-child(3) { display: none !important; } } From 546e10631e4025290ae247c338fdf5ef7cc72e71 Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Wed, 8 Jul 2020 00:44:15 +0800 Subject: [PATCH 02/14] Use Modal instead of Popover --- src/components/post-settings/index.js | 107 +++++++++++------------- src/components/post-settings/style.scss | 44 ++++++++++ src/style.scss | 1 + 3 files changed, 92 insertions(+), 60 deletions(-) create mode 100644 src/components/post-settings/style.scss diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js index 68d3b3d..f6e87fb 100644 --- a/src/components/post-settings/index.js +++ b/src/components/post-settings/index.js @@ -17,10 +17,14 @@ import { __ } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { Fragment, Component, render } from '@wordpress/element'; -import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { + PostFeaturedImageCheck, + PostFeaturedImage +} from '@wordpress/editor'; import { withSpokenMessages, DropdownMenu, + Modal, Button, DropZone, MenuGroup, @@ -48,58 +52,31 @@ class PostSettings extends Component { this.addPostSettings(); } - addPostSettings() { - const { isActive, toggleEditorMode, postType } = this.props; + onRequestClose(){ + const { isSettingsOpen } = this.state; + + this.setState( { + isSettingsOpen: ! isSettingsOpen, + } ); - if (!postType) { - return null; + if ( isSettingsOpen ) { + this.props.closePostSettings(); } + } - const POPOVER_PROPS = { - className: - 'components-iceberg-popover components-iceberg-post-settings__content', - position: 'bottom left', - }; - - const TOGGLE_PROPS = { - tooltipPosition: 'bottom', - }; + addPostSettings() { + const { isActive } = this.props; const MoreMenuDropdown = () => { return ( - - {({ onClose }) => ( - -

{ __('Post Settings', 'iceberg') }

-
- - console.log('selected ' + media.length)} - allowedTypes={['image']} - // value={mediaId} - render={({ open }) => ( - - - { - - }} /> - - )} - /> - -
- - )} - + onClick={ ()=>{ + this.onRequestClose(); + } } + /> ); }; @@ -127,7 +104,30 @@ class PostSettings extends Component { } render() { - return false; + const { isSettingsOpen } = this.state; + + return ( + + { isSettingsOpen && ( + { + if( ! event.relatedTarget || ! event.relatedTarget.classList.contains( 'media-modal' ) ){ + this.onRequestClose(); + } + } } + > +

{ __( 'Post Settings', 'iceberg' ) }

+
+ + + +
+ + ) } + + ); } } @@ -141,20 +141,7 @@ export default compose([ }; }), withDispatch((dispatch) => ({ - toggleEditorMode() { - dispatch('core/edit-post').toggleFeature('icebergWritingMode'); - - setTimeout(function () { - UpdateTitleHeight(); - }, 100); - - // Reset post meta - dispatch('core/editor').editPost({ - meta: { - _iceberg_editor_remember: false, - }, - }); - + closePostSettings() { dispatch('core/editor').savePost(); }, })), diff --git a/src/components/post-settings/style.scss b/src/components/post-settings/style.scss new file mode 100644 index 0000000..c6df442 --- /dev/null +++ b/src/components/post-settings/style.scss @@ -0,0 +1,44 @@ +.components-iceberg-post-settings__content{ + left: auto; + bottom: auto; + top: 5px; + right: 5px; + transform: none; + min-height: calc(100vh - 10px); + + .post-settings__featured-image{ + position: relative; + + .components-button{ + &.is-secondary{ + display: none; + } + &.is-destructive{ + position: absolute; + margin: 0; + top: 10px; + right: 10px; + text-indent: -999px; + overflow: hidden; + min-height: 30px !important; + height: 30px !important; + width: 30px; + color: #fff; + fill: currentColor; + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; + background-color: rgba(0,0,0,.6); + background-position: center center; + &:hover{ + background-color: #f05230; + } + + } + } + + .editor-post-featured-image__preview{ + padding: 0 !important; + border-radius: 0; + } + } +} \ No newline at end of file diff --git a/src/style.scss b/src/style.scss index 1c6546c..8bbec54 100644 --- a/src/style.scss +++ b/src/style.scss @@ -18,6 +18,7 @@ @import "./components/settings/style.scss"; @import "./components/block-indicator/style.scss"; @import "./components/contextual-toolbar/style.scss"; + @import "./components/post-settings/style.scss"; //Editor styling @import "./styles/ui/hidden.scss"; From 6b5a41e1e0d8b9dbf6daa4fd0112511fbca67516 Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Wed, 8 Jul 2020 01:03:59 +0800 Subject: [PATCH 03/14] Add post slug --- src/components/post-settings/index.js | 138 +++++++++++++++++++----- src/components/post-settings/style.scss | 7 ++ 2 files changed, 116 insertions(+), 29 deletions(-) diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js index f6e87fb..31f4684 100644 --- a/src/components/post-settings/index.js +++ b/src/components/post-settings/index.js @@ -15,32 +15,39 @@ import UpdateTitleHeight from '../utils/title-height'; */ import { __ } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; +import { compose, withInstanceId } from '@wordpress/compose'; import { Fragment, Component, render } from '@wordpress/element'; +import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url'; import { PostFeaturedImageCheck, - PostFeaturedImage + PostFeaturedImage, + PostSlugCheck, } from '@wordpress/editor'; import { withSpokenMessages, DropdownMenu, Modal, Button, - DropZone, - MenuGroup, + TextControl, + ExternalLink, MenuItem, BaseControl, } from '@wordpress/components'; class PostSettings extends Component { - constructor() { - super(...arguments); + constructor( { postSlug, postTitle, postID } ) { + super( ...arguments ); - this.addPostSettings = this.addPostSettings.bind(this); + this.addPostSettings = this.addPostSettings.bind( this ); + this.setSlug = this.setSlug.bind( this ); this.state = { isEnabled: false, isSettingsOpen: false, + editedSlug: + safeDecodeURIComponent( postSlug ) || + cleanForSlug( postTitle ) || + postID, }; } @@ -52,9 +59,9 @@ class PostSettings extends Component { this.addPostSettings(); } - onRequestClose(){ + onRequestClose() { const { isSettingsOpen } = this.state; - + this.setState( { isSettingsOpen: ! isSettingsOpen, } ); @@ -64,16 +71,29 @@ class PostSettings extends Component { } } + setSlug( event ) { + const { postSlug, onUpdateSlug } = this.props; + const { value } = event.target; + + const editedSlug = cleanForSlug( value ); + + if ( editedSlug === postSlug ) { + return; + } + + onUpdateSlug( editedSlug ); + } + addPostSettings() { const { isActive } = this.props; const MoreMenuDropdown = () => { return ( - + )} + { currentScreen === 'settings' && ( + +
+ + + +
+
+ + this.setState( { + editedSlug: event.target.value, + } ) + } + onBlur={ this.setSlug } + /> +
+ + { postLink } + +
+
+ + { + if ( + taxonomy.slug !== 'post_tag' + ) { + return false; + } + return content; + } } + /> + + + + + ) } ) } diff --git a/src/components/post-settings/meta-data-menu.js b/src/components/post-settings/meta-data-menu.js new file mode 100644 index 0000000..77d0669 --- /dev/null +++ b/src/components/post-settings/meta-data-menu.js @@ -0,0 +1,73 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; +import { Fragment, Component } from '@wordpress/element'; +import { + withSpokenMessages, + MenuGroup, + MenuItem, +} from '@wordpress/components'; + +class MetaDataMenu extends Component { + + render() { + const { switchView } = this.props; + + return ( + + + { + switchView( 'meta', __( 'Meta Data', 'iceberg' ) ); + } } + > + { __( 'Meta Data', 'iceberg' ) } + + + { + switchView( + 'twitter', + __( 'Twitter Card', 'iceberg' ) + ); + } } + > + { __( 'Twitter Card', 'iceberg' ) } + + + { + switchView( + 'facebook', + __( 'Facebook Card', 'iceberg' ) + ); + } } + > + { __( 'Facebook Card', 'iceberg' ) } + + + + ); + } +} + +export default compose( [ + withSpokenMessages, +] )( MetaDataMenu ); diff --git a/src/components/post-settings/style.scss b/src/components/post-settings/style.scss index 65b6513..86f7c63 100644 --- a/src/components/post-settings/style.scss +++ b/src/components/post-settings/style.scss @@ -6,6 +6,7 @@ .components-iceberg-post-settings__content{ + width: 380px; left: auto; bottom: auto; top: 5px; @@ -54,4 +55,25 @@ border-radius: 0; } } + + .components-iceberg-post-settings__metadata-menu{ + border-radius: 4px; + border: 1px solid var(--iceberg--color--accent--light); + + .components-button{ + text-align: left; + flex-direction: row-reverse; + height: auto; + padding: 9px 10px 10px 12px; + border-radius: 0; + + &:not(:last-of-type){ + border-bottom: 1px solid var(--iceberg--color--accent--light); + } + + .components-menu-item__info-wrapper{ + width: 100%; + } + } + } } \ No newline at end of file From 45a0392cf6ed6fc6e0bfb70aa297231d3d8b2e52 Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Wed, 8 Jul 2020 16:54:58 +0800 Subject: [PATCH 07/14] Add post publish date --- src/components/post-settings/index.js | 42 +++++++++++++++++++++---- src/components/post-settings/style.scss | 5 +++ 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js index 718c500..e36ef6d 100644 --- a/src/components/post-settings/index.js +++ b/src/components/post-settings/index.js @@ -24,10 +24,13 @@ import { PostTaxonomies, PostTaxonomiesCheck, PostExcerpt as PostExcerptForm, + PostSchedule, + PostScheduleLabel, + PostScheduleCheck, } from '@wordpress/editor'; import { withSpokenMessages, - DropdownMenu, + Dropdown, Modal, Button, TextControl, @@ -164,18 +167,18 @@ class PostSettings extends Component { } } > { currentScreen !== 'settings' && ( - - )} + ) } { currentScreen === 'settings' && (
@@ -212,6 +215,33 @@ class PostSettings extends Component {
+ +
+ + ( + <> + + + ) } + renderContent={ () => } + /> +
+ Date: Wed, 8 Jul 2020 17:02:44 +0800 Subject: [PATCH 08/14] Fix post slug bug on change --- src/components/post-settings/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js index e36ef6d..2f529ea 100644 --- a/src/components/post-settings/index.js +++ b/src/components/post-settings/index.js @@ -198,9 +198,9 @@ class PostSettings extends Component { __( 'Slug', 'iceberg' ) } value={ this.state.editedSlug } - onChange={ ( event ) => + onChange={ ( newSlug ) => this.setState( { - editedSlug: event.target.value, + editedSlug: newSlug, } ) } onBlur={ this.setSlug } From f30adc57dc51377eef1d96697183becb1b63195b Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Fri, 10 Jul 2020 20:07:20 +0800 Subject: [PATCH 09/14] Add meta data value and seo preview --- includes/class-iceberg-settings.php | 12 ++ .../post-settings/flat-term-selector.js | 2 +- src/components/post-settings/index.js | 46 +++-- .../post-settings/meta-data-menu.js | 16 +- src/components/post-settings/meta-data.js | 192 ++++++++++++++++++ src/components/post-settings/style.scss | 31 +++ 6 files changed, 264 insertions(+), 35 deletions(-) create mode 100644 src/components/post-settings/meta-data.js diff --git a/includes/class-iceberg-settings.php b/includes/class-iceberg-settings.php index fb29c17..606e381 100644 --- a/includes/class-iceberg-settings.php +++ b/includes/class-iceberg-settings.php @@ -80,6 +80,18 @@ public static function register_settings() { }, ) ); + + register_meta( + 'post', + '_iceberg_seo_metadata', + array( + 'show_in_rest' => true, + 'single' => true, + 'auth_callback' => function() { + return current_user_can( 'edit_posts' ); + }, + ) + ); } /** diff --git a/src/components/post-settings/flat-term-selector.js b/src/components/post-settings/flat-term-selector.js index 873f2f2..c6dd5af 100644 --- a/src/components/post-settings/flat-term-selector.js +++ b/src/components/post-settings/flat-term-selector.js @@ -259,7 +259,7 @@ class FlatTermSelector extends Component { _x( 'Remove %s', 'term' ), singularName ); - + return ( { isSettingsOpen && ( @@ -167,17 +168,20 @@ class PostSettings extends Component { } } > { currentScreen !== 'settings' && ( - + + + + ) } { currentScreen === 'settings' && ( @@ -268,15 +272,15 @@ class PostSettings extends Component { } } -export default compose([ - withSelect((select) => { +export default compose( [ + withSelect( ( select ) => { const { getCurrentPost, getCurrentPostType, getEditedPostAttribute, } = select( 'core/editor' ); - const { getPostType } = select('core'); + const { getPostType } = select( 'core' ); const { id, link } = getCurrentPost(); return { @@ -286,8 +290,8 @@ export default compose([ postLink: link, postID: id, }; - }), - withDispatch((dispatch) => { + } ), + withDispatch( ( dispatch ) => { const { editPost } = dispatch( 'core/editor' ); return { @@ -298,6 +302,6 @@ export default compose([ editPost( { slug } ); }, }; - }), + } ), withSpokenMessages, -])(PostSettings); +] )( PostSettings ); diff --git a/src/components/post-settings/meta-data-menu.js b/src/components/post-settings/meta-data-menu.js index 77d0669..b3461eb 100644 --- a/src/components/post-settings/meta-data-menu.js +++ b/src/components/post-settings/meta-data-menu.js @@ -4,14 +4,9 @@ import { __ } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { Fragment, Component } from '@wordpress/element'; -import { - withSpokenMessages, - MenuGroup, - MenuItem, -} from '@wordpress/components'; +import { withSpokenMessages, MenuGroup, MenuItem } from '@wordpress/components'; class MetaDataMenu extends Component { - render() { const { switchView } = this.props; @@ -49,10 +44,7 @@ class MetaDataMenu extends Component { { switchView( 'facebook', @@ -68,6 +60,4 @@ class MetaDataMenu extends Component { } } -export default compose( [ - withSpokenMessages, -] )( MetaDataMenu ); +export default compose( [ withSpokenMessages ] )( MetaDataMenu ); diff --git a/src/components/post-settings/meta-data.js b/src/components/post-settings/meta-data.js new file mode 100644 index 0000000..4cee286 --- /dev/null +++ b/src/components/post-settings/meta-data.js @@ -0,0 +1,192 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; +import { withDispatch, withSelect } from '@wordpress/data'; +import { Fragment, Component } from '@wordpress/element'; +import { count as wordCount } from '@wordpress/wordcount'; +import { safeDecodeURIComponent } from '@wordpress/url'; +import { + withSpokenMessages, + MenuGroup, + MenuItem, + TextControl, + TextareaControl, +} from '@wordpress/components'; + +class MetaData extends Component { + constructor( { metaData } ) { + super( ...arguments ); + + this.updateSeoMetaData = this.updateSeoMetaData.bind( this ); + this.getDescription = this.getDescription.bind( this ); + + this.state = { + seoMetaData: metaData ? JSON.parse( metaData ) : {}, + }; + } + + updateSeoMetaData( category, key, value ) { + const getMetaData = this.state.seoMetaData; + + if ( typeof getMetaData[ category ] === 'undefined' ) { + getMetaData[ category ] = {}; + } + + getMetaData[ category ][ key ] = value; + + this.setState( { + seoMetaData: getMetaData, + } ); + + this.props.updateMetaData( getMetaData ); + } + + getDescription( suggested, category, key ) { + const getValue = get( this.state.seoMetaData, [ category, key ], '' ); + + const count = wordCount( getValue, 'characters_including_spaces' ); + + return { + __html: sprintf( + // translators: 1: Suggested count, 2: Value characters count + __( + 'Recommended: %1$s characters. You’ve used %2$s', + 'iceberg' + ), + suggested, + count + ), + }; + } + + render() { + const { screen, postSlug, permalinkParts } = this.props; + const { prefix, suffix } = permalinkParts; + const { seoMetaData } = this.state; + return ( + + { screen === 'meta' && ( + + { + this.updateSeoMetaData( + 'meta', + 'title', + title + ); + } } + /> +

+ + { + this.updateSeoMetaData( + 'meta', + 'description', + description + ); + } } + /> +

+ + { + this.updateSeoMetaData( 'meta', 'url', url ); + } } + /> + + + +

+
+ { get( seoMetaData, [ 'meta', 'title' ], '' ) } +
+
+ { prefix ? prefix : null } + { postSlug } + { suffix ? suffix : null } +
+
+ { get( seoMetaData, [ 'meta', 'description' ], '' ) } +
+
+ + ) } + + ); + } +} + +export default compose( [ + withSelect( ( select ) => { + const { + getCurrentPost, + getCurrentPostType, + getEditedPostAttribute, + getEditedPostSlug, + getPermalinkParts, + } = select( 'core/editor' ); + + const { getPostType } = select( 'core' ); + const { id, link } = getCurrentPost(); + + return { + metaData: getEditedPostAttribute( 'meta' )._iceberg_seo_metadata, + postID: id, + postLink: link, + postSlug: safeDecodeURIComponent( getEditedPostSlug() ), + permalinkParts: getPermalinkParts(), + }; + } ), + withDispatch( ( dispatch ) => { + const { editPost } = dispatch( 'core/editor' ); + + return { + updateMetaData( value ) { + editPost( { + meta: { + _iceberg_seo_metadata: JSON.stringify( value ), + }, + } ); + }, + }; + } ), + withSpokenMessages, +] )( MetaData ); diff --git a/src/components/post-settings/style.scss b/src/components/post-settings/style.scss index 8111989..c4a8443 100644 --- a/src/components/post-settings/style.scss +++ b/src/components/post-settings/style.scss @@ -81,4 +81,35 @@ } } } +} + +.component-iceberg-seo-preview{ + font-family: Arial,sans-serif; + background: #fff; + border: 1px solid #e5eff5; + padding: 10px 12px; + + .iceberg-seo-preview-title{ + color: #1e0fbe; + font-size: 20px; + line-height: 1.3; + text-overflow: ellipses; + word-wrap: break-word; + -webkit-text-overflow: ellipsis; + } + + .iceberg-seo-preview-link{ + margin: 1px 0 2px; + color: #006621; + font-size: 14px; + line-height: 1.3; + word-wrap: break-word; + } + + .iceberg-seo-preview-desc{ + color: #545454; + font-size: 14px; + line-height: 1.58; + word-wrap: break-word; + } } \ No newline at end of file From 14098373b069e133704e8274eec4ea9ede593ffc Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Fri, 10 Jul 2020 21:02:09 +0800 Subject: [PATCH 10/14] Add Twitter and Facebook title and description --- src/components/post-settings/index.js | 27 +++-- src/components/post-settings/meta-data.js | 137 +++++++++++----------- src/components/post-settings/style.scss | 22 +++- 3 files changed, 106 insertions(+), 80 deletions(-) diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js index d6a4079..4b7f7c9 100644 --- a/src/components/post-settings/index.js +++ b/src/components/post-settings/index.js @@ -1,5 +1,3 @@ -/*global icebergSettings*/ - /** * External dependencies */ @@ -16,7 +14,7 @@ import MetaData from './meta-data'; */ import { __ } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; -import { compose, withInstanceId } from '@wordpress/compose'; +import { compose } from '@wordpress/compose'; import { Fragment, Component, render } from '@wordpress/element'; import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url'; import { @@ -27,7 +25,6 @@ import { PostExcerpt as PostExcerptForm, PostSchedule, PostScheduleLabel, - PostScheduleCheck, } from '@wordpress/editor'; import { withSpokenMessages, @@ -36,8 +33,6 @@ import { Button, TextControl, ExternalLink, - MenuItem, - BaseControl, } from '@wordpress/components'; class PostSettings extends Component { @@ -143,7 +138,14 @@ class PostSettings extends Component { render() { const { isSettingsOpen, currentScreen, title } = this.state; - const { postType, postLink } = this.props; + const { + postType, + postLink, + postTitle, + permalinkParts, + postExcerpt, + postSlug, + } = this.props; if ( ! postType ) { return null; @@ -180,7 +182,13 @@ class PostSettings extends Component { > { __( 'Back', 'iceberg' ) } - + ) } { currentScreen === 'settings' && ( @@ -278,6 +286,7 @@ export default compose( [ getCurrentPost, getCurrentPostType, getEditedPostAttribute, + getPermalinkParts, } = select( 'core/editor' ); const { getPostType } = select( 'core' ); @@ -287,6 +296,8 @@ export default compose( [ postType: getPostType( getCurrentPostType() ), postSlug: getEditedPostAttribute( 'slug' ), postTitle: getEditedPostAttribute( 'title' ), + postExcerpt: getEditedPostAttribute( 'excerpt' ), + permalinkParts: getPermalinkParts(), postLink: link, postID: id, }; diff --git a/src/components/post-settings/meta-data.js b/src/components/post-settings/meta-data.js index 4cee286..4b66d26 100644 --- a/src/components/post-settings/meta-data.js +++ b/src/components/post-settings/meta-data.js @@ -11,11 +11,8 @@ import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; import { Fragment, Component } from '@wordpress/element'; import { count as wordCount } from '@wordpress/wordcount'; -import { safeDecodeURIComponent } from '@wordpress/url'; import { withSpokenMessages, - MenuGroup, - MenuItem, TextControl, TextareaControl, } from '@wordpress/components'; @@ -57,71 +54,83 @@ class MetaData extends Component { __html: sprintf( // translators: 1: Suggested count, 2: Value characters count __( - 'Recommended: %1$s characters. You’ve used %2$s', + 'Recommended: %1$s characters. You’ve used %2$s', 'iceberg' ), suggested, - count + count > suggested + ? '' + count + '' + : '' + count + '' ), }; } render() { - const { screen, postSlug, permalinkParts } = this.props; + const { + screen, + postSlug, + permalinkParts, + postTitle, + postExcerpt, + } = this.props; const { prefix, suffix } = permalinkParts; const { seoMetaData } = this.state; + + const getTitle = get( seoMetaData, [ screen, 'title' ], '' ); + + const getDescription = get( + seoMetaData, + [ screen, 'description' ], + '' + ); + return ( + { + this.updateSeoMetaData( screen, 'title', title ); + } } + /> + + { getTitle && screen === 'meta' && ( +

+ ) } + + { + this.updateSeoMetaData( + screen, + 'description', + description + ); + } } + /> + + { getDescription && screen === 'meta' && ( +

+ ) } { screen === 'meta' && ( - { - this.updateSeoMetaData( - 'meta', - 'title', - title - ); - } } - /> -

- - { - this.updateSeoMetaData( - 'meta', - 'description', - description - ); - } } - /> -

-

+ { getTitle ? getTitle : postTitle } { get( seoMetaData, [ 'meta', 'title' ], '' ) }
@@ -144,7 +154,9 @@ class MetaData extends Component { { suffix ? suffix : null }
- { get( seoMetaData, [ 'meta', 'description' ], '' ) } + { getDescription + ? getDescription + : postExcerpt }
@@ -156,23 +168,10 @@ class MetaData extends Component { export default compose( [ withSelect( ( select ) => { - const { - getCurrentPost, - getCurrentPostType, - getEditedPostAttribute, - getEditedPostSlug, - getPermalinkParts, - } = select( 'core/editor' ); - - const { getPostType } = select( 'core' ); - const { id, link } = getCurrentPost(); + const { getEditedPostAttribute } = select( 'core/editor' ); return { metaData: getEditedPostAttribute( 'meta' )._iceberg_seo_metadata, - postID: id, - postLink: link, - postSlug: safeDecodeURIComponent( getEditedPostSlug() ), - permalinkParts: getPermalinkParts(), }; } ), withDispatch( ( dispatch ) => { diff --git a/src/components/post-settings/style.scss b/src/components/post-settings/style.scss index c4a8443..f7653ad 100644 --- a/src/components/post-settings/style.scss +++ b/src/components/post-settings/style.scss @@ -81,6 +81,22 @@ } } } + + .components-base-control__label{ + text-transform: capitalize; + } + + .components-base-control__help{ + margin-top: 0; + strong{ + span{ + color: rgb(159, 187, 88); + } + .to-red{ + color: rgb(226, 84, 64); + } + } + } } .component-iceberg-seo-preview{ @@ -91,7 +107,7 @@ .iceberg-seo-preview-title{ color: #1e0fbe; - font-size: 20px; + font-size: 18px; line-height: 1.3; text-overflow: ellipses; word-wrap: break-word; @@ -101,14 +117,14 @@ .iceberg-seo-preview-link{ margin: 1px 0 2px; color: #006621; - font-size: 14px; + font-size: 13px; line-height: 1.3; word-wrap: break-word; } .iceberg-seo-preview-desc{ color: #545454; - font-size: 14px; + font-size: 13px; line-height: 1.58; word-wrap: break-word; } From 90a506b6f8482df2dbee4688065bcfbfbf8dde49 Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Sat, 11 Jul 2020 00:54:26 +0800 Subject: [PATCH 11/14] Add social media image upload --- .../post-settings/flat-term-selector.js | 318 ------------------ .../post-settings/media-uploader.js | 145 ++++++++ src/components/post-settings/meta-data.js | 12 + 3 files changed, 157 insertions(+), 318 deletions(-) delete mode 100644 src/components/post-settings/flat-term-selector.js create mode 100644 src/components/post-settings/media-uploader.js diff --git a/src/components/post-settings/flat-term-selector.js b/src/components/post-settings/flat-term-selector.js deleted file mode 100644 index c6dd5af..0000000 --- a/src/components/post-settings/flat-term-selector.js +++ /dev/null @@ -1,318 +0,0 @@ -/** - * External dependencies - */ -import { - escape as escapeString, - find, - get, - invoke, - isEmpty, - map, - throttle, - unescape as unescapeString, - uniqBy, -} from 'lodash'; - -/** - * WordPress dependencies - */ -import { __, _x, sprintf } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { FormTokenField, withFilters } from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; -import apiFetch from '@wordpress/api-fetch'; -import { addQueryArgs } from '@wordpress/url'; - -/** - * Module constants - */ -const DEFAULT_QUERY = { - per_page: -1, - orderby: 'count', - order: 'desc', - _fields: 'id,name', -}; -const MAX_TERMS_SUGGESTIONS = 20; -const isSameTermName = ( termA, termB ) => - termA.toLowerCase() === termB.toLowerCase(); - -/** - * Returns a term object with name unescaped. - * The unescape of the name property is done using lodash unescape function. - * - * @param {Object} term The term object to unescape. - * - * @return {Object} Term object with name property unescaped. - */ -const unescapeTerm = ( term ) => { - return { - ...term, - name: unescapeString( term.name ), - }; -}; - -/** - * Returns an array of term objects with names unescaped. - * The unescape of each term is performed using the unescapeTerm function. - * - * @param {Object[]} terms Array of term objects to unescape. - * - * @return {Object[]} Array of term objects unescaped. - */ -const unescapeTerms = ( terms ) => { - return map( terms, unescapeTerm ); -}; - -class FlatTermSelector extends Component { - constructor() { - super( ...arguments ); - this.onChange = this.onChange.bind( this ); - this.searchTerms = throttle( this.searchTerms.bind( this ), 500 ); - this.findOrCreateTerm = this.findOrCreateTerm.bind( this ); - this.state = { - loading: ! isEmpty( this.props.terms ), - availableTerms: [], - selectedTerms: [], - }; - } - - componentDidMount() { - if ( ! isEmpty( this.props.terms ) ) { - this.initRequest = this.fetchTerms( { - include: this.props.terms.join( ',' ), - per_page: -1, - } ); - this.initRequest.then( - () => { - this.setState( { loading: false } ); - }, - ( xhr ) => { - if ( xhr.statusText === 'abort' ) { - return; - } - this.setState( { - loading: false, - } ); - } - ); - } - } - - componentWillUnmount() { - invoke( this.initRequest, [ 'abort' ] ); - invoke( this.searchRequest, [ 'abort' ] ); - } - - componentDidUpdate( prevProps ) { - if ( prevProps.terms !== this.props.terms ) { - this.updateSelectedTerms( this.props.terms ); - } - } - - fetchTerms( params = {} ) { - const { taxonomy } = this.props; - const query = { ...DEFAULT_QUERY, ...params }; - const request = apiFetch( { - path: addQueryArgs( `/wp/v2/${ taxonomy.rest_base }`, query ), - } ); - request.then( unescapeTerms ).then( ( terms ) => { - this.setState( ( state ) => ( { - availableTerms: state.availableTerms.concat( - terms.filter( - ( term ) => - ! find( - state.availableTerms, - ( availableTerm ) => - availableTerm.id === term.id - ) - ) - ), - } ) ); - this.updateSelectedTerms( this.props.terms ); - } ); - - return request; - } - - updateSelectedTerms( terms = [] ) { - const selectedTerms = terms.reduce( ( accumulator, termId ) => { - const termObject = find( - this.state.availableTerms, - ( term ) => term.id === termId - ); - if ( termObject ) { - accumulator.push( termObject.name ); - } - - return accumulator; - }, [] ); - this.setState( { - selectedTerms, - } ); - } - - findOrCreateTerm( termName ) { - const { taxonomy } = this.props; - const termNameEscaped = escapeString( termName ); - // Tries to create a term or fetch it if it already exists. - return apiFetch( { - path: `/wp/v2/${ taxonomy.rest_base }`, - method: 'POST', - data: { name: termNameEscaped }, - } ) - .catch( ( error ) => { - const errorCode = error.code; - if ( errorCode === 'term_exists' ) { - // If the terms exist, fetch it instead of creating a new one. - this.addRequest = apiFetch( { - path: addQueryArgs( `/wp/v2/${ taxonomy.rest_base }`, { - ...DEFAULT_QUERY, - search: termNameEscaped, - } ), - } ).then( unescapeTerms ); - return this.addRequest.then( ( searchResult ) => { - return find( searchResult, ( result ) => - isSameTermName( result.name, termName ) - ); - } ); - } - return Promise.reject( error ); - } ) - .then( unescapeTerm ); - } - - onChange( termNames ) { - const uniqueTerms = uniqBy( termNames, ( term ) => term.toLowerCase() ); - this.setState( { selectedTerms: uniqueTerms } ); - const newTermNames = uniqueTerms.filter( - ( termName ) => - ! find( this.state.availableTerms, ( term ) => - isSameTermName( term.name, termName ) - ) - ); - const termNamesToIds = ( names, availableTerms ) => { - return names.map( - ( termName ) => - find( availableTerms, ( term ) => - isSameTermName( term.name, termName ) - ).id - ); - }; - - if ( newTermNames.length === 0 ) { - return this.props.onUpdateTerms( - termNamesToIds( uniqueTerms, this.state.availableTerms ), - this.props.taxonomy.rest_base - ); - } - Promise.all( newTermNames.map( this.findOrCreateTerm ) ).then( - ( newTerms ) => { - const newAvailableTerms = this.state.availableTerms.concat( - newTerms - ); - this.setState( { availableTerms: newAvailableTerms } ); - return this.props.onUpdateTerms( - termNamesToIds( uniqueTerms, newAvailableTerms ), - this.props.taxonomy.rest_base - ); - } - ); - } - - searchTerms( search = '' ) { - invoke( this.searchRequest, [ 'abort' ] ); - this.searchRequest = this.fetchTerms( { search } ); - } - - render() { - const { slug, taxonomy, hasAssignAction } = this.props; - - if ( ! hasAssignAction ) { - return null; - } - - const { loading, availableTerms, selectedTerms } = this.state; - const termNames = availableTerms.map( ( term ) => term.name ); - const newTermLabel = get( - taxonomy, - [ 'labels', 'add_new_item' ], - slug === 'post_tag' ? __( 'Add new tag' ) : __( 'Add new Term' ) - ); - const singularName = get( - taxonomy, - [ 'labels', 'singular_name' ], - slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' ) - ); - const termAddedLabel = sprintf( - /* translators: %s: term name. */ - _x( '%s added', 'term' ), - singularName - ); - const termRemovedLabel = sprintf( - /* translators: %s: term name. */ - _x( '%s removed', 'term' ), - singularName - ); - const removeTermLabel = sprintf( - /* translators: %s: term name. */ - _x( 'Remove %s', 'term' ), - singularName - ); - - return ( - - ); - } -} - -export default compose( - withSelect( ( select, { slug } ) => { - const { getCurrentPost } = select( 'core/editor' ); - const { getTaxonomy } = select( 'core' ); - const taxonomy = getTaxonomy( slug ); - return { - hasCreateAction: taxonomy - ? get( - getCurrentPost(), - [ '_links', 'wp:action-create-' + taxonomy.rest_base ], - false - ) - : false, - hasAssignAction: taxonomy - ? get( - getCurrentPost(), - [ '_links', 'wp:action-assign-' + taxonomy.rest_base ], - false - ) - : false, - terms: taxonomy - ? select( 'core/editor' ).getEditedPostAttribute( - taxonomy.rest_base - ) - : [], - taxonomy, - }; - } ), - withDispatch( ( dispatch ) => { - return { - onUpdateTerms( terms, restBase ) { - dispatch( 'core/editor' ).editPost( { [ restBase ]: terms } ); - }, - }; - } ), - withFilters( 'editor.PostTaxonomyType' ) -)( FlatTermSelector ); diff --git a/src/components/post-settings/media-uploader.js b/src/components/post-settings/media-uploader.js new file mode 100644 index 0000000..6916fc1 --- /dev/null +++ b/src/components/post-settings/media-uploader.js @@ -0,0 +1,145 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; +import { withDispatch } from '@wordpress/data'; +import { Fragment, Component } from '@wordpress/element'; +import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { + withSpokenMessages, + Button, + DropZone, + ResponsiveWrapper, +} from '@wordpress/components'; + +class MediaUploader extends Component { + render() { + const { screen, onUpdateImage, onDropImage, seoMetaData } = this.props; + + const getImageID = get( seoMetaData, [ screen, 'image' ], '' ); + + const getImageSrc = get( seoMetaData, [ screen, 'image_src' ], '' ); + + const getImageSize = get( seoMetaData, [ screen, 'image_size' ], '' ); + + return ( + +
+ + { + onUpdateImage( screen, 'image', image.id ); + onUpdateImage( screen, 'image_src', image.url ); + onUpdateImage( screen, 'image_size', { + width: image.width, + height: image.height, + } ); + } } + unstableFeaturedImageFlow + allowedTypes={ [ 'image' ] } + render={ ( { open } ) => ( +
+ + +
+ ) } + value={ getImageID } + /> + + { getImageID && ( + +
+ + ); + } +} + +export default compose( [ + withDispatch( + ( dispatch, { noticeOperations, onUpdateImage }, { select } ) => { + return { + onDropImage( filesList ) { + select( 'core/block-editor' ) + .getSettings() + .mediaUpload( { + allowedTypes: [ 'image' ], + filesList, + onFileChange( [ image ] ) { + onUpdateImage( screen, 'image', image.id ); + onUpdateImage( screen, 'image_src', image.url ); + onUpdateImage( screen, 'image_size', { + width: image.width, + height: image.height, + } ); + }, + onError( message ) { + noticeOperations.removeAllNotices(); + noticeOperations.createErrorNotice( message ); + }, + } ); + }, + }; + } + ), + withSpokenMessages, +] )( MediaUploader ); diff --git a/src/components/post-settings/meta-data.js b/src/components/post-settings/meta-data.js index 4b66d26..deceee9 100644 --- a/src/components/post-settings/meta-data.js +++ b/src/components/post-settings/meta-data.js @@ -3,6 +3,11 @@ */ import { get } from 'lodash'; +/** + * Internal dependencies + */ +import MediaUploader from './media-uploader'; + /** * WordPress dependencies */ @@ -86,6 +91,13 @@ class MetaData extends Component { return ( + { [ 'twitter', 'facebook' ].includes( screen ) && ( + + ) } Date: Sat, 11 Jul 2020 01:36:47 +0800 Subject: [PATCH 12/14] Add social media preview --- src/components/post-settings/meta-data.js | 45 ++++++- src/components/post-settings/style.scss | 151 +++++++++++++++++----- 2 files changed, 162 insertions(+), 34 deletions(-) diff --git a/src/components/post-settings/meta-data.js b/src/components/post-settings/meta-data.js index deceee9..07e1186 100644 --- a/src/components/post-settings/meta-data.js +++ b/src/components/post-settings/meta-data.js @@ -89,6 +89,8 @@ class MetaData extends Component { '' ); + const getImageSrc = get( seoMetaData, [ screen, 'image_src' ], '' ); + return ( { [ 'twitter', 'facebook' ].includes( screen ) && ( @@ -155,10 +157,9 @@ class MetaData extends Component { { __( 'Search Engine Result Preview', 'iceberg' ) } -
+
{ getTitle ? getTitle : postTitle } - { get( seoMetaData, [ 'meta', 'title' ], '' ) }
{ prefix ? prefix : null } @@ -173,6 +174,46 @@ class MetaData extends Component {
) } + + { [ 'twitter', 'facebook' ].includes( screen ) && ( + + + +
+
+ { getImageSrc && ( +
+ ) } +
+
+
+ { getTitle ? getTitle : postTitle } +
+
+ { getDescription + ? getDescription + : postExcerpt } +
+
+ { prefix ? prefix : null } + { postSlug } + { suffix ? suffix : null } +
+
+
+ + ) } ); } diff --git a/src/components/post-settings/style.scss b/src/components/post-settings/style.scss index f7653ad..feb4976 100644 --- a/src/components/post-settings/style.scss +++ b/src/components/post-settings/style.scss @@ -1,11 +1,11 @@ -#components-iceberg-post-settings{ - .components-button.components-iceberg-post-settings__trigger{ +#components-iceberg-post-settings { + .components-button.components-iceberg-post-settings__trigger { color: var(--iceberg--color--accent); } } -.components-iceberg-post-settings__content{ +.components-iceberg-post-settings__content { width: 380px; left: auto; bottom: auto; @@ -13,26 +13,26 @@ right: 5px; transform: none; min-height: calc(100vh - 10px); - - .components-modal__content{ - > div:not(.components-modal__header){ + + .components-modal__content { + > div:not(.components-modal__header) { margin-bottom: 25px; } } - .components-base-control__label{ + .components-base-control__label { display: block; width: 100%; } - .post-settings__featured-image{ + .post-settings__featured-image { position: relative; - .components-button{ - &.is-secondary{ + .components-button { + &.is-secondary { display: none; } - &.is-destructive{ + &.is-destructive { position: absolute; margin: 0; top: 10px; @@ -46,66 +46,66 @@ fill: currentColor; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; - background-color: rgba(0,0,0,.6); + background-color: rgba(0, 0, 0, 0.6); background-position: center center; - &:hover{ + &:hover { background-color: #f05230; } } } - .editor-post-featured-image__preview{ + .editor-post-featured-image__preview { padding: 0 !important; border-radius: 0; } } - .components-iceberg-post-settings__metadata-menu{ + .components-iceberg-post-settings__metadata-menu { border-radius: 4px; border: 1px solid var(--iceberg--color--accent--light); - .components-button{ + .components-button { text-align: left; flex-direction: row-reverse; height: auto; padding: 9px 10px 10px 12px; border-radius: 0; - &:not(:last-of-type){ + &:not(:last-of-type) { border-bottom: 1px solid var(--iceberg--color--accent--light); } - .components-menu-item__info-wrapper{ + .components-menu-item__info-wrapper { width: 100%; } } } - .components-base-control__label{ + .components-base-control__label { text-transform: capitalize; } - .components-base-control__help{ + .components-base-control__help { margin-top: 0; - strong{ - span{ + strong { + span { color: rgb(159, 187, 88); } - .to-red{ + .to-red { color: rgb(226, 84, 64); } } } } -.component-iceberg-seo-preview{ - font-family: Arial,sans-serif; - background: #fff; - border: 1px solid #e5eff5; +.components-iceberg-seo-preview { + font-family: Arial, sans-serif; + background: #fff; + border: 1px solid #e5eff5; padding: 10px 12px; - - .iceberg-seo-preview-title{ + + .iceberg-seo-preview-title { color: #1e0fbe; font-size: 18px; line-height: 1.3; @@ -114,7 +114,7 @@ -webkit-text-overflow: ellipsis; } - .iceberg-seo-preview-link{ + .iceberg-seo-preview-link { margin: 1px 0 2px; color: #006621; font-size: 13px; @@ -122,10 +122,97 @@ word-wrap: break-word; } - .iceberg-seo-preview-desc{ + .iceberg-seo-preview-desc { color: #545454; font-size: 13px; line-height: 1.58; word-wrap: break-word; } -} \ No newline at end of file +} + +.components-iceberg-twitter-preview, +.components-iceberg-facebook-preview { + .iceberg-seo-preview-image { + div { + width: 100%; + height: 160px; + background-size: cover; + background-position: 50%; + } + } +} + +.components-iceberg-twitter-preview { + overflow: hidden; + border: 1px solid #e1e8ed; + color: #292f33; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.3; + background: #fff; + border-radius: 0.42857em; + -webkit-font-smoothing: antialiased; + + .iceberg-seo-preview-content { + background: #fff; + padding: 12px 14px; + } + .iceberg-seo-preview-title { + max-height: 1.3em; + overflow: hidden; + margin: 0 0 0.15em; + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; + } + .iceberg-seo-preview-link { + max-height: 1.3em; + overflow: hidden; + color: #8899a6; + text-transform: lowercase; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.components-iceberg-facebook-preview { + background: #fff; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.1); + + .iceberg-seo-preview-content { + padding: 10px 12px; + } + + .iceberg-seo-preview-title { + color: #1d2129; + max-height: 110px; + overflow: hidden; + margin-bottom: 5px; + font-family: Georgia, serif; + font-size: 18px; + line-height: 22px; + font-weight: 500; + word-wrap: break-word; + } + + .iceberg-seo-preview-desc { + color: #4b4f56; + max-height: 80px; + overflow: hidden; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1px; + } + + .iceberg-seo-preview-link { + overflow: hidden; + padding-top: 18px; + color: #90949c; + font-size: 11px; + line-height: 11px; + letter-spacing: -0.1px; + text-transform: uppercase; + text-overflow: ellipsis; + white-space: nowrap; + } +} From a631c9e29c53687b2292b55770d810522c239cf5 Mon Sep 17 00:00:00 2001 From: Jeffrey Carandang Date: Tue, 16 Feb 2021 07:23:47 +0800 Subject: [PATCH 13/14] Remove social media metadata and add category --- includes/class-iceberg-settings.php | 11 - src/components/post-settings/index.js | 46 ++-- .../post-settings/meta-data-menu.js | 63 ----- src/components/post-settings/meta-data.js | 244 ------------------ 4 files changed, 17 insertions(+), 347 deletions(-) delete mode 100644 src/components/post-settings/meta-data-menu.js delete mode 100644 src/components/post-settings/meta-data.js diff --git a/includes/class-iceberg-settings.php b/includes/class-iceberg-settings.php index 606e381..ab8b475 100644 --- a/includes/class-iceberg-settings.php +++ b/includes/class-iceberg-settings.php @@ -81,17 +81,6 @@ public static function register_settings() { ) ); - register_meta( - 'post', - '_iceberg_seo_metadata', - array( - 'show_in_rest' => true, - 'single' => true, - 'auth_callback' => function() { - return current_user_can( 'edit_posts' ); - }, - ) - ); } /** diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js index 4b7f7c9..9c3c379 100644 --- a/src/components/post-settings/index.js +++ b/src/components/post-settings/index.js @@ -3,12 +3,6 @@ */ import { get } from 'lodash'; -/** - * Internal dependencies - */ -import MetaDataMenu from './meta-data-menu'; -import MetaData from './meta-data'; - /** * WordPress dependencies */ @@ -169,28 +163,6 @@ class PostSettings extends Component { } } } > - { currentScreen !== 'settings' && ( - - - - - ) } { currentScreen === 'settings' && (
@@ -269,8 +241,24 @@ class PostSettings extends Component { } } /> + + + + { + if ( + taxonomy.slug !== 'category' + ) { + return false; + } + return content; + } } + /> + - ) } diff --git a/src/components/post-settings/meta-data-menu.js b/src/components/post-settings/meta-data-menu.js deleted file mode 100644 index b3461eb..0000000 --- a/src/components/post-settings/meta-data-menu.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/compose'; -import { Fragment, Component } from '@wordpress/element'; -import { withSpokenMessages, MenuGroup, MenuItem } from '@wordpress/components'; - -class MetaDataMenu extends Component { - render() { - const { switchView } = this.props; - - return ( - - - { - switchView( 'meta', __( 'Meta Data', 'iceberg' ) ); - } } - > - { __( 'Meta Data', 'iceberg' ) } - - - { - switchView( - 'twitter', - __( 'Twitter Card', 'iceberg' ) - ); - } } - > - { __( 'Twitter Card', 'iceberg' ) } - - - { - switchView( - 'facebook', - __( 'Facebook Card', 'iceberg' ) - ); - } } - > - { __( 'Facebook Card', 'iceberg' ) } - - - - ); - } -} - -export default compose( [ withSpokenMessages ] )( MetaDataMenu ); diff --git a/src/components/post-settings/meta-data.js b/src/components/post-settings/meta-data.js deleted file mode 100644 index 07e1186..0000000 --- a/src/components/post-settings/meta-data.js +++ /dev/null @@ -1,244 +0,0 @@ -/** - * External dependencies - */ -import { get } from 'lodash'; - -/** - * Internal dependencies - */ -import MediaUploader from './media-uploader'; - -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { compose } from '@wordpress/compose'; -import { withDispatch, withSelect } from '@wordpress/data'; -import { Fragment, Component } from '@wordpress/element'; -import { count as wordCount } from '@wordpress/wordcount'; -import { - withSpokenMessages, - TextControl, - TextareaControl, -} from '@wordpress/components'; - -class MetaData extends Component { - constructor( { metaData } ) { - super( ...arguments ); - - this.updateSeoMetaData = this.updateSeoMetaData.bind( this ); - this.getDescription = this.getDescription.bind( this ); - - this.state = { - seoMetaData: metaData ? JSON.parse( metaData ) : {}, - }; - } - - updateSeoMetaData( category, key, value ) { - const getMetaData = this.state.seoMetaData; - - if ( typeof getMetaData[ category ] === 'undefined' ) { - getMetaData[ category ] = {}; - } - - getMetaData[ category ][ key ] = value; - - this.setState( { - seoMetaData: getMetaData, - } ); - - this.props.updateMetaData( getMetaData ); - } - - getDescription( suggested, category, key ) { - const getValue = get( this.state.seoMetaData, [ category, key ], '' ); - - const count = wordCount( getValue, 'characters_including_spaces' ); - - return { - __html: sprintf( - // translators: 1: Suggested count, 2: Value characters count - __( - 'Recommended: %1$s characters. You’ve used %2$s', - 'iceberg' - ), - suggested, - count > suggested - ? '' + count + '' - : '' + count + '' - ), - }; - } - - render() { - const { - screen, - postSlug, - permalinkParts, - postTitle, - postExcerpt, - } = this.props; - const { prefix, suffix } = permalinkParts; - const { seoMetaData } = this.state; - - const getTitle = get( seoMetaData, [ screen, 'title' ], '' ); - - const getDescription = get( - seoMetaData, - [ screen, 'description' ], - '' - ); - - const getImageSrc = get( seoMetaData, [ screen, 'image_src' ], '' ); - - return ( - - { [ 'twitter', 'facebook' ].includes( screen ) && ( - - ) } - { - this.updateSeoMetaData( screen, 'title', title ); - } } - /> - - { getTitle && screen === 'meta' && ( -

- ) } - - { - this.updateSeoMetaData( - screen, - 'description', - description - ); - } } - /> - - { getDescription && screen === 'meta' && ( -

- ) } - { screen === 'meta' && ( - - { - this.updateSeoMetaData( 'meta', 'url', url ); - } } - /> - - - -

-
- { getTitle ? getTitle : postTitle } -
-
- { prefix ? prefix : null } - { postSlug } - { suffix ? suffix : null } -
-
- { getDescription - ? getDescription - : postExcerpt } -
-
- - ) } - - { [ 'twitter', 'facebook' ].includes( screen ) && ( - - - -
-
- { getImageSrc && ( -
- ) } -
-
-
- { getTitle ? getTitle : postTitle } -
-
- { getDescription - ? getDescription - : postExcerpt } -
-
- { prefix ? prefix : null } - { postSlug } - { suffix ? suffix : null } -
-
-
- - ) } - - ); - } -} - -export default compose( [ - withSelect( ( select ) => { - const { getEditedPostAttribute } = select( 'core/editor' ); - - return { - metaData: getEditedPostAttribute( 'meta' )._iceberg_seo_metadata, - }; - } ), - withDispatch( ( dispatch ) => { - const { editPost } = dispatch( 'core/editor' ); - - return { - updateMetaData( value ) { - editPost( { - meta: { - _iceberg_seo_metadata: JSON.stringify( value ), - }, - } ); - }, - }; - } ), - withSpokenMessages, -] )( MetaData ); From 76b3077ec1bd1ae902db877128f43d139328b350 Mon Sep 17 00:00:00 2001 From: Lint Action Date: Mon, 15 Feb 2021 23:25:27 +0000 Subject: [PATCH 14/14] Fix code style issues with ESLint --- src/components/post-settings/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/post-settings/index.js b/src/components/post-settings/index.js index 9c3c379..8dcc201 100644 --- a/src/components/post-settings/index.js +++ b/src/components/post-settings/index.js @@ -243,7 +243,9 @@ class PostSettings extends Component { - +