-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Commits on Oct 20, 2020
-
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 committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for beabb54 - Browse repository at this point
Copy the full SHA beabb54View commit details -
Apply inline styles when width is selected
Staci Cooper authored and Staci Cooper committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for 3ec2348 - Browse repository at this point
Copy the full SHA 3ec2348View commit details -
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 committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for ae14c83 - Browse repository at this point
Copy the full SHA ae14c83View commit details -
Adjust CSS for right-aligned buttons in editor
Staci Cooper authored and Staci Cooper committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for 42f2249 - Browse repository at this point
Copy the full SHA 42f2249View commit details -
Flatten structure of width settings in the style attribute
Staci Cooper authored and Staci Cooper committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for 873fb26 - Browse repository at this point
Copy the full SHA 873fb26View commit details -
Staci Cooper authored and Staci Cooper committed
Oct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for c89e0a1 - Browse repository at this point
Copy the full SHA c89e0a1View commit details -
Use CSS variables for block support implementation
Staci Cooper authored and Staci Cooper committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for 8af7de3 - Browse repository at this point
Copy the full SHA 8af7de3View commit details -
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 committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for abed04a - Browse repository at this point
Copy the full SHA abed04aView commit details -
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 committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for ab288cf - Browse repository at this point
Copy the full SHA ab288cfView commit details -
Remove file not deleted in rebase
Fix up an incorrectly applied rebase.
Staci Cooper authored and Staci Cooper committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for 4cfd6f3 - Browse repository at this point
Copy the full SHA 4cfd6f3View commit details -
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 committedOct 20, 2020 Configuration menu - View commit details
-
Copy full SHA for bcade7c - Browse repository at this point
Copy the full SHA bcade7cView commit details
Commits on Oct 21, 2020
-
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 committedOct 21, 2020 Configuration menu - View commit details
-
Copy full SHA for 6f37465 - Browse repository at this point
Copy the full SHA 6f37465View commit details
Commits on Oct 22, 2020
-
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 committedOct 22, 2020 Configuration menu - View commit details
-
Copy full SHA for ef3379c - Browse repository at this point
Copy the full SHA ef3379cView commit details -
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 committedOct 22, 2020 Configuration menu - View commit details
-
Copy full SHA for 34febe6 - Browse repository at this point
Copy the full SHA 34febe6View commit details