Review notes

[ryanwelcher]

Hello @RoelofWobben

As per your request, I've had a look at your plugin and have a couple of suggestions.

After adding an instance of this block to the block editor, I found that I was not able to select it again unless I did it using the List View. This was due to having added a className to the root elements in edit.js.

I fixed this by passing the className to useBlockProps:

<div { ...useBlockProps( { className: 'card-container' } ) }>

You can learn more about useBlockProps here.

The content of your render.php is incorrect.

While you were outputting markup, there were no classes, ids, or others attributes being applied to the wrapper div. This is because{ ...useBlockProps.save } is only run in a React context when saving a static block. By adding the "render": "file:./render.php" to your block.json, you are actually creating a dynamic block that uses the contents of render.php to override what is output by save.js. You can read more about static vs dynamic rendering here.

I updated render.php to use the following ( note the use of esc_html() to safely escape the values ):

$quote = "" ;
$name = "" ;
$job = "";

// Determine which content to display.
if ( isset( $attributes['quote'] ) ) {
    $quote = $attributes['quote'];
}

if ( isset( $attributes['name'] ) ) {
     $name = $attributes['name'];
}

if ( isset( $attributes['job'] ) ) {
    $job = $attributes['job'];
}

?>
<div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?> >
    <figure class="snip1192">
        <blockquote><?php echo esc_html( $quote ); ?></blockquote>
        <div class="author">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample1.jpg" alt="sq-sample1" />
            <h5><?php echo esc_html( $name ); ?><span><?php echo esc_html( $job ); ?></span></h5>
        </div>
    </figure>
</div>

[RoelofWobben]

Sorry,

I do not understand your remark about render.php I added it already here :

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "create-block/testimonalcard",
    "version": "0.1.0",
    "title": "Testimonal Card",
    "category": "widgets",
    "icon": "id",
    "description": "my testimonal card as solution to a wpchallenge.com challenge",
    "example": {},
    "supports": {
        "html": false
    },
    "attributes": {
        "quote": {
          "type": "string"
        },
        "name": {
            "type": "string"
        }, 
        "job": {
            "type": "string"
        }
    },
    "textdomain": "testimonalcard",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
    "render": "file:./render.php"

}

[RoelofWobben]

many thanks, Uploaded a new version and it worked better.

Finally it worked in a group :)

I hope you are happy., If you have more feedback , just add it here