Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Editor: Experiment with dynamic content as tokens #23268

Closed
wants to merge 2 commits into from

Conversation

gziolo
Copy link
Member

@gziolo gziolo commented Jun 18, 2020

Description

Related: #22983.

It's a growing pain in the block editor that we can't embed dynamic data like translations or locally formatted dates. This PR is just an experiment exploring how that interaction could look like using the existing concept of InnerBlocks. I don't think it's something that fits for the final implementation because at the moment one block can control only one InnerBlocks component.

The idea I tried looks as follows:

  1. I create BlockToken component that wraps InnerBlock to use in edit method.
  2. I created a new block type Token that:
    1. Allows editing static content using RichText component.
    2. Uses render_callback to dynamically apply translations to the static content.
    3. Uses ServerSideRender component to dynamically preview content in the editor when the block is not selected.

I plan to close this PR at some point. I simply couldn't resist to give it a spin :)

Screenshots

I'm using Polish local for the purpose of this demo to present that translations are applied.

token-block

Token block can have some attributes, I integrated a custom class name:
Screen Shot 2020-06-18 at 11 31 54

The block toolbar renders in the parent, it has some unnecessary options though that we would have to disable:

Screen Shot 2020-06-18 at 11 32 38

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@gziolo gziolo added [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible [Status] In Progress Tracking issues with work in progress [Package] Block editor /packages/block-editor labels Jun 18, 2020
@gziolo gziolo requested review from mcsf and youknowriad June 18, 2020 09:22
@gziolo gziolo self-assigned this Jun 18, 2020
@gziolo gziolo requested a review from mtias June 18, 2020 09:28
@github-actions
Copy link

Size Change: +167 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/block-editor/index.js 106 kB +61 B (0%)
build/block-library/index.js 130 kB +104 B (0%)
build/components/index.js 196 kB -2 B (0%)
build/edit-navigation/index.js 8.26 kB +1 B
build/edit-post/index.js 303 kB +2 B (0%)
build/editor/index.js 44.8 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.26 kB 0 B
build/block-directory/style-rtl.css 937 B 0 B
build/block-directory/style.css 937 B 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/editor-rtl.css 7.83 kB 0 B
build/block-library/editor.css 7.83 kB 0 B
build/block-library/style-rtl.css 8 kB 0 B
build/block-library/style.css 8.01 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/style-rtl.css 15.9 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.6 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.17 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/style-rtl.css 5.5 kB 0 B
build/edit-post/style.css 5.5 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.33 kB 0 B
build/edit-widgets/style-rtl.css 2.43 kB 0 B
build/edit-widgets/style.css 2.43 kB 0 B
build/editor/editor-styles-rtl.css 468 B 0 B
build/editor/editor-styles.css 469 B 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.8 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 542 B 0 B
build/format-library/style.css 543 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 446 B 0 B
build/list-reusable-blocks/style.css 447 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 662 B 0 B
build/nux/style.css 657 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 788 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@gziolo
Copy link
Member Author

gziolo commented Jul 8, 2020

This approach doesn't look very promising so I will close this PR. It was nice to go through the process to gather some feedback and see better what kind of challenges we are facing here.

I had a quite interesting discussion with @mtias about an alternative approach that we could investigate. I wanted to quickly summarize the idea. There is this registerFormatType API method developed by @ellatrix. I was wondering if we could implement tokens based on this concept using <data> HTML tag.

The HTML <data> element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used.

Example usage would be:

<data value="token/translation">Cherry Tomato</data>

On the server, there would be a logic that parses the output generated and runs filters registered for data tokens:

function block_content_token_translation( $content, $value ) {
    if ( $value !== 'token/translation' ) {
        return $content;
    }
    return __( $content );
}
add_filter( 'block_content_token', 'block_content_token_translation' );

UI part would work very similar to how other RichText formatting controls work as of today, closer to the concept of annotations though.

@gziolo gziolo closed this Jul 8, 2020
@gziolo gziolo deleted the try/block-token branch July 8, 2020 10:31
@mcsf
Copy link
Contributor

mcsf commented Jul 9, 2020

This approach doesn't look very promising so I will close this PR. It was nice to go through the process to gather some feedback and see better what kind of challenges we are facing here.

I had a quite interesting discussion […] I wanted to quickly summarize the idea.

Thanks for sharing. This is an interesting idea worth looking into.

@mtias
Copy link
Member

mtias commented Jul 10, 2020

It'd be nice to move this last comment into an issue so that it doesn't get lost.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants