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.

Sign up for GitHub

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

Do not render Sections in Preferences modal if children render nothing #29207

Closed
wants to merge 1 commit into from
Closed

Do not render Sections in Preferences modal if children render nothing #29207

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 22 additions & 13 deletions packages/edit-post/src/components/preferences-modal/section.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
const Section = ( { description, title, children } ) => (
<section className="edit-post-preferences-modal__section">
<h2 className="edit-post-preferences-modal__section-title">
{ title }
</h2>
{ description && (
<p className="edit-post-preferences-modal__section-description">
{ description }
</p>
) }
{ children }
</section>
);
/**
* WordPress dependencies
*/
import { renderToString } from '@wordpress/element';

const Section = ( { description, title, children } ) => {
const content = renderToString( children );
Copy link
Contributor

Choose a reason for hiding this comment

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

That is not great :) It's like we'll be rendering twice. Isn't there a more "data based" approach instead of using the elements?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I know :) - it doesn't feel right to me either but it seems that we cannot use some React API to know what children will render, so we can't use things like Children.count etc..., unless there is something I'm not aware of.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can't we do the check in the parent and not render Section at all?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There are lot's of checks that would be duplicate then like PostFeaturedImageCheck, PostExcerptCheck etc.. and doesn't seem good to me.

Copy link
Contributor

Choose a reason for hiding this comment

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

I see what you mean but it seems this is already how we do in the document sidebar isn't it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I tried to find a css solution but with no success. We could do it with has when available :).

Not really sure if this change worths to be included right now, since this seems to me like an unusual use case (to disable all panel leaving an empty of contents section).

Copy link
Member

Choose a reason for hiding this comment

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

It's worth revisiting the CSS approach after 3 years to provide the simple fix at least to the supported browsers.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seems the css solution has been implemented already :)

Copy link
Member

Choose a reason for hiding this comment

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

I'll close the issue then 👍🏻

Copy link
Member

Choose a reason for hiding this comment

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

You did that already, thank you Nik!

if ( ! content ) return null;
return (
<section className="edit-post-preferences-modal__section">
<h2 className="edit-post-preferences-modal__section-title">
{ title }
</h2>
{ description && (
<p className="edit-post-preferences-modal__section-description">
{ description }
</p>
) }
{ children }
</section>
);
};

export default Section;