External Media / AI Image Generator: update button style (#39985)

* External Media / AI Image Generator: update button style

See #39934

Let's change the overall styles of the 2 buttons ("Select Image" and "Generate with AI"):

- the buttons should be 40px high, like in Core. See WordPress/gutenberg#46741
- the buttons should use the secondary style variant by default, to match the "Insert from URL" button.
- the buttons should take the full width of the placeholder on mobile devices.

* Ensure the buttons look good in narrow parent blocks

See Automattic/jetpack#39985 (comment)

* Simplify styling of the main wrapper

The wrapper itself is still necessary unfortunately.

Co-authored-by: Filipe Varela <[email protected]>
Co-authored-by: jasmussen <[email protected]>

* Add logic to change button size based on wp & Gutenberg versions

The other buttons in the Image block were changed in this PR:
WordPress/gutenberg#65361

This was released with Gutenberg 19.4, and will be included in WP version 6.7.

Let's consequently set our own buttons to match.

---------

Co-authored-by: Filipe Varela <[email protected]>
Co-authored-by: jasmussen <[email protected]>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/11660975525

Upstream-Ref: Automattic/jetpack@746d1fc

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1730709216164,"hasCustomBabel":true,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":1,"testPackages":{"@playwright/test":"1.45.1","allure-playwright":"2.9.2","jest":"29.7.0"},"packageManager":{"type":"pnpm","version":"9.3.0"},"typescriptOptions":{"reactDocgen":"react-docgen-typescript"},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","portableStoriesFileCount":0,"storybookVersion":"8.3.5","storybookVersionSpecifier":"8.3.5","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.3.5"},"@storybook/components":{"version":"8.3.5"},"@storybook/manager-api":{"version":"8.3.5"},"@storybook/react":{"version":"8.3.5"},"@storybook/react-webpack5":{"version":"8.3.5"},"@storybook/source-loader":{"version":"8.3.5"},"@storybook/test-runner":{"version":"0.19.1"},"@storybook/theming":{"version":"8.3.5"},"storybook":{"version":"8.3.5"}},"addons":{"@storybook/addon-docs":{"version":"8.3.5"},"@storybook/addon-storysource":{"version":"8.3.5"},"@storybook/addon-a11y":{"version":"8.3.5"},"@storybook/addon-essentials":{"version":"8.3.5"},"storybook-addon-mock":{"version":"5.0.0"},"@storybook/addon-webpack5-compiler-babel":{"version":"3.0.3"}}}
+{"generatedAt":1730710865486,"hasCustomBabel":true,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":1,"testPackages":{"@playwright/test":"1.45.1","allure-playwright":"2.9.2","jest":"29.7.0"},"packageManager":{"type":"pnpm","version":"9.3.0"},"typescriptOptions":{"reactDocgen":"react-docgen-typescript"},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","portableStoriesFileCount":0,"storybookVersion":"8.3.5","storybookVersionSpecifier":"8.3.5","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.3.5"},"@storybook/components":{"version":"8.3.5"},"@storybook/manager-api":{"version":"8.3.5"},"@storybook/react":{"version":"8.3.5"},"@storybook/react-webpack5":{"version":"8.3.5"},"@storybook/source-loader":{"version":"8.3.5"},"@storybook/test-runner":{"version":"0.19.1"},"@storybook/theming":{"version":"8.3.5"},"storybook":{"version":"8.3.5"}},"addons":{"@storybook/addon-docs":{"version":"8.3.5"},"@storybook/addon-storysource":{"version":"8.3.5"},"@storybook/addon-a11y":{"version":"8.3.5"},"@storybook/addon-essentials":{"version":"8.3.5"},"storybook-addon-mock":{"version":"5.0.0"},"@storybook/addon-webpack5-compiler-babel":{"version":"3.0.3"}}}