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

Add inline media controls for the Image component #269

Conversation

ncoetzer
Copy link
Contributor

@ncoetzer ncoetzer commented Oct 6, 2023

Description of the Change

This pull request adds all the functionality from #172 into #222

Closes #172

How to test the Change

Please refer to #172

Changelog Entry

Added - Ability to show inline media controls for the Image component

Credits

Props @fabiankaegy

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.


return (
<StyledComponentContext cacheKey="tenup-component-image">
<InlineControlsStyleWrapper {...style} {...rest}>
Copy link
Member

Choose a reason for hiding this comment

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

Would this also work as a singling if the image tag?

I'd love to not add an additional div around the image :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@fabiankaegy Think this is where I got confused and am not sure I'm following 😆. Apologies! So, the Figure component already had the figure wrapper before the change:

const Figure = (props) => {
	const { children, style, ...rest } = props;

	return (
		<figure style={{ position: 'relative', ...style }} {...rest}>
			{children}
		</figure>
	);
};

I basically just swapped it for a styled component that also renders a figure.

Should there not be other conditional log in the main component? Or am I missing something completely.

Copy link
Member

Choose a reason for hiding this comment

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

@ncoetzer Okay I may have misunderstood the code then.

What I was trying to get at is that the end markup should look like this:

<figure>
    <img />
    <div>
        <!-- Insert anything else here -->
    </div>
</figure>

and not:

<figure>
    <div>
         <img />
        <!-- Insert anything else here -->
    </div>
</figure>

Copy link
Contributor Author

@ncoetzer ncoetzer Oct 6, 2023

Choose a reason for hiding this comment

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

@fabiankaegy Aah okay cool. In that case, yes, that is how it currently works and outputs the code.
image

However, for any existing instances of this component, it would also wrap their <img> tags inside a <figure>, which is a breaking change if I understood things correctly. So, I'm thinking of changing the logic in the main component to conditionally check if inline controls are needed, and if so, wrap the <img> in a <figure>. Otherwise, it will just output the <img> directly as it currently does. We could do this with any other feature placed behind a flag as well.

Of course, this new API also accommodates creating custom children, so the user would be able to override anything we have with anything they need.

Thoughts?

@github-actions
Copy link

github-actions bot commented Oct 6, 2023

🎉 A new testing version of this package has been published to NPM. You can install it with npm install @10up/block-components@testing-269

@github-actions
Copy link

github-actions bot commented Oct 6, 2023

Size Change: +3.01 kB (+5%) 🔍

Total Size: 69.1 kB

Filename Size Change
dist/index.js 69.1 kB +3.01 kB (+5%) 🔍

compressed-size-action

@cypress
Copy link

cypress bot commented Oct 6, 2023

Passing run #673 ↗︎

0 6 0 0 Flakiness 0

Details:

Added styling fix for the figure lement for block API 3
Project: 10up Block Components Commit: df92c3389c
Status: Passed Duration: 03:10 💡
Started: Oct 6, 2023 6:55 PM Ended: Oct 6, 2023 6:58 PM

Review all test suite changes for PR #269 ↗︎

@ncoetzer ncoetzer marked this pull request as ready for review October 12, 2023 11:41
Copy link
Member

@fabiankaegy fabiankaegy left a comment

Choose a reason for hiding this comment

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

This is such a nice improvement!

@fabiankaegy fabiankaegy merged commit e845203 into feature/include-figure-in-image-component Jan 29, 2024
5 of 6 checks passed
@fabiankaegy fabiankaegy deleted the feature/include-figure-in-image-component-inline-controls branch January 29, 2024 08:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants