Add "Post Settings" with meta data option

includes/class-iceberg-settings.php

@@ -80,6 +80,7 @@ public static function register_settings() {
 				},
 			)
 		);
+
 	}
 
 	/**

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 && <Shortcuts isActive={ isActive } /> }
 				<RegisterShortcuts isActive={ isActive } />
+				<PostSettings isActive={ isActive } />
 				<MoreMenu isActive={ isActive } />
 				<BlockLimiter isActive={ isActive } />
 				<ThemeSwitcher isActive={ isActive } isEnabled={ isThemesUI } />

src/components/post-settings/index.js

@@ -0,0 +1,308 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * 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 { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
+import {
+	PostFeaturedImageCheck,
+	PostFeaturedImage,
+	PostTaxonomies,
+	PostTaxonomiesCheck,
+	PostExcerpt as PostExcerptForm,
+	PostSchedule,
+	PostScheduleLabel,
+} from '@wordpress/editor';
+import {
+	withSpokenMessages,
+	Dropdown,
+	Modal,
+	Button,
+	TextControl,
+	ExternalLink,
+} from '@wordpress/components';
+
+class PostSettings extends Component {
+	constructor( { postSlug, postTitle, postID } ) {
+		super( ...arguments );
+
+		this.addPostSettings = this.addPostSettings.bind( this );
+		this.setSlug = this.setSlug.bind( this );
+		this.switchView = this.switchView.bind( this );
+
+		this.state = {
+			isEnabled: false,
+			isSettingsOpen: false,
+			title: __( 'Post Settings', 'iceberg' ),
+			currentScreen: 'settings',
+			editedSlug:
+				safeDecodeURIComponent( postSlug ) ||
+				cleanForSlug( postTitle ) ||
+				postID,
+		};
+	}
+
+	componentDidMount() {
+		this.addPostSettings();
+	}
+
+	componentDidUpdate() {
+		this.addPostSettings();
+	}
+
+	onRequestClose() {
+		const { isSettingsOpen } = this.state;
+
+		this.setState( {
+			isSettingsOpen: ! isSettingsOpen,
+		} );
+
+		if ( isSettingsOpen ) {
+			this.props.closePostSettings();
+		}
+	}
+
+	setSlug( event ) {
+		const { postSlug, onUpdateSlug } = this.props;
+		const { value } = event.target;
+
+		const editedSlug = cleanForSlug( value );
+
+		if ( editedSlug === postSlug ) {
+			return;
+		}
+
+		onUpdateSlug( editedSlug );
+	}
+
+	switchView( screen, title ) {
+		this.setState( { currentScreen: screen, title } );
+	}
+
+	addPostSettings() {
+		const { isActive } = this.props;
+
+		const MoreMenuDropdown = () => {
+			return (
+				<Fragment>
+					<Button
+						className="components-iceberg-post-settings__trigger"
+						icon="admin-generic"
+						onClick={ () => {
+							this.onRequestClose();
+						} }
+					/>
+				</Fragment>
+			);
+		};
+
+		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',
+				'<div id="components-iceberg-post-settings"></div>'
+			);
+
+			render(
+				<MoreMenuDropdown />,
+				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() {
+		const { isSettingsOpen, currentScreen, title } = this.state;
+		const {
+			postType,
+			postLink,
+			postTitle,
+			permalinkParts,
+			postExcerpt,
+			postSlug,
+		} = this.props;
+
+		if ( ! postType ) {
+			return null;
+		}
+
+		return (
+			<Fragment>
+				{ isSettingsOpen && (
+					<Modal
+						title={ title }
+						className="components-iceberg-modal components-iceberg-post-settings__content"
+						overlayClassName="components-iceberg-post-settings__overlay"
+						onRequestClose={ ( event ) => {
+							if (
+								! event.relatedTarget ||
+								! event.relatedTarget.classList.contains(
+									'media-modal'
+								)
+							) {
+								this.onRequestClose();
+							}
+						} }
+					>
+						{ currentScreen === 'settings' && (
+							<Fragment>
+								<div className="post-settings__featured-image">
+									<PostFeaturedImageCheck>
+										<PostFeaturedImage />
+									</PostFeaturedImageCheck>
+								</div>
+								<div className="post-settings__url-slug">
+									<TextControl
+										label={
+											get(
+												postType,
+												[ 'label', 'name' ],
+												'Post'
+											) +
+											' ' +
+											__( 'Slug', 'iceberg' )
+										}
+										value={ this.state.editedSlug }
+										onChange={ ( newSlug ) =>
+											this.setState( {
+												editedSlug: newSlug,
+											} )
+										}
+										onBlur={ this.setSlug }
+									/>
+									<div className="edit-post-post-link__preview-link-container">
+										<ExternalLink
+											className="edit-post-post-link__link"
+											href={ postLink }
+											target="_blank"
+										>
+											{ postLink }
+										</ExternalLink>
+									</div>
+								</div>
+
+								<div className="post-settings__publish-date">
+									<label className="components-base-control__label">
+										{ __( 'Publish Date', 'iceberg' ) }
+									</label>
+									<Dropdown
+										position="bottom left"
+										contentClassName="edit-post-post-schedule__dialog"
+										renderToggle={ ( {
+											onToggle,
+											isOpen,
+										} ) => (
+											<>
+												<Button
+													className="edit-post-post-schedule__toggle"
+													onClick={ onToggle }
+													aria-expanded={ isOpen }
+													isTertiary
+												>
+													<PostScheduleLabel />
+												</Button>
+											</>
+										) }
+										renderContent={ () => <PostSchedule /> }
+									/>
+								</div>
+
+								<PostTaxonomiesCheck>
+									<PostTaxonomies
+										taxonomyWrapper={ (
+											content,
+											taxonomy
+										) => {
+											if (
+												taxonomy.slug !== 'post_tag'
+											) {
+												return false;
+											}
+											return content;
+										} }
+									/>
+								</PostTaxonomiesCheck>
+
+								<PostTaxonomiesCheck>
+									<label className="components-base-control__label">
+										{ __( 'Category', 'iceberg' ) }
+									</label>
+									<PostTaxonomies
+										taxonomyWrapper={ (
+											content,
+											taxonomy
+										) => {
+											if (
+												taxonomy.slug !== 'category'
+											) {
+												return false;
+											}
+											return content;
+										} }
+									/>
+								</PostTaxonomiesCheck>
+								<PostExcerptForm />
+							</Fragment>
+						) }
+					</Modal>
+				) }
+			</Fragment>
+		);
+	}
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			getCurrentPost,
+			getCurrentPostType,
+			getEditedPostAttribute,
+			getPermalinkParts,
+		} = select( 'core/editor' );
+
+		const { getPostType } = select( 'core' );
+		const { id, link } = getCurrentPost();
+
+		return {
+			postType: getPostType( getCurrentPostType() ),
+			postSlug: getEditedPostAttribute( 'slug' ),
+			postTitle: getEditedPostAttribute( 'title' ),
+			postExcerpt: getEditedPostAttribute( 'excerpt' ),
+			permalinkParts: getPermalinkParts(),
+			postLink: link,
+			postID: id,
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { editPost } = dispatch( 'core/editor' );
+
+		return {
+			closePostSettings() {
+				// dispatch( 'core/editor' ).savePost();
+			},
+			onUpdateSlug( slug ) {
+				editPost( { slug } );
+			},
+		};
+	} ),
+	withSpokenMessages,
+] )( PostSettings );