Разработка блока WordPress Gutenberg - Как создать пользовательский компонент высшего порядка и собирать значения метабоксов в качестве подпорок внутри него

Кажется, мне трудно найти подходящий пример для развития Гутенберга.

Мои вопросы:

  • Можно ли написать свой собственный компонент высшего порядка в Гутенберге?
  • У меня есть блок с metaboxes, Если выше верно, могу ли я получить доступ к этим metaboxes внутри HOC?
  • Можно ли это проверить metabox ценности и возвращение говорят false из HOC и взять то же самое внутри обертываемого компонента?
  • На основе значения, возвращенного из HOC, это возможно сделать Publish а также Update кнопки отключены? Это означает, что они будут кликабельными только в случае возврата HOC true,

Я думал что-то вроде этого:

Компонент высшего порядка:

const withValidation = ( WrappedComponent ) => {
   const thisProps = ...this.props;
   return false;
}

export default withValidation;

Файл блока:

import { __ } = wp.i18n;
import { registerBlockType } = wp.blocks;
import { RichText } = wp.editor;

import { withValidation } from './validation';

function check_meta_validation() {
   registerBlockType( 'subrata/validation_check', {
      title: '...',
      icon: '...',
      category: '...',
      attributes: {
         bio: {
           type: 'string',
           source: 'meta',
           meta: 'author_bio'
         }
      },
      edit: withValidation( 'validate', function ( props ) { 

         const onAuthorBioChange = ( content ) => {
             props.setAttributes( { bio: content } );
         }

         return(
           <div className={props.className}>
               <RichText 
                 value = {props.attributes.bio}
                 onChange = { onAuthorBioChange }
               />
           </div>
         );
      } ),
      save: function( props ) {
         return null;
      }
   } );
}

export default check_meta_validation();

И, наконец, в block.js (я использую create-guten-block инструмент), я импортирую вышеупомянутый блок:

block.js

import { metaBoxValidation } from './mbv';

Но блок не отображается в диалоге вставки, когда я использую withValidation компонент более высокого порядка. Когда я удаляю его, появляется блок.

Я не знаю, как это сделать. Но попробовал описанный выше подход без удачи! Кроме того, даже что-то подобное можно сделать, и я могу получить значение, возвращаемое HOC, как я буду предотвращать / отключать те Publish а также Update кнопки и показывают сообщение о том, что проверка не удалась?

0 ответов

Другие вопросы по тегам