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

Spacing support: Add server-side support for margins #31808

Conversation

stacimc
Copy link
Contributor

@stacimc stacimc commented May 13, 2021

Description

This PR adds the margin block support on the server-side allowing dynamic blocks to use it. The existing padding.php block support file is renamed to spacing to reflect the existing block support's structure.

How has this been tested?

Testing instructions
Your theme will need to opt into padding support. You can do this by updating your theme.json to enable padding under the spacing control, in either your default settings or the block context for button:

"settings": {
    "spacing": {
        "customPadding": true,
        "customMargin": true,
        "units": [
            "px",
            "em",
            "rem",
            "vh",
            "vw"
        ]
    }
}

I used the Site Title block for testing, as it supports both margin and padding on trunk.

Test Instructions

You can verify the bug first on trunk by:

  1. Create a post and add a Site Title block.
  2. In the Inspector Controls, give the block margin and padding.
  3. Save and view on the frontend. You should see that the padding has been applied, but the margin has not. (Inspect the element in the console to easily verify that the margin styles have not been added).

Test the PR:

  1. Create a post, add a Site Title block.
  2. In the Inspector Controls, give the block margin and padding.
  3. Save and view on the frontend. You should now see that both the margin and padding have been applied, and can verify by inspecting the element.

**Note that if added as a top-level block, left and right margins may be overridden by the !important styles from the layout block support. You should still be able to see the styles added.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@stacimc stacimc changed the title Rename padding support to spacing and add margin server-side support Spacing support: Add server-side support for margins May 13, 2021
@stacimc stacimc mentioned this pull request May 13, 2021
7 tasks
Copy link
Contributor

@carolinan carolinan left a comment

Choose a reason for hiding this comment

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

The example theme.json code above also need to include "customMargin": true,.

With that and the PR, the margin that is not reset by the layout setting works well on the font.

@apeatling apeatling self-requested a review May 14, 2021 21:04
Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

Works well, tested alongside #31809.

@aaronrobertshaw aaronrobertshaw self-requested a review May 17, 2021 06:52
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw 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 adding this missed functionality 🙇

This tests well for me both in the editor and frontend.

The e2e test failures looked unrelated. After re-running them everything passes. I'll merge this shortly.

@aaronrobertshaw aaronrobertshaw merged commit ba499e8 into WordPress:trunk May 17, 2021
@github-actions github-actions bot added this to the Gutenberg 10.7 milestone May 17, 2021
@stacimc stacimc deleted the update/add-server-side-margin-block-support branch May 17, 2021 17:58
@oandregal oandregal mentioned this pull request May 19, 2021
82 tasks
@oandregal oandregal mentioned this pull request Jun 2, 2021
15 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants