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 initial block support for width #26045

Closed
wants to merge 14 commits into from

Commits on Oct 20, 2020

  1. Add initial block support for width

    First pass attempt at creating a block support for adding a width selector with options for
    25, 50, 75, 100 percent width. It is based off the work to add a block support for border
    radius.
    
    The intention is to extend this to include custom percentage widths and px support with a
    slider in the editor for custom sizing (see Search bar for an example).
    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    beabb54 View commit details
    Browse the repository at this point in the history
  2. Apply inline styles when width is selected

    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    3ec2348 View commit details
    Browse the repository at this point in the history
  3. Add className when custom width is selected

    When a custom width is selected apply the 'custom-width' className to the block.
    This is used to key off of for additional block-specific CSS; for example the
    Button block needs to set its inner component to 100% width for the styling to
    work correctly.
    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    ae14c83 View commit details
    Browse the repository at this point in the history
  4. Adjust CSS for right-aligned buttons in editor

    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    42f2249 View commit details
    Browse the repository at this point in the history
  5. Flatten structure of width settings in the style attribute

    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    873fb26 View commit details
    Browse the repository at this point in the history
  6. Add tests for block support

    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    c89e0a1 View commit details
    Browse the repository at this point in the history
  7. Use CSS variables for block support implementation

    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    8af7de3 View commit details
    Browse the repository at this point in the history
  8. Nest width into dimension settings

    Nesting width into a dimension setting allows for the addition of related
    settings (height etc) in the future.
    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    abed04a View commit details
    Browse the repository at this point in the history
  9. Add button block deprecation

    Adding a block support using CSS variables to the Button block
    causes the inline style to be added to the button's wrapper div as
    well as the inner anchor tag. This causes Block Invalidation
    errors for existing posts, as well as for any patterns that use
    the Button block.
    
    These errors are resolved with a deprecation that omits the block
    support. Once opened in the block editor they migrate cleanly.
    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    ab288cf View commit details
    Browse the repository at this point in the history
  10. Remove file not deleted in rebase

    Fix up an incorrectly applied rebase.
    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    4cfd6f3 View commit details
    Browse the repository at this point in the history
  11. Remove color styling from button wrapper

    The use of `useBlockProps` in the Button block was causing all of
    the block's style attributes to be applied to the button's
    wrapper div, including color props that were previously applied
    only to the inner anchor tag. When a Button has both a custom
    background color and a border radius, this causes and issue where
    the background color (applied to the wrapper) exceeds the lines
    of the border (applied to the inner anchor tag).
    
    This commit removes style attributes related to the color props
    from the blockProps before they are applied to the wrapper. This
    also resolves the block invalidation errors that were previously
    addressed by a block deprecation, so the deprecation is no longer
    necessary and is also removed in this commit.
    Staci Cooper authored and Staci Cooper committed Oct 20, 2020
    Configuration menu
    Copy the full SHA
    bcade7c View commit details
    Browse the repository at this point in the history

Commits on Oct 21, 2020

  1. Update docstrings to reflect refactor into dimensions feature

    Some docstrings still referred to the block support as just width
    support, and needed to be updated after refactoring into a larger
    dimensions feature.
    Staci Cooper authored and Staci Cooper committed Oct 21, 2020
    Configuration menu
    Copy the full SHA
    6f37465 View commit details
    Browse the repository at this point in the history

Commits on Oct 22, 2020

  1. Apply inline styles for dynamic blocks

    Properly register the block support and apply the CSS variable inline
    styles for dynamic blocks that are rendered in PHP.
    Staci Cooper authored and Staci Cooper committed Oct 22, 2020
    Configuration menu
    Copy the full SHA
    ef3379c View commit details
    Browse the repository at this point in the history
  2. Update Button to use block supports and apply styling at block level

    Because block supports implemented with CSS variables add styling to
    the outermost element of a block, this commit updates the Button
    block to expect styling to be applied at this level, rather than
    directly setting it on the inner component. This is accomplished by:
    
    1. Updates the CSS so that the inner button will always inherit
    color, background-color, and border-radius styling that was applied
    inline to its wrapper. This only happens when a user has selected
    an option from a block support, so we can reliably override any other
    styling applied by defaults or the theme.
    
    2. Adds a deprecation for the Button block since styling is now
    applied differently.
    
    3. Removes the block-specific implementation of Color settings and
    instead applies the color block support.
    
    4. Temporarily manually applies the border-radius to the wrapper.
    There is a PR for a border radius block support, which can be used to
    replace this.
    Staci Cooper authored and Staci Cooper committed Oct 22, 2020
    Configuration menu
    Copy the full SHA
    34febe6 View commit details
    Browse the repository at this point in the history