Skip to content

Media Text Block: Added blockGap support#67247

Open
Mayank-Tripathi32 wants to merge 2 commits into
WordPress:trunkfrom
Mayank-Tripathi32:try/fix-67208
Open

Media Text Block: Added blockGap support#67247
Mayank-Tripathi32 wants to merge 2 commits into
WordPress:trunkfrom
Mayank-Tripathi32:try/fix-67208

Conversation

@Mayank-Tripathi32

@Mayank-Tripathi32 Mayank-Tripathi32 commented Nov 22, 2024 •
edited
Loading

Copy link
Copy Markdown
Member

resolves #67208

What?

This update introduces block gap support to the Media & Text block, along with new UI controls and a default gap value.

Why?

It addresses issue #67208 by allowing users to control the spacing between the image and text elements within the block.

How?

The update adds block gap support to the blocks.json file and uses __experimentalGetGapCSSValue (renamed as getGapCSSValue) to parse style attributes in the required format. It incorporates inline styles in both edit.js and save.js, with a default fallback gap value of 'var(--wp--style--block-gap)'.

Testing Instructions

  1. Open a post or page in the WordPress editor.
  2. Add a Media & Text block to the editor.
  3. Check if the block gap control is available in the block settings panel.
  4. Adjust the gap using the control and observe changes in the spacing between the image and text.
  5. Save the post or page and verify that the changes persist on the frontend.
  6. Test the block with no gap value set to ensure the default fallback (var(--wp--style--block-gap)) is applied.
  7. Inspect the block in the editor and on the frontend to confirm the correct inline styles are applied.
  8. Repeat the test with various themes to ensure compatibility with custom block-gap settings.

Screenshots

image
image
image
image

@github-actions

github-actions Bot commented Nov 22, 2024

Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Mayank-Tripathi32! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 22, 2024
Mayank-Tripathi32
Mayank-Tripathi32 commented Nov 25, 2024
View reviewed changes
Comment thread packages/block-library/src/media-text/edit.js

const blockGap = attributes?.style?.spacing.blockGap;

const fallbackValue = 'var(--wp--style--block-gap)';

@Mayank-Tripathi32 Mayank-Tripathi32 Nov 25, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

We can also default to 0 but I felt that using this global made sense here.

@Mayank-Tripathi32

Mayank-Tripathi32 commented Nov 25, 2024

Copy link
Copy Markdown
Member Author

@t-hamano Could you take a look? If everything seems fine, I'll proceed with fixing the unit tests as well.

@Mayank-Tripathi32 Mayank-Tripathi32 marked this pull request as ready for review November 25, 2024 13:24
@github-actions

github-actions Bot commented Nov 25, 2024

Copy link
Copy Markdown

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: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: sgomes <sergiomdgomes@git.wordpress.org>

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

@Mayank-Tripathi32 Mayank-Tripathi32 changed the title [Draft] Enhance: added blockGap support to media-text Enhance: added blockGap support to media-text Nov 25, 2024
@akasunil akasunil added [Type] Enhancement A suggestion for improvement. [Block] Media & Text Affects the Media & Text Block labels Dec 2, 2024
@akasunil akasunil changed the title Enhance: added blockGap support to media-text Media Text Block: Added blockGap support Dec 2, 2024
@Mamaduka Mamaduka removed the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Aug 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

@ndiego ndiego Awaiting requested review from ndiego

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Block] Media & Text Affects the Media & Text Block [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Media & Text: add "gap" options

4 participants

@Mayank-Tripathi32 @Mamaduka @t-hamano @akasunil