Custom Fields
Re-Envisioned
Support MB Blocks Strange wysiwyg behavior inside group

  • Creator
    Topic
  • #17764
    Resolved Jackky
    Participant

    I'm trying to implement visual editor field inside clonable group like this:

    <?php
    
    $meta_boxes[] = [
        'title'           => 'Текстовые триггеры',
        'id'              => 'text-trigger',
        //'description'     => 'A custom hero content block',
        'type'            => 'block',
        'icon'            => 'awards',
        'category'        => 'tsm',
        'context'         => 'side',
        'render_template' => get_template_directory() . '/gutenberg/text-trigger.php',
        'fields'          => [
            [
                'id'                => 'triggers',
                'type'              => 'group',
                'name'              => 'Контент',
                'clone'             => true,
                'sort_clone'        => true,
                'add_button'        => '+',
                'collapsible'       => true,
                'group_title'       => 'Элемент {#}',
                'save_state'        => true,
                'fields'            => [
                    [
                        'id'                => 'icon',
                        'type'              => 'single_image',
                        'name'              => 'Иконка',
                    ],
                    [
                        'id'                => 'text',
                        'type'            => 'wysiwyg',
                        'name'                => 'Текст',
                        'options'             => [
                                'media_buttons'   => false,
                                'teeny'           => true,
                                'textarea_rows'       => 10,
                        ],
                    ],
                ]
            ],
        ],
    ];

    And that's what i get (different bugs on load, sorting and adding new):
    null

Viewing 10 replies - 1 through 10 (of 11 total)
  • Author
    Replies
  • #17802
    Anh Tran
    Keymaster

    Hi Jackky, let me check it and will get back to you soon.

    #17845
    Jackky
    Participant

    Also I have noticed, that opts like 'teeny', my custom hooks on tinymce, like custom formst select, buttons and styles doesn't take effect inside getenberg block. TinyMCE rendering as is. And this issue not only inside clonable group.

    #17875
    Anh Tran
    Keymaster

    Hi Jackky,

    I found the problems. It's kind of a complicated thing in Gutenberg, since the editor is generated on demand using JavaScript. So, some PHP options won't be applied. And in that case, the default settings of the editor is applied. I'm afraid I don't have a good solution for it at the moment.

    #17876
    Jackky
    Participant

    I've checked now how is working classic editor standart block, and it applying all the hooks and styles from my theme

    #20405
    Jackky
    Participant

    Hello! I'm just wondering: still no solutions for applying custom hooks for tinymce?

    #20409
    Long Nguyen
    Moderator

    Hi Jack,

    The developer team is trying to research and fix the issue with the options of the WYSIWYG field in a block. I will let you know if there is any information.

    #20411
    Jackky
    Participant

    It's not just about options, it's about custom filters like 'tiny_mce_before_init', 'teeny_mce_buttons' etc.
    Let me know, please, then get any results. Waiting for fixing it, thank you!

    #27514
    Jackky
    Participant

    Hi again!

    Guys, I'm very-very (really a lot) upset about so log time to find a solution for this. About a year passed, but you didn't make a fix of this issue. I'm really wondering why, because it feels, like you have very low priority to modify and update mb-blocks extension, despite the fact that, in theory, it should be one of the main extension in your bundle stack. I'm really willing you will change your mind about making mb-blocks the most modern and powerful solution of easy-block-building-api's, because such expectations from the product prompted me to buy lifetime developer bundle. Please do not disappoint me and my fellow developers.

    As I need ability to customize tinymce editor a lot, yesterday I decide to dive into this problem, trying to figure out where the problem is. I have spend several hours, and finally made a new field, based on default 'wysiwyg' field with some custom improvements and changes. The result works perfect for me and solving all my problems and tasks about that. I really hope that you will review my solution of the problem and fix it in the plugin itself.
    NOTE: The code is bad, not refactored and not tested for whole cases, but it works

    Here my solution:
    You should enqueue modified wysiwyg.js script to the admin area, like as separate file either an inline code. NOTE: the 'rwmb' script dependency handle is required
    Here's the js code: https://pastebin.com/kJkCazm5

    Next you should register a new extended rwmb field type, that based on default wysiwyg.php class. Just paste the code below into your functions.php theme file, or include it in some other way:
    https://pastebin.com/D5R7y0zq

    Now you are able to create a new type of field - 'jackky-tinymce', below is my test example (sorry for some weird russian words :)):

    
    [
        'id'                      => 'text',
        'type'                        => 'jackky-tinymce',
        'name'                        => 'Jackky TinyMCE',
        'settings'                    => [ // NOTE: I replaced the 'options' key with the 'settings' key, that contains 2 child keys: 'tinymce', that contains an array of tinymce settings, and 'quicktags' if you need to modify the the textmode tag buttons
            'tinymce'                 => [
                    'media_buttons'           => false,
                    'drag_drop_upload'        => false,
                    'content_css'         => get_template_directory_uri() . '/assets/css/tinymce.min.css', // you can load your custom css file to style the tinymce content like on frontend
                    'toolbar1'                => 'styleselect,bold,italic,bullist,numlist,link,unlink,fullscreen', // set different tinymce settings as usual, like a toolbars buttons
                    'toolbar2'                => 'alignleft,aligncenter,alignright,undo,redo',
                    'style_formats'               => [ // define any nested settings as arrays, like 'style_formats' example
                        [
                            'title'       => 'Имитация strong',
                            'inline'  => 'span',
                            'classes' => 'strong'
                        ],
                        [
                            'title'       => 'Имитация italic',
                            'inline'  => 'span',
                            'classes' => 'em'
                        ],
                        [
                            'title'       => 'Тонкий',
                            'inline'  => 'span',
                            'classes' => 'b300'
                        ],
                        [
                            'title'       => 'Полу-жирный',
                            'inline'  => 'span',
                            'classes' => 'b500'
                        ],
                        [
                            'title'       => 'Экстра-жирный',
                            'inline'  => 'span',
                            'classes' => 'b900'
                        ],
                        [
                            'title'       => 'Имитация h1',
                            'block'       => 'div',
                            'classes' => 'h1'
                        ],
                        [
                            'title'       => 'Имитация h2',
                            'block'       => 'div',
                            'classes' => 'h2'
                        ],
                        [
                            'title'       => 'Имитация h3',
                            'block'       => 'div',
                            'classes' => 'h3'
                        ],
                    ],
            ],
            'quicktags'                   => [
                    'buttons'             => 'strong,em,u,link,ul,ol,li'
            ]
        ],
    ]
    

    The result of all of this stuff

    With a 'side' context of metabox:
    side

    With a standart context:
    std

    Also you should add some css to your admin, if you make this field clonable:

    
    .rwmb-jackky-tinymce-clone
    {
        padding-top: 20px;
    }
    

    Thats all. Feel free to use my solution.

    #27563
    Anh Tran
    Keymaster

    Hi Jackky,

    Thanks for your code. You did a nice trick on adding a settings param to the field settings and use it to parse on JS side.

    Maybe that's that way to go, since in Gutenberg, the hooks for wp_editor function don't work. I'll investigate into your code more today and try to make an improvement to the current codebase.

    #27596
    Anh Tran
    Keymaster

    Hi Jackky,

    I've merged your code into this commit. I don't use another param settings, since the wp_editor function already supports tinymce and quicktag. So now you can register custom tinyMCE and quicktag settings like this.

    This way, it works in both Gutenberg (blocks) and non-Gutenberg environment.

    Let me know what you think.

    Thanks,
    Anh

Viewing 10 replies - 1 through 10 (of 11 total)
  • You must be logged in to reply to this topic.