From b82c7d16c4245a02ca50e3f2b123231bc095b032 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Sat, 1 Jul 2017 15:14:45 +0200 Subject: [PATCH 1/7] First pass at a chat block --- blocks/library/chat/block.scss | 48 ++++++++++++++++ blocks/library/chat/chat-transcript.js | 47 +++++++++++++++ blocks/library/chat/index.js | 79 ++++++++++++++++++++++++++ blocks/library/chat/style.scss | 20 +++++++ blocks/library/index.js | 1 + 5 files changed, 195 insertions(+) create mode 100644 blocks/library/chat/block.scss create mode 100644 blocks/library/chat/chat-transcript.js create mode 100644 blocks/library/chat/index.js create mode 100644 blocks/library/chat/style.scss diff --git a/blocks/library/chat/block.scss b/blocks/library/chat/block.scss new file mode 100644 index 0000000000000..165980af9fae4 --- /dev/null +++ b/blocks/library/chat/block.scss @@ -0,0 +1,48 @@ +.wp-block-chat { + font-family: $editor-html-font; + + > p { + margin: 0; + + &:first-child .chat-author { + margin-top: 0; + } + } + + .chat-author { + display: block; + margin-top: 1em; + color: $blue-wordpress; + } + + .chat-message { + margin-left: 1em; + } + + &.is-compact { + .chat-author { + display: inline; + margin: 0 .5em 0 0; + } + + .chat-message { + margin-left: 0; + } + } + + .chat-author-1 .chat-author { + color: $alert-yellow; + } + + .chat-author-2 .chat-author { + color: $alert-red; + } + + .chat-author-3 .chat-author { + color: $alert-green; + } + + .chat-author-4 .chat-author { + color: $dark-gray-800; + } +} diff --git a/blocks/library/chat/chat-transcript.js b/blocks/library/chat/chat-transcript.js new file mode 100644 index 0000000000000..a6fbb24a7d2e3 --- /dev/null +++ b/blocks/library/chat/chat-transcript.js @@ -0,0 +1,47 @@ +/** + * External dependencies + */ +import { uniq } from 'lodash'; + +export default function ChatTranscript( props ) { + const { value, compact } = props; + + let lastAuthor; + let authors = []; + + function getAuthor( author ) { + author = author.trim(); + authors.push( author ); + + authors = uniq( authors ); + + return authors.indexOf( author ) + 1; + } + + return ( +
+ {value && value.split( "\n" ).map( ( line, index ) => { + line = line.trim(); + + let message = line; + let author; + + if ( line.includes( ':' ) ) { + // Includes an author. + const msg = line.split( ':' ); + author = msg.shift().trim(); + message = msg.join( ':' ).trim(); + + lastAuthor = getAuthor( author ); + } + + return ( + message &&

+ { author && { ` ${ author }: ` } } + { message } +

+ ); + } ) } +
+ ); +} diff --git a/blocks/library/chat/index.js b/blocks/library/chat/index.js new file mode 100644 index 0000000000000..c23db48ece325 --- /dev/null +++ b/blocks/library/chat/index.js @@ -0,0 +1,79 @@ +/** + * WordPress dependencies + */ +import { Placeholder } from 'components'; +import { __ } from 'i18n'; + +/** + * External dependencies + */ +import TextareaAutosize from 'react-autosize-textarea'; + +/** + * Internal dependencies + */ +import './block.scss'; +import './style.scss'; +import { registerBlockType, query } from '../../api'; +import InspectorControls from '../../inspector-controls'; +import ToggleControl from '../../inspector-controls/toggle-control'; +import ChatTranscript from './chat-transcript'; + +const { html } = query; + +registerBlockType( 'core/chat', { + title: __( 'Chat' ), + + icon: 'format-chat', + + category: 'formatting', + + attributes: { + content: html(), + }, + + defaultAttributes: { + compact: false, + }, + + edit( { attributes, setAttributes, focus, setFocus, className } ) { + const { compact, content } = attributes; + + const toggleCompact = () => setAttributes( { compact: ! compact } ); + + return [ + focus && ( + + + + ), + focus && ( + + setAttributes( { content: event.target.value } ) } + placeholder={ __( 'Paste transcript here…' ) } + /> + + ), + ! focus && ( + + ), + ]; + }, + + save( { attributes } ) { + const { compact, content } = attributes; + + return ; + }, +} ); diff --git a/blocks/library/chat/style.scss b/blocks/library/chat/style.scss new file mode 100644 index 0000000000000..97e52cd42aa70 --- /dev/null +++ b/blocks/library/chat/style.scss @@ -0,0 +1,20 @@ +.editor-visual-editor__block[data-type="core/chat"] { + .components-placeholder__fieldset { + max-width: none; + } + + textarea { + box-shadow: none; + background: $white; + font-family: $editor-html-font; + font-size: $text-editor-font-size; + color: $dark-gray-800; + border: 1px solid $light-gray-500; + border-radius: 4px; + margin: 0; + overflow-x: auto; + width: 100%; + min-height: 10em; + text-align: left; + } +} diff --git a/blocks/library/index.js b/blocks/library/index.js index 93a71f0cc3acc..a45d643bb3ef0 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -15,3 +15,4 @@ import './html'; import './freeform'; import './latest-posts'; import './cover-image'; +import './chat'; From a97119a2d49d0e149bd0e63cbf95e6c372d23330 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Sat, 1 Jul 2017 15:40:32 +0200 Subject: [PATCH 2/7] Add some test fixtures --- blocks/library/chat/chat-transcript.js | 2 +- blocks/test/fixtures/core__chat.html | 13 +++++++++++++ blocks/test/fixtures/core__chat.json | 10 ++++++++++ blocks/test/fixtures/core__chat.parsed.json | 13 +++++++++++++ blocks/test/fixtures/core__chat.serialized.html | 15 +++++++++++++++ 5 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 blocks/test/fixtures/core__chat.html create mode 100644 blocks/test/fixtures/core__chat.json create mode 100644 blocks/test/fixtures/core__chat.parsed.json create mode 100644 blocks/test/fixtures/core__chat.serialized.html diff --git a/blocks/library/chat/chat-transcript.js b/blocks/library/chat/chat-transcript.js index a6fbb24a7d2e3..7dd42de4138bc 100644 --- a/blocks/library/chat/chat-transcript.js +++ b/blocks/library/chat/chat-transcript.js @@ -19,7 +19,7 @@ export default function ChatTranscript( props ) { } return ( -
+
{value && value.split( "\n" ).map( ( line, index ) => { line = line.trim(); diff --git a/blocks/test/fixtures/core__chat.html b/blocks/test/fixtures/core__chat.html new file mode 100644 index 0000000000000..aef0439d8ab23 --- /dev/null +++ b/blocks/test/fixtures/core__chat.html @@ -0,0 +1,13 @@ + +Pascal: Alexa, open the window +Alexa: I'm not quite sure how to help you with +Pascal: Siri, tell me a joke +Siri: Pascal, get Siri-ous. Ha ha! +Pascal: OK, Google. Now it's your turn! +Google Home: Alexa, tell Siri to tell Pascal a better joke. +Pascal: Ugh! +Okay, that's enough. No internet for you anymore! +Alexa: πŸ’” +Google Home: πŸ˜” +Siri: πŸ“΄ + diff --git a/blocks/test/fixtures/core__chat.json b/blocks/test/fixtures/core__chat.json new file mode 100644 index 0000000000000..f283196f235a9 --- /dev/null +++ b/blocks/test/fixtures/core__chat.json @@ -0,0 +1,10 @@ +[ + { + "uid": "_uid_0", + "name": "core/chat", + "attributes": { + "compact": false, + "content": "Pascal: Alexa, open the window\nAlexa: I'm not quite sure how to help you with\nPascal: Siri, tell me a joke\nSiri: Pascal, get Siri-ous. Ha ha!\nPascal: OK, Google. Now it's your turn!\nGoogle Home: Alexa, tell Siri to tell Pascal a better joke.\nPascal: Ugh!\nOkay, that's enough. No internet for you anymore!\nAlexa: πŸ’”\nGoogle Home: πŸ˜”\nSiri: πŸ“΄" + } + } +] diff --git a/blocks/test/fixtures/core__chat.parsed.json b/blocks/test/fixtures/core__chat.parsed.json new file mode 100644 index 0000000000000..5b05da21b3321 --- /dev/null +++ b/blocks/test/fixtures/core__chat.parsed.json @@ -0,0 +1,13 @@ +[ + { + "blockName": "core/chat", + "attrs": { + "compact": false + }, + "rawContent": "\nPascal: Alexa, open the window\nAlexa: I'm not quite sure how to help you with\nPascal: Siri, tell me a joke\nSiri: Pascal, get Siri-ous. Ha ha!\nPascal: OK, Google. Now it's your turn!\nGoogle Home: Alexa, tell Siri to tell Pascal a better joke.\nPascal: Ugh!\nOkay, that's enough. No internet for you anymore!\nAlexa: πŸ’”\nGoogle Home: πŸ˜”\nSiri: πŸ“΄\n" + }, + { + "attrs": {}, + "rawContent": "\n" + } +] diff --git a/blocks/test/fixtures/core__chat.serialized.html b/blocks/test/fixtures/core__chat.serialized.html new file mode 100644 index 0000000000000..1e48052c81076 --- /dev/null +++ b/blocks/test/fixtures/core__chat.serialized.html @@ -0,0 +1,15 @@ + +
+

Pascal: Alexa, open the window

+

Alexa: I'm not quite sure how to help you with

+

Pascal: Siri, tell me a joke

+

Siri: Pascal, get Siri-ous. Ha ha!

+

Pascal: OK, Google. Now it's your turn!

+

Google Home: Alexa, tell Siri to tell Pascal a better joke.

+

Pascal: Ugh!

+

Okay, that's enough. No internet for you anymore!

+

Alexa: πŸ’”

+

Google Home: πŸ˜”

+

Siri: πŸ“΄

+
+ From 4d91aabcbb43a14834356829c0ff158eedbddbfd Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Sat, 1 Jul 2017 19:33:36 +0200 Subject: [PATCH 3/7] Use single quotes only --- blocks/library/chat/chat-transcript.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/chat/chat-transcript.js b/blocks/library/chat/chat-transcript.js index 7dd42de4138bc..aadf98db6f434 100644 --- a/blocks/library/chat/chat-transcript.js +++ b/blocks/library/chat/chat-transcript.js @@ -20,7 +20,7 @@ export default function ChatTranscript( props ) { return (
- {value && value.split( "\n" ).map( ( line, index ) => { + {value && value.split( '\n' ).map( ( line, index ) => { line = line.trim(); let message = line; From 0f50e90fce2052752028cc2f787713fcf6e33b03 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 3 Jul 2017 11:27:27 +0200 Subject: [PATCH 4/7] Simplify deconstruct --- blocks/library/chat/chat-transcript.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/blocks/library/chat/chat-transcript.js b/blocks/library/chat/chat-transcript.js index aadf98db6f434..2577dad3b36ce 100644 --- a/blocks/library/chat/chat-transcript.js +++ b/blocks/library/chat/chat-transcript.js @@ -3,9 +3,7 @@ */ import { uniq } from 'lodash'; -export default function ChatTranscript( props ) { - const { value, compact } = props; - +export default function ChatTranscript( { value, compact } ) { let lastAuthor; let authors = []; From 326aa13d499b97b39dc85e2ebaa8972e6b0ef80b Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 3 Jul 2017 11:56:45 +0200 Subject: [PATCH 5/7] Move external dependencies up --- blocks/library/chat/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/blocks/library/chat/index.js b/blocks/library/chat/index.js index c23db48ece325..9ac509d908991 100644 --- a/blocks/library/chat/index.js +++ b/blocks/library/chat/index.js @@ -1,13 +1,13 @@ /** - * WordPress dependencies + * External dependencies */ -import { Placeholder } from 'components'; -import { __ } from 'i18n'; +import TextareaAutosize from 'react-autosize-textarea'; /** - * External dependencies + * WordPress dependencies */ -import TextareaAutosize from 'react-autosize-textarea'; +import { Placeholder } from 'components'; +import { __ } from 'i18n'; /** * Internal dependencies From 0d3a51e2bac3833aaf922cf10d17adf591c2b7cc Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 3 Jul 2017 13:28:56 +0200 Subject: [PATCH 6/7] Simplify CSS selector --- blocks/library/chat/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/chat/style.scss b/blocks/library/chat/style.scss index 97e52cd42aa70..4dc8672ff029a 100644 --- a/blocks/library/chat/style.scss +++ b/blocks/library/chat/style.scss @@ -1,4 +1,4 @@ -.editor-visual-editor__block[data-type="core/chat"] { +.wp-block-chat { .components-placeholder__fieldset { max-width: none; } From 08874608e5009e324cdb71fd8fe2490af594f858 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 3 Jul 2017 13:29:11 +0200 Subject: [PATCH 7/7] Move logic to a normalizeTranscript function --- blocks/library/chat/chat-transcript.js | 74 +++++++++++++++++--------- blocks/library/chat/index.js | 6 ++- 2 files changed, 54 insertions(+), 26 deletions(-) diff --git a/blocks/library/chat/chat-transcript.js b/blocks/library/chat/chat-transcript.js index 2577dad3b36ce..db19f96b0a6b8 100644 --- a/blocks/library/chat/chat-transcript.js +++ b/blocks/library/chat/chat-transcript.js @@ -3,40 +3,64 @@ */ import { uniq } from 'lodash'; -export default function ChatTranscript( { value, compact } ) { - let lastAuthor; - let authors = []; - - function getAuthor( author ) { - author = author.trim(); - authors.push( author ); +/** + * WordPress dependencies + */ +import classnames from 'classnames'; - authors = uniq( authors ); +export function normalizeTranscript( value ) { + const transcript = { + authors: [], + messages: [], + }; - return authors.indexOf( author ) + 1; + if ( ! value ) { + return transcript; } - return ( -
- {value && value.split( '\n' ).map( ( line, index ) => { - line = line.trim(); + let authorIndex = -1; + + value.split( '\n' ).map( ( line ) => { + line = line.trim(); + + const messageParts = line.split( ':' ); + let message; - let message = line; - let author; + if ( 1 === messageParts.length ) { + message = messageParts.shift(); + } else { + const author = messageParts.shift().trim(); + message = messageParts.join( ':' ).trim(); - if ( line.includes( ':' ) ) { - // Includes an author. - const msg = line.split( ':' ); - author = msg.shift().trim(); - message = msg.join( ':' ).trim(); + transcript.authors.push( author ); + transcript.authors = uniq( transcript.authors ); + authorIndex = transcript.authors.indexOf( author ); + } - lastAuthor = getAuthor( author ); - } + transcript.messages.push( { + message: message, + authorIndex: authorIndex, + } ); + } ); + + return transcript; +} + +export default function ChatTranscript( { value, compact, className } ) { + // Normalize data + const transcript = normalizeTranscript( value ); + + const classes = classnames( className, { 'is-compact': compact } ); + + return ( +
+ {value && transcript.messages.map( ( entry, index ) => { + const author = -1 !== entry.authorIndex ? transcript.authors[ entry.authorIndex ] : undefined; return ( - message &&

- { author && { ` ${ author }: ` } } - { message } + entry.message &&

+ { author && { `${ author }:` } } + { entry.message }

); } ) } diff --git a/blocks/library/chat/index.js b/blocks/library/chat/index.js index 9ac509d908991..2d2538e0d0674 100644 --- a/blocks/library/chat/index.js +++ b/blocks/library/chat/index.js @@ -66,7 +66,11 @@ registerBlockType( 'core/chat', { ), ! focus && ( - + ), ]; },