Improve code and docs #67

luisherranz · 2024-06-05T08:15:51Z

What

I've been looking through the code and have improved a few things. I have also improved the README files.

Why

Some things were still outdated and did not correspond to how the Interactivity API works in its latest version. Other things are simply improvements.

How

I explained the changes in the comments below.

luisherranz · 2024-06-05T08:16:19Z

README.md

-   `/lib` - Helpers and support code for this demo. It's not relevant for
-    understanding the Interactivity API.
+    **Follow this guide to understand how we built each interactive block with the Interactivity API:\
+    [Movie Interactive Blocks](https://github.com/WordPress/wp-movies-demo/blob/main/docs/interactive-blocks/README.md)**


I included a link so people can find the documentation for the blocks.

luisherranz · 2024-06-05T08:17:21Z

README.md

@@ -46,30 +47,20 @@ The Interactivity API is [available in WordPress 6.5](https://make.wordpress.org
    npm run build
    ```

-    If you plan on tinkering with the frontend code, start the webpack
-    server which automatically rebuilds the files when you make any changes:
+    If you plan on tinkering with the frontend code, start the webpack server which automatically rebuilds the files when you make any changes:


In many places, I've removed line breaks to allow markdown to handle line breaks wherever it's convenient based on the user's screen.

luisherranz · 2024-06-05T08:18:17Z

README.md


    ```sh
-      npx wp-env run cli "wp theme activate wp-movies-theme"
+    npx wp-env run cli -- wp theme activate wp-movies-theme


Using double quotes to pass the command doesn't work or has stopped working. More info in this issue.

luisherranz · 2024-06-05T08:18:59Z

README.md

+    npx wp-env run cli -- wp plugin activate wordpress-importer
+    npx wp-env run cli -- wp import wp-content/plugins/wp-movies-demo/wp_sampledata_movies.xml --authors=create
+    npx wp-env run cli -- wp import wp-content/plugins/wp-movies-demo/wp_sampledata_media.xml  --authors=create
+    npx wp-env run cli -- wp import wp-content/plugins/wp-movies-demo/wp_sampledata_actors.xml --authors=create


The same here. I have also added the activation of the WordPress Importer plugin, which is needed to perform the imports.

luisherranz · 2024-06-05T08:19:50Z

docs/interactive-blocks/README.md

 </div>
 ```

 We create an initial array to save the IDs of the favorite movies.

 _For this demo, we are not saving that data in the database, but if we were, that array would be populated with the list of favorite movies of a logged-in user._

-In the `render.php` file, we populate the store with the array and the initial state of a couple of selectors which tell us the number of favorite movies and a boolean that tells us if there is at least one favorite movie.
+In the `render.php` file, we populate the state with the array and the initial state of a derived state which tell us if there is at least one favorite movie (`state.isLikedMoviesNotEmpty`).


I have changed all the references of selectors to derived state.

luisherranz · 2024-06-05T08:27:11Z

src/blocks/interactive/movie-like-button/view.js

-			state.likesCount = state.likedMovies.length;
-			state.isLikedMoviesNotEmpty = state.likedMovies.length > 0;


This is where the state was being calculated instead of derived.

luisherranz · 2024-06-05T08:27:36Z

src/blocks/interactive/movie-like-icon/view.js

-			state.likesCount = state.likedMovies.length;
-			state.isLikedMoviesNotEmpty = state.likedMovies.length > 0;


Here as well, that also means that the logic was duplicated.

luisherranz · 2024-06-05T08:30:06Z

src/blocks/interactive/movie-search/render.php

 	<form>
-		<label class="search-label" for="movie-search">Search for a movie</label>
+		<label class="search-label" for="movie-search">
+			<?php _e( 'Search for a movie', 'wp-movies-demo' ); ?>


Missing translation.

luisherranz · 2024-06-05T08:31:49Z

src/blocks/interactive/movie-search/view.js

+  const { actions } = await import("@wordpress/interactivity-router");
+  await actions.navigate(`/${url.search}${url.hash}`);


Even if it's not necessary in this case, it's good to teach where the store of the Interactivity router comes from and how to import it.

luisherranz · 2024-06-05T08:32:00Z

src/blocks/interactive/movie-search/view.js

+        const { actions } = yield import("@wordpress/interactivity-router");
+        yield actions.navigate("/");


luisherranz · 2024-06-05T08:34:49Z

README.md

-> [!NOTE]  
-> When running `wp-env` commands like the one above, it is assumed that the
-> Docker container is called `cli` on your local machine. If you had
-> previously used `wp-env` to run other WordPress sites, this name might be
-> different, e.g. `cli-1` in which case the full command would be `npx wp-env run cli-1 "wp theme activate wp-movies-theme"`.
-


I deleted this note because it doesn't seem to be true. Even when the container is called cli-1, wp-env expects you to use only cli. If you use cli-1, it gives you the following error message:

Invalid values: Argument: container, Given: "cli-1", Choices: "mysql", "tests-mysql", "wordpress", "tests-wordpress", "cli", "tests-cli"

I was the one that added this note. I think that it was the case at the time but it was a while ago and I'm not sure how to intentionally reproduce it now. Happy to remove 🙂 .

luisherranz · 2024-06-05T10:47:18Z

I have created another pull request to prettify all the JavaScript files because we were not using the WordPress coding standard.

Prettify everything #68

README.md

michalczaplinski

Sweet, thanks for the updates Luis!

I ran through the updated setup instructions and it works like a charm.

luisherranz · 2024-06-07T07:14:51Z

Nice, thanks Michal 🙂

By the way, once this pull request is merged, how do you update the website? I think I've never done it before.

cbravobernal · 2024-06-07T08:44:39Z

By the way, once this pull request is merged, how do you update the website? I think I've never done it before.

Usually I generate the zips in local and just upload them to the site. We can enable Github deployments, but we may need additional permissions for the WordPress Github group.

luisherranz · 2024-06-10T09:49:09Z

I'll try it. Thanks, Carlos!

luisherranz · 2024-06-10T10:23:16Z

Plugin updated 🙂

luisherranz added 5 commits June 5, 2024 09:42

Improve interactive blocks' code

ccf6335

Remove unnecessary prettier config

e1440a9

Improve interactive blocks' doc

3db562a

Update wp-env version

bf82617

Improve main Readme

d5b6205

luisherranz requested a review from michalczaplinski June 5, 2024 08:15

luisherranz self-assigned this Jun 5, 2024

luisherranz commented Jun 5, 2024

View reviewed changes

luisherranz force-pushed the improve-code-and-docs branch from 02fed0a to d5b6205 Compare June 5, 2024 10:39

luisherranz mentioned this pull request Jun 5, 2024

Prettify everything #68

Merged

michalczaplinski reviewed Jun 6, 2024

View reviewed changes

README.md Show resolved Hide resolved

michalczaplinski self-requested a review June 6, 2024 17:08

michalczaplinski approved these changes Jun 6, 2024

View reviewed changes

luisherranz merged commit 40d58d6 into main Jun 7, 2024

luisherranz deleted the improve-code-and-docs branch June 7, 2024 07:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve code and docs #67

Improve code and docs #67

luisherranz commented Jun 5, 2024 •

edited

Loading

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

luisherranz Jun 5, 2024

michalczaplinski Jun 6, 2024

luisherranz commented Jun 5, 2024

michalczaplinski left a comment

luisherranz commented Jun 7, 2024

cbravobernal commented Jun 7, 2024

luisherranz commented Jun 10, 2024

luisherranz commented Jun 10, 2024

		state.likesCount = state.likedMovies.length;
		state.isLikedMoviesNotEmpty = state.likedMovies.length > 0;

		const { actions } = await import("@wordpress/interactivity-router");
		await actions.navigate(`/${url.search}${url.hash}`);

		const { actions } = yield import("@wordpress/interactivity-router");
		yield actions.navigate("/");

Improve code and docs #67

Improve code and docs #67

Conversation

luisherranz commented Jun 5, 2024 • edited Loading

What

Why

How

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luisherranz commented Jun 5, 2024

michalczaplinski left a comment

Choose a reason for hiding this comment

luisherranz commented Jun 7, 2024

cbravobernal commented Jun 7, 2024

luisherranz commented Jun 10, 2024

luisherranz commented Jun 10, 2024

luisherranz commented Jun 5, 2024 •

edited

Loading