Блок Гутенберга: как добавить RichText в неупорядоченный список - PullRequest
Новая
       13

Блок Гутенберга: как добавить RichText в неупорядоченный список

0 голосов
/ 29 сентября 2018

Я пытаюсь создать пользовательский блок Гутенберга, который будет иметь неупорядоченный список нескольких компонентов RichText.

Конечный результат будет выглядеть примерно так:

<ul> <li> <span class="class-one">First item</span> <span class="class-two">Second item</span> </li> </ul>

Я играл с примером карты рецептов из этого WordPress-урока

Я могу видеть, как компонент RichText может быть многострочным, чтобы получить «li» в качестве тега для получения.список, но я не знаю, как создать мультилинию с суб-компонентами Richtext.

Вот что у меня есть: 

( function( blocks, editor, i18n, element, components, _ ) {
var el = element.createElement;
var RichText = editor.RichText;
var MediaUpload = editor.MediaUpload;

i18n.setLocaleData( window.gutenberg_examples_05.localeData, 'gutenberg-examples' );

blocks.registerBlockType( 'gutenberg-examples/example-05-recipe-card', {
    title: i18n.__( 'Example: Recipe Card', 'gutenberg-examples' ),
    icon: 'index-card',
    category: 'layout',
    attributes: {
        ingredients: {
            type: 'array',
            source: 'children',
            selector: '.ingredients',
        },
        ingredientname: {
            type: 'array',
            source: 'children',
            selector: '.ingredientname',
        },          
    },
    edit: function( props ) {
        var attributes = props.attributes;

        return (
            el( 'div', { className: props.className },
                el( 'h3', {}, i18n.__( 'Ingredients', 'gutenberg-examples' ) ),
                el( RichText, {
                    tagName: 'ul',
                    multiline: 'li',
                    value: attributes.ingredients,
                    className: 'ingredients'
                },
                    el( RichText, {
                        tagName: 'span',
                        placeholder: i18n.__( 'ingredient name', 'gutenberg-examples' ),
                        value: attributes.ingredientname,
                        onChange: function( value ) {
                            props.setAttributes( { ingredientname: value } );
                        },
                    } ),
                )
            )
        );
    },
    save: function( props ) {
        var attributes = props.attributes;

        return (
            el( 'div', { className: props.className },
                el( 'h3', {}, i18n.__( 'Ingredients', 'gutenberg-examples' ) ),
                el( RichText.Content, {
                    tagName: 'ul', 
                    className: 'ingredients'
                },
                    el( RichText.Content, {
                        tagName: 'span',
                        className: 'ingredient-name',
                        value: attributes.ingredientname
                    }),
                ),
            )
        );
    },
} );

} )

Я думаю, проблема в том, что первый RichText долженпереключиться на что-то другое, но я не знаю, что изменить, чтобы это все равно показало бы все в виде списка.Я попытался удалить первый RichText и установить для него значение «ul» с тегом «li», а затем редактор отображает второй RichText, но не отображает его в виде списка.

Любая помощь в значительной степениоценили.

1 Ответ

0 голосов
/ 29 сентября 2018

Насколько я знаю, нет такой опции, как " Multiline " для расширения RichText на подкомпоненты.На данный момент вы можете объявить два дополнительных атрибута в начале блока, а затем в функции редактирования вызвать RichText.Так что это - 

<ul>
    <li>
        <span class="class-one">First item</span>
        <span class="class-two">Second item</span>
    </li>
 </ul>

становится - 

<ul>

  <RichText
   fontSize={textSize}
   tagName="li"
   placeholder={ __( 'Nature', 'text-domain' ) }
   value={ imgOneTxt }
   onChange={  (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
   style={{ color: textColor, fontSize: textSize }}
   isSelected={ isSelected }
   keepPlaceholderOnFocus
   />

  <RichText
   fontSize={textSize}
   tagName="li"
   placeholder={ __( 'Nature', 'text-domain' ) }
   value={ imgOneTxt }
   onChange={  (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
   style={{ color: textColor, fontSize: textSize }}
   isSelected={ isSelected }
   keepPlaceholderOnFocus
   />

</ul>

Я знаю, это не следует правилу СУХОЙ, но это то, к чему мы сейчас стремимся с точки зрения разработки Гутенберга.Я надеюсь, что это помогает

...