From 4b2831c740eaeefa272d0e9384305f6ed9c8c869 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 15 Jun 2021 13:19:05 +1200 Subject: [PATCH] Initial commit of draft block --- blocks/draft/editor.scss | 10 ++++ blocks/draft/index.php | 18 +++++++ blocks/draft/readme.md | 19 +++++++ blocks/draft/src/edit.js | 74 ++++++++++++++++++++++++++++ blocks/draft/src/finalise-content.js | 29 +++++++++++ blocks/draft/src/index.js | 46 +++++++++++++++++ blocks/draft/src/save.js | 14 ++++++ blocks/draft/style.scss | 10 ++++ bundler/bundles/draft.json | 7 +++ editor.scss | 1 + src/index.js | 2 + style.scss | 1 + 12 files changed, 231 insertions(+) create mode 100644 blocks/draft/editor.scss create mode 100644 blocks/draft/index.php create mode 100644 blocks/draft/readme.md create mode 100644 blocks/draft/src/edit.js create mode 100644 blocks/draft/src/finalise-content.js create mode 100644 blocks/draft/src/index.js create mode 100644 blocks/draft/src/save.js create mode 100644 blocks/draft/style.scss create mode 100644 bundler/bundles/draft.json diff --git a/blocks/draft/editor.scss b/blocks/draft/editor.scss new file mode 100644 index 00000000..f15c49c0 --- /dev/null +++ b/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; + } +} diff --git a/blocks/draft/index.php b/blocks/draft/index.php new file mode 100644 index 00000000..d32a37aa --- /dev/null +++ b/blocks/draft/index.php @@ -0,0 +1,18 @@ + '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 = '
' . __( 'Draft content: only visible to editors' ) . '
'; + return $draft_label . $content; +} diff --git a/blocks/draft/readme.md b/blocks/draft/readme.md new file mode 100644 index 00000000..622d1315 --- /dev/null +++ b/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. diff --git a/blocks/draft/src/edit.js b/blocks/draft/src/edit.js new file mode 100644 index 00000000..67ac4316 --- /dev/null +++ b/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 ( + <> + + + +
+
+ { __( 'Draft content: only visible to editors' ) } +
+ + setAttributes( { + content: nextValue, + } ) + } + onMerge={ mergeBlocks } + aria-label={ __( 'Start drafting' ) } + placeholder={ __( 'Start drafting' ) } + onReplace={ onReplace } + __unstableOnSplitMiddle={ () => + createBlock( 'core/paragraph' ) + } + /> +
+ + ); +} diff --git a/blocks/draft/src/finalise-content.js b/blocks/draft/src/finalise-content.js new file mode 100644 index 00000000..afa4e5fc --- /dev/null +++ b/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 ( + replaceBlocks(block.clientId, rawHandler({ HTML: content }))} + label={__('Convert the content to individual blocks for final formatting')} + > + {__('Finalise content')} + + ); +}; + +export default FinaliseContentButton; diff --git a/blocks/draft/src/index.js b/blocks/draft/src/index.js new file mode 100644 index 00000000..02789828 --- /dev/null +++ b/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, + } ); +} diff --git a/blocks/draft/src/save.js b/blocks/draft/src/save.js new file mode 100644 index 00000000..b6d5a7d6 --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/blocks/draft/style.scss b/blocks/draft/style.scss new file mode 100644 index 00000000..2223409a --- /dev/null +++ b/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; +} diff --git a/bundler/bundles/draft.json b/bundler/bundles/draft.json new file mode 100644 index 00000000..27a6d300 --- /dev/null +++ b/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" +} diff --git a/editor.scss b/editor.scss index 64623338..3ee38fc3 100644 --- a/editor.scss +++ b/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'; diff --git a/src/index.js b/src/index.js index c9317974..0548e401 100644 --- a/src/index.js +++ b/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(); diff --git a/style.scss b/style.scss index 1587de4a..502a5c65 100644 --- a/style.scss +++ b/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';