Support » Plugin: Gutenberg » custom a image blog with full feature similar image block default

  • How to custom a image blog with full feature similar image block default?
    how to display images formatting toolbar with ES5?
    Can anyone help me.

Viewing 2 replies - 1 through 2 (of 2 total)
  • you should provide at least some code or hint where you fail.

    If i get your question right, you just need to create a new block (look @create-guten-block) and assign blockcontrols to it.

    Thread Starter DesignBold

    (@designboldit)

    This is my code. After onSelectImage run it not return alignment formatting. I`m research handbook Gutenberg but not found solution for resize image feature.

    
    var DBbutton = (function (blocks, editor, components, i18n, element) {
        var __ = i18n.__
        var el = element.createElement
        var registerBlockType = blocks.registerBlockType
        var RichText = editor.RichText
        var BlockControls = editor.BlockControls
        var AlignmentToolbar = editor.AlignmentToolbar
        var MediaUpload = editor.MediaUpload
        var Button = components.Button
    
        registerBlockType('designbold/design-button-block', {
            title: __('DesignBold'),
            description: __('A custom block for image design by DesignBold.'),
            icon: 'dashicons-align-center',
            category: 'common',
            keywords: [__('image'), __('photo'), __('pics')],
            attributes: { // Necessary for saving block content.
                mediaID: {
                    type: 'number'
                },
                mediaURL: {
                    type: 'string',
                    source: 'attribute',
                    selector: 'img',
                    attribute: 'src'
                },
                mediaTitle: {
                    type: 'string'
                },
                mediaFileName: {
                    type: 'string'
                },
                alignment: {
                    type: 'string',
                    default: 'none',
                },
                content: {
                    type: 'array',
                    source: 'children',
                    selector: 'p',
                }
            },
    
            edit: function (props) {
                var attributes = props.attributes,
                    alignment = attributes.alignment,
                    content = attributes.content,
                    _content = [];
    
                function onSelectImage(media) {
                    props.setAttributes({
                        mediaURL: media.url,
                        mediaID: media.id,
                        mediaTitle: media.title,
                        mediaFileName: media.filename,
                    })
                };
    
                function startDesignTool() {
                    // Do something
                };
    
                var generateImage = (url) => {
                    return (
                    	// Display controls when the block is clicked on.
                        el(
                            BlockControls,
                            { key: 'controls' },
                            // Button upload images
                            el(Button, {
                                    type: 'button',
                                    className: 'dbdb-design-button',
                                    onClick: startDesignTool,
                                    children: iconEl
                                }
                            ),
                            // Display alignment toolbar within block controls
                            el(
                                AlignmentToolbar,
                                {
                                    value: alignment,
                                    onChange: onChangeAlignment,
                                }
                            ),
                        ),
                        el('figure', {className: 'wp-block-image is-resized'},
                            el('img', {src: url, resizeMethod: "scale"}),
                            el(
                                RichText,
                                {
                                    key: 'richtext',
                                    tagName: 'p',
                                    style: { textAlign: alignment },
                                    className: props.className,
                                    onChange: onChangeContent,
                                    value: content,
                                    placeholder: __("Write caption..."),
                                    keePlaceholderOnFocus: true,
                                }
                            )
                        )
                    )
                }
    
                /** End function to add value props */
                if (attributes.mediaURL) {
                    _content.push(generateImage(props.attributes.mediaURL));
                } else {
                    _content.push(
                        // Display controls when the block is clicked on.
                        el(
                            BlockControls,
                            { key: 'controls' },
                            // Button upload images
                            el(Button, {
                                    type: 'button',
                                    className: 'dbdb-design-button',
                                    onClick: startDesignTool,
                                    children: iconEl
                                }
                            ),
                            // Display alignment toolbar within block controls
                            el(
                                AlignmentToolbar,
                                {
                                    value: alignment,
                                    onChange: onChangeAlignment,
                                }
                            ),
                        ),
                        
                        el(MediaUpload, {
                            onSelect: onSelectImage,
                            allowedTypes: ALLOWED_MEDIA_TYPES,
                            type: 'button',
                            className: 'components-button editor-media-placeholder__button is-button is-default is-large',
                            value: attributes.mediaID,
                            render: function (obj) {
                                return el(components.Button, {
                                        className: 'components-button editor-media-placeholder__button is-button is-default is-large',
                                        onClick: obj.open,
                                        children: __('Open Media Library')
                                    }
                                )
                            }
                        })
                    )
                }
    
                return _content;
            },
    
            save: function (props) {
                var attributes = props.attributes;
                return (
                    el('div',
                        {className: props.className},
                        el('figure',
                            {className: 'wp-block-image'},
                            el('img', {src: attributes.mediaURL})
                        )
                    )
                );
            },
        });
    })(
        window.wp.blocks,
        window.wp.editor,
        window.wp.components,
        window.wp.i18n,
        window.wp.element
    );
    
    
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘custom a image blog with full feature similar image block default’ is closed to new replies.