Initial commit of experimental Draft block

blocks/draft/editor.scss

@@ -0,0 +1,10 @@
+.wp-block-jetpack-draft {
+	.draft-label {
+		text-align: right;
+		font-size: 0.8rem;
+	}
+	.draft-content {
+		border: 1px dashed #cccccc;
+		padding: 8px;
+	}
+}

blocks/draft/index.php

@@ -0,0 +1,18 @@
+<?php
+function draft_block_init() {
+	register_block_type( 'jetpack/draft', [
+		'editor_script' => 'block-experiments',
+		'style' => 'block-experiments',
+		'editor_style' => 'block-experiments-editor',
+		'render_callback' => 'render_block_draft',
+	]);
+}
+add_action( 'init', 'draft_block_init' );
+
+function render_block_draft( $attributes, $content ) {
+	if ( ! current_user_can( 'editor' ) && ! current_user_can( 'administrator' ) ) {
+		return;
+	}
+	$draft_label = '<div class="wp-block-jetpack-draft__label">' . __( 'Draft content: only visible to editors' ) . '</div>';
+	return $draft_label . $content;
+}

blocks/draft/readme.md

@@ -0,0 +1,19 @@
+## Draft content editing block
+
+This is currently just an experimental block that allows easier drafting of post text content, which can then be converted to blocks for more complex formatting once the text is finalised.
+
+### Why?
+
+One criticism of the block editor over the old classic editor is that it can be a distracting enviroment for those that are drafting long form posts as apposed to contructing website pages. Although the level of distraction can be reduced by pinning the block toolbar to the top, copying and pasting, particularly getting partial text between two paragraph blocks, is not as fluid and easy as in a standard text editor.
+
+This block allows very quick and easy text editing, with basic text formatting, for initial post writing, which can then be converted to standard paragraph blocks to allow all the flexibility of the block editor for final formatting.
+
+See pcjTuq-nG-p2 for more background.
+
+### Using
+
+`yarn start` and then map this repo dir into a local wp env.
+
+or
+
+`yarn plugin draft` then `yarn bundle` and a `jetpack-draft.zip` plugin file should appear in the `./bundles` folder.

blocks/draft/src/edit.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import FinaliseContentButton from './finalise-content';
+
+export default function DraftEdit( {
+	attributes,
+	setAttributes,
+	mergeBlocks,
+	onReplace,
+	className,
+	mergedStyle,
+	clientId,
+} ) {
+	const { content } = attributes;
+	const blockProps = useBlockProps( {
+		className,
+		style: mergedStyle,
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<FinaliseContentButton
+					clientId={ clientId }
+					content={ content }
+				/>
+			</BlockControls>
+			<section { ...blockProps }>
+				<div className="draft-label">
+					{ __( 'Draft content: only visible to editors' ) }
+				</div>
+				<RichText
+					className="draft-content"
+					allowedFormats={ [
+						'core/bold',
+						'core/italic',
+						'core/link',
+						'core/superscript',
+						'core/subscript',
+						'core/strikethrough',
+						'core/text-color',
+					] }
+					identifier="value"
+					multiline
+					value={ content }
+					onChange={ ( nextValue ) =>
+						setAttributes( {
+							content: nextValue,
+						} )
+					}
+					onMerge={ mergeBlocks }
+					aria-label={ __( 'Start drafting' ) }
+					placeholder={ __( 'Start drafting' ) }
+					onReplace={ onReplace }
+					__unstableOnSplitMiddle={ () =>
+						createBlock( 'core/paragraph' )
+					}
+				/>
+			</section>
+		</>
+	);
+}

blocks/draft/src/finalise-content.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { rawHandler } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const FinaliseContentButton = ({ clientId, content }) => {
+	const { replaceBlocks } = useDispatch(blockEditorStore);
+	const block = useSelect(
+		(select) => {
+			return select(blockEditorStore).getBlock(clientId);
+		},
+		[clientId]
+	);
+	return (
+		<ToolbarButton
+			showTooltip
+			onClick={() => replaceBlocks(block.clientId, rawHandler({ HTML: content }))}
+			label={__('Convert the content to individual blocks for final formatting')}
+		>
+			{__('Finalise content')}
+		</ToolbarButton>
+	);
+};
+
+export default FinaliseContentButton;

blocks/draft/src/index.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { pencil as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+
+registerBlockType( 'a8c/draft', {
+	icon,
+	edit,
+	save,
+} );
+
+export function registerBlock() {
+	registerBlockType( 'jetpack/draft', {
+		title: __( 'Draft', 'draft' ),
+		description: __(
+			'A block for drafting post or page content, which can later be converted to individual blocks for more complex formatting.',
+			'draft'
+		),
+		icon,
+		category: 'text',
+		supports: {
+			html: true,
+			align: false,
+		},
+		attributes: {
+			content: {
+				type: 'string',
+				source: 'html',
+				selector: 'section',
+				multiline: 'p',
+				default: '',
+				__experimentalRole: 'content',
+			},
+		},
+		edit,
+		save,
+	} );
+}

blocks/draft/src/save.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { content } = attributes;
+
+	return (
+		<section { ...useBlockProps.save() }>
+			<RichText.Content multiline value={ content } />
+		</section>
+	);
+}

blocks/draft/style.scss

@@ -0,0 +1,10 @@
+.entry-content > .wp-block-jetpack-draft__label {
+	text-align: right;
+	font-size: 0.8rem;
+	margin-bottom: 4px;
+}
+.entry-content > .wp-block-jetpack-draft {
+	border: 1px dashed #cccccc;
+	padding: 8px;
+	margin-top: 0px;
+}

bundler/bundles/draft.json

@@ -0,0 +1,7 @@
+{
+	"blocks": [ "draft" ],
+	"version": "1.0.0",
+	"name": "Draft block",
+	"description": "A block for drafting post or page content, which can later be converted to individual blocks for more complex formatting.",
+	"resource": "jetpack-draft"
+}

editor.scss

@@ -6,3 +6,4 @@
 @import './blocks/starscape/editor.scss';
 @import './blocks/waves/editor.scss';
 @import './blocks/book/editor.scss';
+@import './blocks/draft/editor.scss';

src/index.js

@@ -29,6 +29,7 @@ import * as motionBackgroundBlock from '../blocks/motion-background/src';
 import * as starscapeBlock from '../blocks/starscape/src';
 import * as wavesBlock from '../blocks/waves/src';
 import * as bookBlock from '../blocks/book/src';
+import * as draftBlock from '../blocks/draft/src';
 
 // Instantiate the blocks, adding them to our block category
 bauhausCentenaryBlock.registerBlock();
@@ -38,3 +39,4 @@ motionBackgroundBlock.registerBlock();
 starscapeBlock.registerBlock();
 wavesBlock.registerBlock();
 bookBlock.registerBlock();
+draftBlock.registerBlock();

style.scss

@@ -6,3 +6,4 @@
 @import './blocks/starscape/style.scss';
 @import './blocks/waves/style.scss';
 @import './blocks/book/style.scss';
+@import './blocks/draft/style.scss';