WIP: create format lib

docs/manifest.json

@@ -401,6 +401,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/escape-html/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/format-library",
+		"slug": "packages-format-library",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/format-library/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/hooks",
 		"slug": "packages-hooks",

lib/client-assets.php

@@ -463,6 +463,23 @@ function gutenberg_register_scripts_and_styles() {
 		filemtime( gutenberg_dir_path() . 'build/block-library/index.js' ),
 		true
 	);
+	wp_register_script(
+		'wp-format-library',
+		gutenberg_url( 'build/format-library/index.js' ),
+		array(
+			'wp-components',
+			'wp-dom',
+			'wp-editor',
+			'wp-element',
+			'wp-i18n',
+			'wp-keycodes',
+			'wp-polyfill',
+			'wp-rich-text',
+			'wp-url',
+		),
+		filemtime( gutenberg_dir_path() . 'build/format-library/index.js' ),
+		true
+	);
 	wp_register_script(
 		'wp-nux',
 		gutenberg_url( 'build/nux/index.js' ),
@@ -647,6 +664,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-editor',
 			'wp-element',
 			'wp-embed',
+			'wp-format-library',
 			'wp-i18n',
 			'wp-keycodes',
 			'wp-nux',
@@ -711,7 +729,7 @@ function gutenberg_register_scripts_and_styles() {
 	wp_register_style(
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-nux' ),
+		array( 'wp-components', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-format-library', 'wp-nux' ),
 		filemtime( gutenberg_dir_path() . 'build/edit-post/style.css' )
 	);
 	wp_style_add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -732,6 +750,14 @@ function gutenberg_register_scripts_and_styles() {
 	);
 	wp_style_add_data( 'wp-block-library', 'rtl', 'replace' );
 
+	wp_register_style(
+		'wp-format-library',
+		gutenberg_url( 'build/format-library/style.css' ),
+		array(),
+		filemtime( gutenberg_dir_path() . 'build/format-library/style.css' )
+	);
+	wp_style_add_data( 'wp-format-library', 'rtl', 'replace' );
+
 	wp_register_style(
 		'wp-edit-blocks',
 		gutenberg_url( 'build/block-library/editor.css' ),

package.json

@@ -35,6 +35,7 @@
 		"@wordpress/editor": "file:packages/editor",
 		"@wordpress/element": "file:packages/element",
 		"@wordpress/escape-html": "file:packages/escape-html",
+		"@wordpress/format-library": "file:packages/format-library",
 		"@wordpress/hooks": "file:packages/hooks",
 		"@wordpress/html-entities": "file:packages/html-entities",
 		"@wordpress/i18n": "file:packages/i18n",

packages/edit-post/package.json

@@ -31,6 +31,7 @@
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
+		"@wordpress/format-library": "file:../format-library",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/keycodes": "file:../keycodes",

packages/edit-post/src/index.js

@@ -6,6 +6,7 @@ import '@wordpress/editor';
 import '@wordpress/nux';
 import '@wordpress/viewport';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { registerCoreFormats } from '@wordpress/format-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
@@ -59,6 +60,7 @@ export function initializeEditor( id, postType, postId, settings, overridePost )
 	const reboot = reinitializeEditor.bind( null, postType, postId, target, settings, overridePost );
 
 	registerCoreBlocks();
+	registerCoreFormats();
 
 	dispatch( 'core/nux' ).triggerGuide( [
 		'core/editor.inserter',

packages/editor/src/components/rich-text/format-edit.js

@@ -4,20 +4,16 @@
 import { Fragment } from '@wordpress/element';
 import {
 	getActiveFormat,
+	getFormatTypes,
 } from '@wordpress/rich-text';
 
-/**
- * Internal dependencies
- */
-import { formatControls } from './format-controls';
-
 const FormatEdit = ( { value, onChange } ) => {
 	return (
 		<Fragment>
-			{ formatControls.map( ( { selector, edit: Edit }, i ) =>
+			{ getFormatTypes().map( ( { format, edit: Edit }, i ) =>
 				Edit && <Edit
 					key={ i }
-					isActive={ getActiveFormat( value, selector ) !== undefined }
+					isActive={ getActiveFormat( value, format ) !== undefined }
 					value={ value }
 					onChange={ onChange }
 				/>

packages/editor/src/components/rich-text/index.js

@@ -10,6 +10,8 @@ import {
 	noop,
 	isEqual,
 	omit,
+	// mapValues,
+	// mapKeys,
 } from 'lodash';
 import memize from 'memize';
 
@@ -72,6 +74,30 @@ const { Node, getSelection } = window;
  */
 const TINYMCE_ZWSP = '\uFEFF';
 
+// function toFormat( { type, attributes } ) {
+// 	const { format, attributes: attributesDefinition } =
+// 		find( formatControls, ( { match } ) => type === match.tagName );
+
+// 	return {
+// 		type: format,
+// 		attributes: mapValues( attributesDefinition, ( name ) =>
+// 			attributes ? attributes[ name ] : undefined
+// 		),
+// 	};
+// }
+
+// function fromFormat( { type, attributes } ) {
+// 	const { match, attributes: attributesDefinition } =
+// 		find( formatControls, ( { format } ) => type === format );
+
+// 	return {
+// 		type: match.tagName,
+// 		attributes: mapKeys( attributes, ( value, key ) =>
+// 			attributesDefinition[ key ]
+// 		),
+// 	};
+// }
+
 export class RichText extends Component {
 	constructor( { value, onReplace, multiline } ) {
 		super( ...arguments );

packages/editor/src/style.scss

@@ -39,7 +39,6 @@
 @import "./components/post-title/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/rich-text/core-tokens/image/style.scss";
-@import "./components/rich-text/format-controls/link/style.scss";
 @import "./components/rich-text/format-toolbar/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/rich-text/tokens/ui/style.scss";

packages/editor/src/utils/index.js

@@ -4,3 +4,4 @@
 import mediaUpload from './media-upload';
 
 export { mediaUpload };
+export { filterURLForDisplay } from './url';

packages/format-library/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/format-library/README.md

@@ -0,0 +1,23 @@
+# Block library
+
+Format library for the WordPress editor.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/format-library --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+## Usage
+
+```js
+import { registerCoreFormats } from '@wordpress/format-library';
+
+registerCoreFormats();
+```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/format-library/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "@wordpress/format-library",
+	"version": "2.1.0",
+	"description": "Format library for the WordPress editor.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"formats"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/format-library/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.0.0",
+		"@wordpress/components": "file:../components",
+		"@wordpress/dom": "file:../dom",
+		"@wordpress/editor": "file:../editor",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/rich-text": "file:../rich-text",
+		"@wordpress/url": "file:../url"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/editor/src/components/rich-text/format-controls/bold/index.js → packages/format-library/src/bold/index.js

@@ -9,8 +9,11 @@ import { toggleFormat } from '@wordpress/rich-text';
 const Shortcut = () => null;
 
 export const bold = {
-	format: 'bold',
-	selector: 'strong',
+	name: 'core/bold',
+	title: __( 'Bold' ),
+	match: {
+		tagName: 'strong',
+	},
 	edit( { isActive, value, onChange } ) {
 		const onToggle = () => onChange( toggleFormat( value, { type: 'strong' } ) );
 

packages/editor/src/components/rich-text/format-controls/code/index.js → packages/format-library/src/code/index.js

@@ -1,14 +1,18 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
 
 const Shortcut = () => null;
 
 export const code = {
-	format: 'code',
-	selector: 'code',
+	name: 'core/code',
+	title: __( 'Code' ),
+	match: {
+		tagName: 'code',
+	},
 	edit( { value, onChange } ) {
 		const onToggle = () => onChange( toggleFormat( value, { type: 'code' } ) );
 

packages/editor/src/components/rich-text/format-controls/image/index.js → packages/format-library/src/image/index.js

@@ -5,18 +5,16 @@ import { __ } from '@wordpress/i18n';
 import { Fragment, Component } from '@wordpress/element';
 import { Fill } from '@wordpress/components';
 import { insertObject } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
-import InserterListItem from '../../../inserter-list-item';
-import MediaUpload from '../../../media-upload';
+import { InserterListItem, MediaUpload } from '@wordpress/editor';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 export const image = {
-	format: 'image',
-	selector: 'img',
+	name: 'core/image',
+	title: __( 'Image' ),
+	match: {
+		tagName: 'img',
+	},
 	edit: class ImageEdit extends Component {
 		constructor() {
 			super( ...arguments );

packages/format-library/src/index.js

@@ -0,0 +1,25 @@
+import { bold } from './bold';
+import { code } from './code';
+import { image } from './image';
+import { italic } from './italic';
+import { link } from './link';
+import { strikethrough } from './strikethrough';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	registerFormatType,
+} from '@wordpress/rich-text';
+
+export const registerCoreFormats = () => {
+	[
+		bold,
+		code,
+		image,
+		italic,
+		link,
+		strikethrough,
+	].forEach( registerFormatType );
+};
+

packages/editor/src/components/rich-text/format-controls/italic/index.js → packages/format-library/src/italic/index.js

@@ -9,8 +9,11 @@ import { toggleFormat } from '@wordpress/rich-text';
 const Shortcut = () => null;
 
 export const italic = {
-	format: 'italic',
-	selector: 'em',
+	name: 'core/italic',
+	title: __( 'Italic' ),
+	match: {
+		tagName: 'em',
+	},
 	edit( { isActive, value, onChange } ) {
 		const onToggle = () => onChange( toggleFormat( value, { type: 'em' } ) );