-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update the TinyMCE per Block prototype UI to match the Prototype UI s…
…tyle. Also make it keyboard friendly (#136) * update the TinyMCE per Block prototype UI to match the Prototype UI style * Adding heading block * Adding a paragraph block and moving to React - preact has some state updating bugs * Allowing removing/merging components using backspace * Handling navigation using arrow keys * Adding a simple quote block
- Loading branch information
1 parent
b1d9b8f
commit 01f2c86
Showing
37 changed files
with
2,991 additions
and
2,171 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| .heading-block__form { | ||
| textarea, .textarea-mirror { | ||
| width: 100%; | ||
| border: none; | ||
| font-family: Merriweather, Georgia, "Times New Roman", Times, serif; | ||
| resize: none; | ||
| color: inherit; | ||
| font-size: inherit; | ||
| font-weight: bold; | ||
| overflow: hidden; | ||
|
|
||
| &:focus { | ||
| outline: 0; | ||
| } | ||
| } | ||
|
|
||
| &.h1 textarea, &.h1 .textarea-mirror { | ||
| font-size: 34px; | ||
| } | ||
|
|
||
| &.h2 textarea, &.h2 .textarea-mirror { | ||
| font-size: 28px; | ||
| } | ||
|
|
||
| &.h3 textarea, &.h3 .textarea-mirror { | ||
| font-size: 20px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { createElement, Component } from 'wp-elements'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { serialize } from 'serializers/block'; | ||
| import { EnhancedInputComponent } from 'wp-blocks'; | ||
|
|
||
| export default class HeadingBlockForm extends Component { | ||
| bindInput = ( ref ) => { | ||
| this.input = ref; | ||
| } | ||
|
|
||
| focus = ( position ) => { | ||
| this.input.focus( position ); | ||
| } | ||
|
|
||
| merge = ( block, index ) => { | ||
| const acceptedBlockTypes = [ 'quote', 'paragraph', 'heading' ]; | ||
| if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) { | ||
| return; | ||
| } | ||
|
|
||
| const { block: { children }, focus, remove, setChildren } = this.props; | ||
| const value = serialize( children ); | ||
| setChildren( children.concat( block.children ) ); | ||
| remove( index ); | ||
| focus( value.length ); | ||
| } | ||
|
|
||
| render() { | ||
| const { block, setChildren, appendBlock, mergeWithPrevious, remove, moveUp, moveDown } = this.props; | ||
| const { children } = block; | ||
| const value = serialize( children ); | ||
| const onChangeContent = ( event ) => { | ||
| setChildren( [ { | ||
| type: 'Text', | ||
| value: event.target.value || ' ' // grammar bug | ||
| } ] ); | ||
| }; | ||
| const splitValue = ( left, right ) => { | ||
| setChildren( [ { | ||
| type: 'Text', | ||
| value: left || ' ' // grammar bug | ||
| } ] ); | ||
| if ( right ) { | ||
| appendBlock( { | ||
| ...block, | ||
| children: [ | ||
| { | ||
| type: 'Text', | ||
| value: right | ||
| } | ||
| ] | ||
| } ); | ||
| } else { | ||
| appendBlock(); | ||
| } | ||
| }; | ||
| const removePrevious = () => { | ||
| if ( value && value !== ' ' ) { | ||
| mergeWithPrevious(); | ||
| } else { | ||
| remove(); | ||
| } | ||
| }; | ||
| const className = block.attrs.size ? block.attrs.size : 'h2'; | ||
|
|
||
| return ( | ||
| <div className={ `heading-block__form ${ className }` }> | ||
| <EnhancedInputComponent ref={ this.bindInput } value={ value } | ||
| onChange={ onChangeContent } | ||
| splitValue={ splitValue } | ||
| removePrevious={ removePrevious } | ||
| moveUp={ moveUp } | ||
| moveDown={ moveDown } | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { registerBlock } from 'wp-blocks'; | ||
| import { | ||
| EditorHeadingIcon, | ||
| EditorHeading1Icon, | ||
| EditorHeading2Icon, | ||
| EditorHeading3Icon | ||
| } from 'dashicons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import form from './form'; | ||
|
|
||
| registerBlock( 'heading', { | ||
| title: 'Heading', | ||
| form: form, | ||
| icon: EditorHeadingIcon, | ||
| controls: [ | ||
| { | ||
| label: 'H1', | ||
| icon: EditorHeading1Icon, | ||
| isSelected: ( { attrs } ) => 'h1' === attrs.size, | ||
| onClick( { setAttributes } ) { | ||
| setAttributes( { | ||
| size: 'h1' | ||
| } ); | ||
| } | ||
| }, | ||
| { | ||
| label: 'H2', | ||
| icon: EditorHeading2Icon, | ||
| isSelected: ( { attrs } ) => ! attrs.size || 'h2' === attrs.size, | ||
| onClick( { setAttributes } ) { | ||
| setAttributes( { | ||
| size: 'h2' | ||
| } ); | ||
| } | ||
| }, | ||
| { | ||
| label: 'H3', | ||
| icon: EditorHeading3Icon, | ||
| isSelected: ( { attrs } ) => 'h3' === attrs.size, | ||
| onClick( { setAttributes } ) { | ||
| setAttributes( { | ||
| size: 'h3' | ||
| } ); | ||
| } | ||
| } | ||
| ] | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,34 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { createElement } from 'wp-elements'; | ||
| import { createElement, Component } from 'wp-elements'; | ||
| import { find } from 'lodash'; | ||
|
|
||
| export default function ImageBlockForm( { children } ) { | ||
| const image = find( children, ( { name } ) => 'img' === name ); | ||
| if ( ! image ) { | ||
| return null; | ||
| export default class ImageBlockForm extends Component { | ||
|
|
||
| merge() { | ||
| this.props.remove(); | ||
| } | ||
|
|
||
| focus( position ) { | ||
| if ( position !== 0 ) { | ||
| this.props.moveUp(); | ||
| } else { | ||
| this.props.moveDown(); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <img | ||
| src={ image.attrs.src } | ||
| className="image-block__display" /> | ||
| ); | ||
| render() { | ||
| const { block: { children } } = this.props; | ||
| const image = find( children, ( { name } ) => 'img' === name ); | ||
| if ( ! image ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <img | ||
| src={ image.attrs.src } | ||
| className="image-block__display" /> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| .paragraph-block__form textarea, .paragraph-block__form .textarea-mirror { | ||
| width: 100%; | ||
| border: none; | ||
| font: inherit; | ||
| font-family: "Merriweather", serif; | ||
| font-size: 16px; | ||
| color: inherit; | ||
| font-weight: 300; | ||
| resize: none; | ||
|
|
||
| &:focus { | ||
| outline: 0; | ||
| } | ||
| } |
Oops, something went wrong.