-
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.
Move to separate rawHandling transformer
- Loading branch information
Showing
3 changed files
with
77 additions
and
45 deletions.
There are no files selected for viewing
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,74 @@ | ||
| /** | ||
| * Browser dependencies | ||
| */ | ||
| const { COMMENT_NODE } = window.Node; | ||
|
|
||
| /** | ||
| * Looks for `<!--more-->` comments, as well as the `<!--more Some text-->` | ||
| * variant and its `<!--noteaser-->` companion, and replaces them with a custom | ||
| * element representing a future block. | ||
| * | ||
| * The custom element is a way to bypass the rest of the `raw-handling` | ||
| * transforms, which would eliminate other kinds of node with which to carry | ||
| * `<!--more-->`'s data: nodes with `data` attributes, empty paragraphs, etc. | ||
| * | ||
| * The custom element is then expected to be recognized by any registered | ||
| * block's `raw` transform. | ||
| * | ||
| * @param {Node} node The node to be processed. | ||
| * @return {void} | ||
| */ | ||
| export default function( node ) { | ||
| if ( | ||
| node.nodeType !== COMMENT_NODE || | ||
| node.nodeValue.indexOf( 'more' ) !== 0 | ||
| ) { | ||
| // We don't specificially look for `noteaser`, meaning that if one is | ||
| // found on its own (and not adjacent to `more`), it will be lost. | ||
| return; | ||
| } | ||
|
|
||
| // Grab any custom text in the comment | ||
| const customText = node.nodeValue.slice( 4 ).trim(); | ||
|
|
||
| // When a `<!--more-->` comment is found, we need to look for any | ||
| // `<!--noteaser-->` sibling, but it may not be a direct sibling | ||
| // (whitespace typically lies in between) | ||
| let sibling = node; | ||
| let noTeaser = false; | ||
| while ( ( sibling = sibling.nextSibling ) ) { | ||
| if ( | ||
| sibling.nodeType === COMMENT_NODE && | ||
| sibling.nodeValue === 'noteaser' | ||
| ) { | ||
| noTeaser = true; | ||
| sibling.parentNode.removeChild( sibling ); | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| // Conjure up a custom More element | ||
| const more = createMore( customText, noTeaser ); | ||
|
|
||
| // Find the first ancestor to which the More element can be appended; | ||
| // appending to the closer P parents fails | ||
| let parent = node.parentNode; | ||
| while ( parent.nodeName.toLowerCase() === 'p' && parent.parentNode ) { | ||
| parent = parent.parentNode; | ||
| } | ||
| parent.appendChild( more ); | ||
| node.parentNode.removeChild( node ); | ||
| } | ||
|
|
||
| function createMore( customText, noTeaser ) { | ||
| const node = document.createElement( 'wp-block' ); | ||
| node.dataset.block = 'core/more'; | ||
| if ( customText ) { | ||
| node.dataset.customText = customText; | ||
| } | ||
| if ( noTeaser ) { | ||
| // "Boolean" data attribute | ||
| node.dataset.noTeaser = ''; | ||
| } | ||
| return node; | ||
| } |