Gutenberg: Add WP.com shortlinks extension (#29475)

* Gutenberg: Add WP.com shortlinks

* Drop prettier pragmas

client/gutenberg/extensions/presets/jetpack/index.json

@@ -8,6 +8,7 @@
   ],
   "beta": [
     "related-posts",
+    "shortlinks",
     "subscriptions",
     "tiled-gallery",
     "vr"

client/gutenberg/extensions/shortlinks/editor.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { name, settings } from '.';
+import registerJetpackPlugin from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-plugin';
+
+registerJetpackPlugin( name, settings );

client/gutenberg/extensions/shortlinks/index.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import JetpackPluginSidebar from 'gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar';
+import ShortlinksPanel from './panel';
+
+export const name = 'shortlinks';
+
+export const settings = {
+	render: () => (
+		<JetpackPluginSidebar>
+			<ShortlinksPanel />
+		</JetpackPluginSidebar>
+	),
+};

client/gutenberg/extensions/shortlinks/panel.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { get } from 'lodash';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+
+class ShortlinksPanel extends Component {
+	onFocus = event => event.target.select();
+
+	render() {
+		const { shortlink } = this.props;
+
+		if ( ! shortlink ) {
+			return null;
+		}
+
+		return (
+			<PanelBody title={ __( 'Shortlink' ) }>
+				<TextControl readOnly onFocus={ this.onFocus } value={ shortlink } />
+			</PanelBody>
+		);
+	}
+}
+
+export default withSelect( select => {
+	const currentPost = select( 'core/editor' ).getCurrentPost();
+	return {
+		shortlink: get( currentPost, 'jetpack_shortlink', '' ),
+	};
+} )( ShortlinksPanel );