Update WCEU workshop interactivity example with WP 6.5 syntax #122
Conversation
Well, there's not really a way to test this locally using the The blueprints work for code in the repo. The way it works is:
|
|
There is something strange happening. If the quiz blocks are inside the quiz progress block, the HTML breaks and they don't work. This also happens in |
|
It's the <?php echo wp_kses_data( $content ); ?>I'm going to delete it and add an exception. Why do you need so many calls to |
|
Everything is ready 👍 |
As recommended in Common APIs Handbook > Security > Escaping Data we're escaping all output. As per this using The repo follows WordPress Coding Standards and it uses If any output is not escaped, the sniffer throws the following message
Curious about this. I think
@ryanwelcher any thoughts? Note I have opened #123 to continue the conversation there |
| > | ||
| <div> | ||
| <strong><?php echo wp_kses_data( __( 'Answered' ) ); ?></strong>: | ||
| <span data-wp-text="state.answered"></span> / <span data-wp-text="state.totalQuizzes"></span> | ||
| <span data-wp-text="state.answered"></span>/<?php echo count( $state['quizzes'] ); ?> |
There was a problem hiding this comment.
@luisherranz the portion of code <?php echo count( $state['quizzes'] ); is throwing an error
I temporarily fixed the error by adding this and this
There was a problem hiding this comment.
state.quizzes.length is not dynamically changed in the client, so it should be read from a static PHP variable instead of a client getter.
Apart from that, we need that value in the server so it's properly server-side rendered.
What's the exact error that it throwed in production?
There was a problem hiding this comment.
By the way, it doesn't work right now because state.quizzes is an object, so it should be Object.keys(state.quizzes).length.
But, anyway, let's fix it properly 😄
There was a problem hiding this comment.
This is the error I get with <?php echo count( $state['quizzes'] ); ?> on line 33
Answered: /
Warning: Undefined array key "quizzes" in /var/www/html/wp-content/plugins/interactivity-api-quiz-1835fa/build/blocks/quiz-progress-1835fa/render.php on line 33
Fatal error: Uncaught TypeError: count(): Argument #1 ($value) must be of type Countable|array, null given in /var/www/html/wp-content/plugins/interactivity-api-quiz-1835fa/build/blocks/quiz-progress-1835fa/render.php:33 Stack trace: #0 /var/www/html/wp-includes/blocks.php(519): require() #1 /var/www/html/wp-includes/class-wp-block.php(463): {closure}(Array, '', Object(WP_Block)) #2 /var/www/html/wp-includes/blocks.php(1705): WP_Block->render() #3 /var/www/html/wp-includes/blocks.php(1743): render_block(Array) #4 /var/www/html/wp-includes/class-wp-hook.php(324): do_blocks('<!-- wp:block-d...') #5 /var/www/html/wp-includes/plugin.php(205): WP_Hook->apply_filters('<!-- wp:block-d...', Array) #6 /var/www/html/wp-content/plugins/gutenberg/build/block-library/blocks/post-content.php(50): apply_filters('the_content', '<!-- wp:block-d...') #7 /var/www/html/wp-includes/class-wp-block.php(463): gutenberg_render_block_core_post_content(Array, '<!-- wp:block-d...', Object(WP_Block)) #8 /var/www/html/wp-includes/class-wp-block.php(443): WP_Block->render() #9 /var/www/html/wp-includes/blocks.php(1705): WP_Block->render() #10 /var/www/html/wp-includes/blocks.php(1743): render_block(Array) #11 /var/www/html/wp-includes/block-template.php(260): do_blocks('<!-- wp:templat...') #12 /var/www/html/wp-includes/template-canvas.php(12): get_the_block_template_html() #13 /var/www/html/wp-includes/template-loader.php(106): include('/var/www/html/w...') #14 /var/www/html/wp-blog-header.php(19): require_once('/var/www/html/w...') #15 /var/www/html/index.php(17): require('/var/www/html/w...') #16 {main} thrown in /var/www/html/wp-content/plugins/interactivity-api-quiz-1835fa/build/blocks/quiz-progress-1835fa/render.php on line 33
There has been a critical error on this website.
[Learn more about troubleshooting WordPress.](https://wordpress.org/documentation/article/faq-troubleshooting/)
There was a problem hiding this comment.
Oh, wait. I know what's happening. The quiz blocks need to be inner blocks of the quiz progress block. Can you change the blueprint to be like that? I'll make the PR.
There was a problem hiding this comment.
There was a problem hiding this comment.
The quiz blocks need to be inner blocks of the quiz progress block.
@luisherranz In that case, do we need to set the namespace for the children as it is done here?
Also, are independent blocks unable to share namespace and state/store?
There was a problem hiding this comment.
do we need to set the namespace for the children as it is done here?
Yes, even though it's not strictly required, it's a good practice to always add the data-wp-interactive directive.
are independent blocks unable to share namespace and state/store?
What do you mean?
There was a problem hiding this comment.
What do you mean?
I mean, can two blocks being at the same level (no inner blocks) in different parts of the HTML share namespace and state/store
For example, having two blocks registered by different plugins, can they share namespace (and store/actions) without a parent/child relationship?
<div id="block-registered-by-plugin-1" data-wp-interactive="common-project-namespace">
</div>
<div id="block-registered-by-plugin-1" data-wp-interactive="common-project-namespace">
</div>
@verytwisty helped me update the syntax of the WCEU workshop blocks to the final version of the Interactivity API included in WP 6.5.
This pull request brings that update to the example shared in this repository.
@juanmaguitar I haven't tested this locally, but I believe there's a way to test this using the Playground with a link generated directly in this repository. Is that the case?