Modify the embed default size for the case of Figma Embed blocks to allow supporting wide view using the native aspect ratio classes provided by the editor

[kmgalanakis]

Description of the Change

In this PR I'm modifying the embed default size for the case of Figma Embed blocks to allow supporting wide view using the native aspect ratio classes provided by the editor

Closes #2

How to test the Change

• Insert a Figma block into the post content
• Change the alignment option to Wide to make sure that block occupies the full width of the page

Changelog Entry

Fixed - Wide alignment of the block

Credits

Props @kmgalanakis

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.

[dkotter]

In testing this, it doesn't seem to be working for me. Using the example Figma URL (https://www.figma.com/design/FdZULoLQWlOdxT606IHiyi/Bravo-sample%3A-Calendar-Picker-(Community)?node-id=0-1&t=L9HVeuyFCQTxTLoL-0), I never see the wp-has-aspect-ratio class being added to that block, which appears that is needed to make the wide and full alignment work.

Note in testing with another example Figma link (https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-Files), I do see the alignment options working fine but they work fine on the develop branch as well, so seems like the fix in this PR is only needed for certain Figma files.

[kmgalanakis]

Hello @dkotter.

I can't understand why it doesn't work for you. Have you used the working branch of this PR and built the assets?

Here is a recording with the first Figma link that you posted

Edit-Page-.Figma-block.-.-opensource-test-.-WordPress.1.mp4

and another recording with the second link that you posted

Edit-Page-.Figma-block.-.-opensource-test-.-WordPress.mp4

As you can see, for both cases the wp-embed-aspect-4-3 wp-has-aspect-ratio class is added to the block which is what add support for wide alignment.

Do you have any idea what might be missing or going wrong on your end?

Thank you

[dkotter]

Just tested again and am seeing the same thing. Wondering if this is theme dependent? Curious what theme you're testing with and if any other plugins are active?

[kmgalanakis]

Hello @dkotter

I use the following

$ wp theme list --status=active
+------------------+--------+--------+---------+
| name             | status | update | version |
+------------------+--------+--------+---------+
| twentytwentyfour | active | none   | 1.1     |
+------------------+--------+--------+---------+

$ wp plugin list --status=active
+---------------------------+--------+-----------+-----------+
| name                      | status | update    | version   |
+---------------------------+--------+-----------+-----------+
| classifai                 | active | none      | 3.1.0-dev |
| convert-to-blocks         | active | available | 1.2.2     |
| figma-block               | active | none      | 0.1.0     |
| google-workspace-groups   | active | none      | 1.0.0     |
| insert-special-characters | active | none      | 1.1.2     |
| kg-plugin                 | active | none      | 1.0       |
| mention-notifier          | active | none      | 0.2.0     |
| safe-redirect-manager     | active | none      | 2.1.1     |
| safe-svg                  | active | none      | 2.2.4     |
| simple-local-avatars      | active | available | 2.7.9     |
+---------------------------+--------+-----------+-----------+

Regarding theme, I've verified this behavior with more than one free theme but now I can't remember which ones I've used.

[dkotter]

Tested again by deleting the embed blocks that weren't working and adding those back and they do have the proper classes now. Not sure why it didn't work the first few times I tested but just going to assume it was an issue on my end. Thanks for the work here!