Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: Separate input form styles to a dedicated stylesheet #68501

Merged

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Jan 6, 2025

What, Why and How?

The following CSS rule is added inside content.scss which targets the iFrame to apply the styles.

.block-editor-media-placeholder__url-input-form {
min-width: 260px;
@include break-small() {
width: 300px;
}
}

Therefore, the issue arises because this rule targets a class within the components-popover__content class, which is outside the iframe, leading to the styles not getting applied.

Hence, it's recommended to extract this rule into a dedicated style.scss for it to be applied outside the iframe where the popover component is rendered.

Testing Instructions

  1. Create an image/audio/video block in site editor.
  2. Notice the size of Insert from URL input is now back to normal.

Screenshots or screencast

Before After
before after

Works as expected in the post editor page.

in-post-editor


Works well with the image/video block.

audio-in-site-editor

Closes: #68494

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review January 6, 2025 11:14
Copy link

github-actions bot commented Jan 6, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@ramonjd ramonjd added the [Type] Bug An existing feature does not function as intended label Jan 6, 2025
@ramonjd ramonjd requested a review from mirka January 6, 2025 23:18
@ramonjd ramonjd added [Feature] Media Anything that impacts the experience of managing media [Package] Block editor /packages/block-editor Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) labels Jan 6, 2025
Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the quick fix. LGTM

Here's the site editor:

Kapture.2025-01-07.at.10.24.34.mp4

I also tested the post editor. 👍🏻

I'll merge since it fixes a pretty bad bug. If any post-merge refactors are required, I'm happy to follow up.

@ramonjd ramonjd merged commit d1a493c into WordPress:trunk Jan 6, 2025
77 of 79 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.1 milestone Jan 6, 2025
westonruter added a commit that referenced this pull request Jan 7, 2025
…ry/interactivity-lazy-hydration

* 'trunk' of https://github.com/WordPress/gutenberg: (143 commits)
  Update: Bundle upload media. (#68522)
  Add: Media field changing ui to Dataviews and content preview field to posts and pages (#67278)
  Bump the react-native group with 2 updates (#68095)
  Check Storybook build on CI for PRs (#68466)
  Bump the github-actions group across 1 directory with 2 updates (#68436)
  Classic theme preview: remove admin-bar class name (#68519)
  Remove geriux as code owner (#68523)
  Post Featured Image: Adds control to clear the the overlay color (#68525)
  Components: Standardize reduced motion handling using media queries (#68421)
  Upgrade Playwright to v1.49 (#68504)
  Document Outline: Use block client ID as unique 'key' (#68502)
  Storybook: Add UnitControl story (#67346)
  Details: Add allowedBlocks and TemplateLock attributes (#68489)
  Post Comment Link: Show Border Control By Default (#68506)
  Query Total: Show Border Controls By Default (#68507)
  RSS: Added Colour support (#66419)
  Refactor: Separate input form styles to a dedicated stylesheet (#68501)
  Code quality: Fix typos (#67304)
  Page List: Added color support (#66430)
  Fix flaky DataViews list arraow nav e2e tests (#68503)
  ...
@Mamaduka Mamaduka removed the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Jan 22, 2025
Gulamdastgir-Momin pushed a commit to Gulamdastgir-Momin/gutenberg that referenced this pull request Jan 23, 2025
…ress#68501)

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Media Anything that impacts the experience of managing media [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Site Editor - Insert from URL (Image, Audio and Video blocks) form input is too small
3 participants