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

Show preview image for custom Gutenberg blocks #1149

Closed
saad-allah opened this issue Feb 17, 2023 · 2 comments
Closed

Show preview image for custom Gutenberg blocks #1149

saad-allah opened this issue Feb 17, 2023 · 2 comments

Comments

@saad-allah
Copy link

Version

  • Carbon Fields: 3.3.4
  • WordPress: 6.1.1
  • PHP: 8

I’ve created a batch of custom CF gutenberg blocks and now trying to assign a preview image.

Issue: Getting the preview image to show

The below image here shows a paragraph component which is a default block.

https://community.carbonfields.net/uploads/default/original/1X/b82cbe0b81f1dbae8749ac195c4dc09728daf7b5.png

You can see on the right hand side, that the paragraph block has an image and description alongside it. Below is how my component is currently appearing

https://community.carbonfields.net/uploads/default/original/1X/980e49154f6e84ed2350715f5d99c39812db9f4a.png

Any help to show image for the block

thanks

@HTMLBurger-NG
Copy link
Contributor

Hi @saad-allah ,

There is already related issue #1036.

We're working on this issue.

@HTMLBurger-NG
Copy link
Contributor

Hi @saad-allah,

We just want to let you know that you could now use our new field "Block Preview" which would help you create a preview for your blocks.

By default, the blocks would show the fields added.
You could easily override it by adding a newly created field "Block Preview" in our latest release 3.5.2:

Here is an example of usage:

Block::make( __( 'Simple Text Block', 'crb' ) )
    ->add_fields( [
        Field::make( 'block_preview', 'preview', __( 'Block Preview', 'crb' ) )
            ->set_html("
                <h3>Block Preview Heading</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                <img src='https://picsum.photos/200/300' />
            "),
        Field::make( 'text', 'crb_text', __( 'Simple Text Field', 'crb' ) ),
    ] )

    ->set_render_callback( function( $fields, $atts, $blocks, $post_id ) {
        // block render template...
    } );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants