Try/group block custom text color #19181

glendaviesnz · 2019-12-16T18:20:58Z

Description

With the current group block, if a custom background colour is selected that does not contrast well with the text in child blocks there is no way to rectify this other than applying a suitable text colour to every child block within the group

This PR adds a text colour selector to the Group Block inspector controls in addition to the background colour selector. It also refactors the block to use the new useColors hook instead of withColours

The text colour gets applied to the children by the default css cascade, so applying a text colour to to a child block, at any level of nesting, will override the colour set on the parent group block, and moving the child block out of the parent will also remove the colour.

Possible additions for follow on PRs, based on feedback to-date:

Indicate in some way in the child component that a colour is being inherited from the parent
Automatically select a contrasting text colour if a custom background colour is selected - but it would probably make more sense to add this as an option in the useColors hook than in this specific component

How has this been tested?

Tested manually by:

Adding children to a group block at multiple levels of nesting and making sure that text colour apply to group block is applied to text of children, and that any colour applied to child blocks overrides text colour from parent group block
Adding a group block from existing master branch and then opening/editing/saving to make sure there are no backwards compatibility issues.

If there is approval to proceed with this I will see what automated tests might make sense to add.

Screenshots

Before:

After:

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
[ ] 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.

Fixes Automattic/wp-calypso#37051
Closes #18530

glendaviesnz · 2019-12-16T20:28:15Z

Adding this as a draft PR at this stage to see if there is interest in adding this to core. If there is interest then I will refine this, fix tests, documentation, etc.

glendaviesnz · 2019-12-17T20:07:32Z

On thinking about this further, it is probably better to just go with the same colour setting options as the paragraph block rather than trying to automatically set a contrasting text colour, ie. provide both a text and background colour setting option, and warn the user if a low accessibility colour combination is chosen.

glendaviesnz · 2019-12-18T03:50:58Z

Pushed a revision which just adds a standard text colour selector, and refactors to use useColors instead of withColors. Would be good to get some feedback on:

Whether it is seen as a good idea to be able to set the text colour at the group block level
Whether it is better to just let the user manually do this, or to try and add some auto setting of a contrasting colour if a custom background colour us set

karmatosed · 2019-12-18T12:05:11Z

If I am right the design feedback here would be on whether to expect it to work without someone doing anything? For me, the answer is yes. I think it's fine as you an always go in and adjust yourself. I hope I am understanding this correctly though as to what the exact feedback is needed, if not please let me know.

shaunandrews · 2019-12-18T14:03:26Z

Text color for the group block makes sense to me.

Whether it is better to just let the user manually do this, or to try and add some auto setting of a contrasting colour if a custom background colour us set

Could we do both? Set a light text color if a dark background is select, but also let users choose a custom color - showing the contrast alert if needed.

richtabor · 2019-12-18T14:53:17Z

Just to clarify behavior: If you go add a color to the Paragraph block within a Group block, does that applied color override the Group block's applied TextColor? Or does the Group block's TextColor overrule any subsequently colors applied to text within it?

We've experimented with both applications on CoBlocks, but I lean towards letting subsequent blocks handle their color applications (or better yet, pass down color selections from parent blocks). This way, if you change the nested Paragraph block color, it affects the block itself.

Here's why:

If we went with a behavior where the Group block's TextColor wins every time, you end up with a UX scenario where you do not see the actual text color applied to the paragraph, even though the controls exist.

If we went with a behavior where the Group block's TextColor is secondary to applied colors within nested blocks, you could end up in a UX scenario where if you've applied colors to some nested blocks, but are left not knowing 100% if changing the TextColor on the Group block will actually change the color of the nested blocks.

Either way, it's not a fantastic experience. You actually end up having to mentally double-check that what you're doing will actually accomplish what you're wanting.

ZebulanStanphill · 2019-12-18T15:18:51Z

Logically, I think it makes sense for nested block controls to take precedence over the parent. Similar to how applying CSS styles work, a text color applied to a Paragraph should have a higher priority than the text color applied to its parent block.

I do think text controls on the Group block would be a good idea. It's not DRY (don't repeat yourself) to have to change all the Paragraphs in a section individually. Additionally, there's no guarantee that the nested blocks even have text color options (e.g. the List block currently lacks text color options). Actually, I think a Group block text color control is far more useful than a Paragraph text control.

Additionally, I think that since one of the primary uses of the Group block is to apply regional colors, we could surface both the background and text color options in the toolbar rather than the inspector. Remember that important block controls should not be hidden in the inspector.

shaunandrews · 2019-12-18T15:35:33Z

Similar to how applying CSS styles

Exactly this — it's the cascading bit of CSS. I see it making logical sense, and it maps to an existing pattern outside of Gutenberg (but very fundamental to the web.) Document editors like MS Word also do similar things.

kwight · 2019-12-18T18:26:58Z

This works great @glendaviesnz ; I'd agree with others that adding the text controls and not letting the group block colors to clobber child block settings is the sensical way to go.

It is strange to click into a child block and its colors settings, and to see no active values when there are obviously active values from the group block. I wonder if even a notice similar to the contrast notice could explain to the user "These colors are currently determined by this block's Group Block. Setting colors here will override the Group Block's colors for this block." Uh, or something.

shaunandrews · 2019-12-18T19:59:55Z

Some sort of notice could be helpful. Though, I wonder if we'd have to show something for both background and text color on every child block that inherits colors from a parent? If so, seems like it could get a little too heavy.

mapk · 2019-12-18T22:32:16Z

It makes sense to me for the nested block's color selection to override the Group block's color selection. Maybe we can reduce some of the messaging by the scenario below:

Scenario:
I set the Group block's text color to be red.

If a nested Paragraph block does NOT have text color specified, then the text color turns red changing the nested Paragraph block's text color value to red. This way there's no messaging needed, I just see red as the selected color for my Paragraph block.

If a Paragraph block does have text color specified (green), then it remains green, overriding the Group block's text color. If I were to "clear" this Paragraph's text color, it would automatically inherit the Group block's text color setting.

So in this instance, the Group block's text color just passes that selection down to nested blocks and is reflected there as well. It works like a batch update.

ZebulanStanphill · 2019-12-18T23:14:06Z

@mapk How would that work for multiple levels of nesting? Also, how would that work with blocks that don't already have their own text color option (e.g. List, Latest Posts, etc.)? Also, moving the blocks out of the Group would cause their text color to remain the same as when they were in the Group, which seems wrong to me.

gwwar · 2019-12-18T23:32:57Z

In terms of implementation will we be going with inline styles set on the elements? If so, this should handle cascading properly with arbitrarily nested elements. (Where if a child has a property set, this takes precedence over the parent.

The downside to this though, is that anything else attempting to override styling here would have trouble with the high CSS specificity (no number of classes or ids would be able to override).

glendaviesnz · 2019-12-19T02:54:28Z

Thanks for the great feedback everyone.

The second iteration of this PR works the way most are suggesting it should, ie.

Text colour selected on the group block applies to all child blocks, unless the child block has specified its own colour, in which case this overrides the parent colour
This is handled with default css cascading, so no style attributes are actually added to the child blocks - so if the child block is moved out of the current parent block the text colour will no longer be applied

Because of the fact that no attributes are applied to the children it will be difficult to show an indication that parent text colour styles are being applied without pushing down props through multiple levels of nested children, or some sore of redux plumbing.

It seems like a shame to lose the simplicity of css here, which does the bulk of what we want by default, by adding extra plumbing to show a parents style settings in a child components colour selector.

I am going to suggest that this PR is tidied up to just add the text colour option to the group, so at least people can set a suitable text colour for any background they select without having to manually set it on all the children. Then we could iterate back over this in further PRs to see if this can be easily indicated/messaged in child components, and if suitably contrasting text colours can be auto selected on custom background colour change.

glendaviesnz · 2019-12-19T03:28:18Z

Updated the description to better match the latest iteration and to include some of the feedback to-date.

glendaviesnz · 2019-12-19T03:37:18Z

Whether it is better to just let the user manually do this, or to try and add some auto setting of a contrasting colour if a custom background colour us set

Could we do both? Set a light text color if a dark background is select, but also let users choose a custom color - showing the contrast alert if needed.

Both would certainly be possible, but on looking at it, the new useColors hook seems like a better place to implement an automatic contrasting text selection option, rather than in the groups component specifically, that way it would be available to any component with useColours - have added a note about this to the PR description, in case someone wants to file a follow up issue about this.

glendaviesnz · 2020-01-08T01:16:13Z

@youknowriad, @talldan, @Soean, @ajitbohra, @jorgefilipecosta - before I rebase this PR, and maybe add some tests, are you able to confirm if this is feature that you would want added into core? Thanks.

youknowriad · 2020-01-09T09:24:59Z

I feel like I'm missing context here. This has been discussed I believe when the block was first added. Maybe @getdave @talldan @mtias @kjellr and others could tell us why it wasn't added initially, if it was just left as a follow-up or if there was a strong argument against it.

jasmussen · 2020-01-09T09:36:52Z

For what it's worth, I'm personally more of a fan of adding color controls to containers like this, rather than duplicating the same UI for each individual UI.

…uto set a contrasting colour

glendaviesnz · 2020-01-15T21:14:42Z

I just rebased this, and updated the colorDetector to match the latest version. I have done some testing and it all seems to work as it should. If someone else had time to do some testing and review the code that would be great, thanks 😃

talldan · 2020-01-16T02:16:32Z

I don't recall any specific conversation about this on the original PR.

I had a quick look, but the PR is pretty huge (#13964).

The description mentions it was avoided to keep the original PR small, so probably just that.

mapk · 2020-01-17T02:34:53Z

I'm really stoked with how this is turning out! 👍 Here's a gif of how it looks/works.

glendaviesnz · 2020-01-17T03:38:54Z

I'm really stoked with how this is turning out

Thanks for the detailed testing! People complain about CSS, but this is a scenario where the 'cascade' is our friend 😄

youknowriad

This is looking great for me. Thanks for the addition. I also love the refactor with useColors.

youknowriad · 2020-01-17T09:34:05Z

packages/block-library/src/group/edit.js

-			</div>
+			{ InspectorControlsColorPanel }
+			<BackgroundColor>
+				<TextColor>


It still seems that a single ApplyColors would be better as it's used that way in 90% of the use-cases. cc @epiqueras @jorgefilipecosta

It could be an additional component that's returned from the hook.

richtabor · 2020-01-17T16:22:35Z

👍 Here's a gif of how it looks/works.

Looking good. One question though @mapk: With the gif as a reference, do you think it's confusing that the paragraph text within the group is "green", yet when you open its the Colors panel, the color is not reflected there?

Also, we need to verify these cascading styles are properly reflected on the frontend (using both color classes and custom inline styles).

mapk · 2020-01-17T19:49:46Z

With the gif as a reference, do you think it's confusing that the paragraph text within the group is "green", yet when you open its the Colors panel, the color is not reflected there?

Good question, @richtabor! The interaction here gets tricky. So currently when observing the color settings of the Paragraph block nested inside the Group block, we don't see the green color selected even though the Paragraph block has inherited green from the Group block color setting.

I'm okay with this interaction right now because I think it gets more complex if we choose to show the green selected color setting being pushed to the nested blocks too. Like if I change the Paragraph block to red, and then click to "clear" that color setting, does it default to green again? That doesn't feel like a proper "clear" to me. I'm willing to be persuaded otherwise.

I'd also suggest, that if the color selection does show for the nested blocks, then the nested blocks should keep that color selection when moved outside the Group block as well.

mtias · 2020-01-17T21:28:43Z

The interactions between these levels of color definition is precisely what the work of @ItsJonQ in #19611 aims to address. The "current color" on a paragraph being empty but still reflecting the color of a parent in the UI should be communicated somehow.

glendaviesnz · 2020-01-20T00:49:22Z

The "current color" on a paragraph being empty but still reflecting the color of a parent in the UI should be communicated somehow.

Any thoughts on whether we should merge it as is and circle back on this, or try and resolve this first?

ZebulanStanphill · 2020-01-20T17:00:30Z

I think this is fine to merge as-is.

glendaviesnz · 2020-01-20T21:38:23Z

Doh - apologies for the poor commit message, was focused on the more detailed message and overlooked that the first part was just the original branch name - I won't try a forced push to master just to try and amend this 😄

@pento

* Use Select: Fix render queue. (#19286) * Use Select: Fix render queue issues. * Use Select: Make `isMounted` more informative. * Framework: Reset lockfile changes to dependencies Co-authored-by: Andrew Duthie <andrew@andrewduthie.com> * Project Management: Run pull request automation on closed (#19742) * Try/group block custom text color (#19181) * Add text color selector to group block to allow setting a text colour that applies to all children of the group to avoid having to set text colour on every individual child * Block Editor: Handle LinkControl submission via form handler (#19651) * Block Editor: Handle LinkControl submission via form handler * E2E Tests: Unskip intermittent buttons test failure * Added conditions and new translation strings for BlockMover (#19757) * Added conditions and new translation strings for BlockMover * Moved translator comments into sprintf function * Storybook: Add Placeholder component story (#19734) * Add Placeholder story for storybook * Update storybook test snapshot * Project Management: Fix pull request merge automation errors (#19768) * Framework: Use fixed version of checkout action Avoid unintended breaking changes. To a lesser extent, helps clarify that this tag refers to the _version of the action_, not the branch being checked out. * Framework: Configure PR automation checkout to master branch * Add post requests documentation for apiFetch (#19759) * Multi-select: don't focus first selected block (#19762) * Multi-select: don't focus first selected block * Move CopyHandler outside WritingFlow * Fix click appender * Remove useless line * Update: Readme.txt Link to changelog instead of adding it inline(#19761) * Fix: Media & Text: "Crop image to fill entire column" reset on image change (#19765) * Build: Include JSON files in zip archive (#19772) * Build: Include JSON files * Zip build script: Include json files in `build/block-library/blocks/` Co-Authored-By: Jorge Bernal <jorge@automattic.com> Co-authored-by: Jorge Bernal <jbernal@gmail.com> * Makes appenders visible only for the current selection (#19598) * makes appenders visible only for the current selection * adds smaller footprint to appenders in navigation, only shows them if item has descendants * align appender to level of the menu item, remove useless CSS * Core-data: do not publish outdated state to subscribers during updates (#19752) * Core-data: do not publish outdated state to subscribers during updates Calling `saveEntityRecord` with an update does the following: 1. Calls `getEntityRecord` to fetch the current persisted state of the entity record 2. Calls `receiveEntityRecords` with the new up-to-date state to render the updates 3. Sends an API fetch with the update patch to persist the update 4. Calls `receiveEntityRecords` again with the new up-to-date *persisted* state The issue here, is that point 1 (Calling `getEntityRecord`) not only fetches the persisted state, but it also internally calls `receiveEntityRecords` itself . This results in the persisted outdated server state to be rendered on the UI, causing a flickering effect, that jumps pack when point 2 takes turn. This commit removes the call to getEntityRecord, and instead, it just calls receiveEntityRecords with the local up-to-date state of the entity record. This fixes the flickering issue. * Core-data: update tests to match saveEntityRecord yeilded actions Given `saveEntityRecord` no longer selects `getEntityRecord`, which itself triggers a SELECT action, two SELECTs are no longer yielded. This commit removes the expectation of these two SELECTs. * Core-data: Introduce getEntityRecordNoResolver selector To allow saveEntityRecord access the latest local full version of an entity without issung an API request. This prevents propogating outdating states to subscribers when saveEntityRecord is called. See: #19752 (comment) * Address review comments at #19752: 1. Capitalize alll added comment messages 2. Alias getEntityRecord with getEntityRecordNoResolver instead of copying it 3. Use describe.each instaed of looping manually in selectors tests * Add WordPress primitives package (#19781) * navigation-link: set page id in the attrs (#18641) * Project management: Add step that updates CHANGELOG files before npm releases (#19764) * Navigation Block: Add submenu chevron w/ setting (#19601) * Initialize setting in the nav block settings panel * Add submenu icon * Register "showSubmenuIcon" attributes * Add submenu icon to front-end of the page * Update submenu icon setting description * Don't use <span> for RichText element * Isolate NavigationLink icons * Clean up a little * Use <span> for NavigationLink contents * Rename `$level_zero` to `$is_level_zero` * Add missing spaces * Update submenu icon selector in style.scss * Add comment about span-wrapping * Fix phpcs errors * Remove unused styles * Fix failing e2e tests * Update failing snapshots * Embed: Fix failure placeholder alignment/sizing (#19673) * Fix error message sizing + alignment in Embed Placeholder * Fix Table placeholder input vs button alignment * Adjust spacing between error message and buttons * Fix card component sub-component example code (#19802) * Introduce the Icons package (#17055) * Expose @wordpress/icons to react-native (#19810) * Block popover: allow scrolling over (#19769) * Block popover: allow scrolling over * Clean up * Fix overlapping inserter popover * Better comment * Multi select: keep selection after move (#19784) * Multi select: keep selection after move * Add e2e test * Change e2e test * Address feedback * Fix snapshots * Bump plugin version to 7.3.0 * Navigation: Select parent navigation block on handleCreateFromExistingPages() action (#19817) * Paragraph block: remove dead CSS (#19821) * Bundle the icons package instead of using it as an external (#19809) * Move a dozen of block icons to the icons package (#19808) * Chore: Improve package-lock.json configuration * Add mkevins and pinarol as code owners for gallery block (#19829) * Added shippedProposals (#19065) * Added shippedProposals * Setting shippedProposals during init * Rich text: remove is-selected class (#19822) * Rich text: prefix is-selected class * Adjust more cases * Remove the class * Move more block SVGs to the icons package (#19834) * Block: use context to provide selected element (#19782) * Block: use context to provide selected element * Include multi selection nodes * Add comment * Popover: clean up requestAnimationFrame (#19771) * Popover: clean up requestAnimationFrame * Cancel the last request before a new request * Update: Removed editor store usage from native mobile block ed… (#18794) * Navigation: Manage navigation link appender visibility based on current selection (#19846) Show the navigation link appender when the selected item has descendants and is selected, or if it's the parent of the selected block. * Remove editor dependency from the block library (#16160) * Add AnglePicker Component; Add useDragging hook (#19637) This commit adds a component to pick angles and a hook to make dragging things easier to implement. Some components will be refactored to use the new hook e.g: the custom gradient picker. * Testing: Use deterministic selectors for incremented IDs (#19844) * Innerblock Templates Docs Link Typo Issue Fixed (#19813) * Innerblock Templates Docs Link Typo Issue Fixed * Innerblock Templates Docs Link Typo Issue Fixed * Rich text: enable if multi selection is aborted (#19839) * Block Directory: Refactor the reducer by breaking out the block management actions into their own reducer. (#19330) * Block Directory: Refactory the reducer by break out the block management actions into their own reducer. * Moved hasPermission into its own reducer. * Also remove the 'items' list as it's not being used * Update the getInstalledBlockTypes selector to point to the new reducer that manages installs. * Update typo in test. * Remove the lodash dependency in the selectors. It isn\'t necessary. * Fix panel header styles (#19842) * Move more block icons to the icons package (#19838) * Bump @babel/preset-env to 7.8.3 (Optional Chaining!) (#19831) * Bump babel to 7.8.3 * Added test for optional chaining * Bump other babel packages. * Fix * Changelog Update CHANGELOG.md * Update package-lock.json Co-authored-by: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> * Style improvements for template previews (#19763) * First scaffold for template previews (mobile only) * WIP: managed to make the preview show, saving as a checkpoint - BlockEditorProvider needs an update so it uses the subRegistry - We need a better way to only render the picker on the main block list - We need to make the bottom sheet full height, and adapt the block preview accordingly * Set a fixed height for the template preview * Move template picker to the toolbar * Read only block list * Lint fixes * Made scrolling sort of working with read only block list * A longer template to test scrolling * Replace BottomSheet with Modal for previews * Allow closing previews with back button on Android * Revert changes to BlockList that were required for bottom sheet integration * Revert changes to BottomSheet * Add usage example for ModalHeaderBar * Improve accessibility of template preview * Improve accessibility of ModalHeaderBar * Remove unused imports * Added missing web file * RNMobile - Page template picker: apply layout from the preview * RNMobile - Layout preview: apply action * RNMobile - Page templates - set layout action * Remove mobile action from docs * New components for modal header buttons * Fix alignment of modal header buttons * Fix metrics for iOS modal header * Add subtitle to preview header * Use named color for modal header button * Updated modal title color and weight * Make Apply button bolder on iOS * Make Apply button bolder on iOS * Fix vertical alignment for close button * Allow modal rotation on iOS * Fix modal background on dark mode * Fixed dark mode for template previews * Revert changes to editor store after bad merge * Add material close icon for modal header * Tweak modal title colors * Lint fixes Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> * [RNMobile] Release v1.21.0 to master (#19854) * Adding empty function to RichText children call. (#19818) This fixes a crash originated on this PR: #19536 ` * Disable gallery image size options on mobile (#19828) * Revert "Disable gallery image size options on mobile (#19828)" This reverts commit 47b74aa. Co-authored-by: Matthew Kevins <mkevins@users.noreply.github.com> * Packages: New create-block package for block scaffolding (#19773) * Packages: New create-block package for block scaffolding * Promote action handler to async to make implementation simpler * Pass the prop for selection color. (#19635) * Do not use the deprecated package editor for InnerBlocks component (#19869) * Remove dead is-hovered selectors (#19870) * Move is-navigate-mode class to WritingFlow (#19868) * [RNmobile] Upgrade to RN 0.61.5 (#19369) * `focusable` replaced `clickable See facebook/react-native#25274 * Provide a native colors.native.scss * Upgrade React Native version in Gutenberg web repo * Jest doesn't have hasteImplModulePath anymore * Work around other regressions. Will revert when those fixed * Bump react-native version to 0.61.5 * Update babel-jest to try fixing babel-plugin-jest-hoist jest.mock issue * Update jest to try fixing babel-plugin-jest-hoist jest.mock issue * Pin xmldom to older version to bypass license file ambiguity With newer versions, the license check script doesn't recognise that the package is dual licenced and is reporting it as incompatible. This commit pins the package to an older version. There is no functional difference between the two versions, see xmldom/xmldom@v0.1.27...v0.1.30 * Revert "Provide a native colors.native.scss" This reverts commit b05f1e4. This shouldn't be needed anymore after wordpress-mobile/gutenberg-mobile#1683 * Revert "Pin xmldom to older version to bypass license file ambiguity" This reverts commit 7e3c2b5. * Cater for lowercase OR in licenses types Props to @pento for the solution #19369 (comment) * Update package-lock.json via npm v6.13.6 * Check for the same "or" format as we're splitting Otherwise, the 'or' in `GPL-2.0-or-later` causes an infinite recursion. See error in https://travis-ci.com/WordPress/gutenberg/jobs/278348885. * Update package-lock.json after running run check-local-changes * Fix package-lock.json conflicts by keeping Jest to 24.9.0, Babel to 7.8.3 * Update package-lock by running npm install * Update README.md (#19876) Fix typo * Multi selection: fix intermittent e2e failure (#19865) * Move more block icons to the icons library (#19862) * Paragraph block: remove min-height (#19835) * Paragraph block: remove min-height * Use lineheight to set drop cap min height * Framework: Fix server-registered fixtures script (#19884) * Env: Format run output only for terminal display * Framework: Fix server-registered fixtures script * Testing: Regenerate server-registered fixtures * Testing: Regenerate navigation block fixture * Env: Fix CHANGELOG typo "or" * Shortcode Design Review (#19852) * Update style of shortcode based on design review * Fix title colors * Update component to components in CONTRIBUTING.md (#19914) * Apply sentence case formatting to PanelBody titles (#19901) * Color Settings -> Color settings * Block PanelBody titles: Settings -> settings * Clarify when isEligible function is called (#19899) Added a note that isEligible is only used for valid blocks and is not called for invalid blocks. * Block Editor: Refactor ObserveTyping as function component (#19881) * Block Editor: Refactor ObserveTyping as function component * Block Editor: ObserveTyping: Avoid persisting event * Remove unnecessary import from playground (#19893) * Documentation: Organize Contributors Guide (#19853) * Simplify CONTRIBUTING.md to be just guidelines We don't need to include too much here because the real information for contributing is in the handbook. This page is a standard page for Github repos, so trimming it down to just a few links to sections in the handbook. Plus the policies for code of conduct and GPL. * Add design contribution from CONTRIBUTING.md to design page * Cleanup and organize Contributors Guide * Use consistent Contributors Guide title * Move Principles and catch-all docs to Project Overview section * Switch background to more relevant repository management * Apply suggestions from code review Thanks for the fixes 👍 Co-Authored-By: Chris Van Patten <hello@chrisvanpatten.com> * Fix extra newlines * Standardize on Contributor Guide, matches core handbook * Update manifest Co-authored-by: Chris Van Patten <hello@chrisvanpatten.com> * [RNMobile] Correct isMobile condition in nested Media&Text (#19778) * Correct isMobile condition in nested Media&Text * Do not export BREAKPOINTS * Blocks: Match blocks in the inserter using keywords from patterns (#19243) * Blocks: Match blocks in the inserter using keywords from patterns * Ensure that matched patterns with the search term are marked * Introduce scopes for block patterns * Make it possible to apply initial attributes and inner blocks directly from the inserter * Update block preview in the inserter to use attributes from the variation * Change the way patterns are handled in the inserter * Update packages/block-editor/src/components/block-types-list/index.js Co-Authored-By: Miguel Fonseca <miguelcsf@gmail.com> * Improve the way patterns are added to the inserter * Rename pattern label to patter title to align with block types * Inserter: Don't auto-add block if it has variations Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com> * Block editor: Alt+F10 shouldn't scroll to top (#19896) * Add e2e test * Leave fixed position until position can be set * Multi-selection: fix clearing with side click (#19787) * Multi-selection: fix clearing with side click * Add e2e test * [RNMobile] fix show appender and separator in Group block (#19908) * fix appender to duplicate separator line * Add docs for LocalAutosaveMonitor and __experimentalUpdateLocalAutosaveInterval (#19915) * [RNMobile] Add media edit icon to image block (#19723) * Creates a MediaEdit component that shows a picker * Add Gridicon's customize icon * Show a button in images block that displays a picker * Fix lint issues * Fix no-shadow error * Fix the name of the params * When "Edit" is selected, request the Media Editor * Fix lint issues * Change media editor ID to a constant * When "Replace" is tapped, show all available media options * Fix lint issues * Avoid destructuring * Block Library: Handle Popover onClose for LinkControl (#19885) * Block Library: Handle Popover onClose for LinkControl * E2E Tests: Verify link popover Escape handling * Disable Autocomplete in shortcode block (#19848) * Disable Autocomplete in shortcode block * RichText API: Limit `prefix` transformations to Paragraph (#19727) … and any consumer of RichText that provides experimental prop `__unstableAllowPrefixTransformations.` * Block Editor: LinkControl: Resolve error when undefined value, "view" state (#19856) * Block Editor: LinkControl: Resolve error when undefined value, "view" state * Block Editor: LinkControl: Document only url, title, opensInNewTab value properties * Block Editor: LinkControl: Change documented example to reference known value property * [RNMobile] Revert change to fix Action Sheet (#19934) * Revert "Avoid destructuring" This reverts commit e113310. * Fix the var name * Add background color support to Columns block (#17813) * Add attributes * Update edit function * Update save function * Add .has-background style * Improve has-background and backgroundColor.class checks * Try passing the columns block e2e test * Refactor to use __experimentalUseColors * Normalize has-background padding with variables * Remove extra bit * Fix RTL styling for Media Text block (#18764) * Add proper !rtl ignore comments to maintain styling on RTL * Tweak comment * Add direction: ltr (not ignored) to the content container * change order of composing style in svg primitive (#19927) * Add Prettier formatting script (#18048) * Add Prettier NPM dependency to packages/scripts and top-level * Scripts: export the fromProjectRoot function from scripts/utils module * Scripts: Add Prettier formatting script * ESLint config: use default (linebreak before ternary op) config for operator-linebreak rule * ESLint: disable formatting rules in the recommended config Adds `eslint-config-prettier` to the recommended config and creates an alternative `recommended-with-formatting` config for project that want to keep ESLint formatting rules and opt-out of Prettier. * Scripts: the format-js script checks if Prettier is present and has top-level config Prettier presence in a `wp-scripts`-powered project is optional, and the `format-js` script checks if it's there and if it's indeed the fork (`wp-prettier`). Will report error otherwise. Also, require a top-level Prettier config to be present. We can't default to the one inside `wp-scripts`, because IDE and editor integrations won't find it there and will use the Prettier defaults. * Bump the minimum required version of npm to 6.9.0 * Add ESLint config changes notice to changelog * Update package-lock.json * Regenerate package-lock.json Co-authored-by: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> * Components: FontSizePicker: Adjust Select Button sizing (#19479) * Documentation: fix typo "Th" to "The" (#19833) * [RNMobile] Long-press on inserter to show options for "add above" and "add below" (#18791) * Add onLongPress prop to Button * Show inserter menu on long press * Make onLongPress a prop of toggle * Make withSelect of Inserter return destinationRootClientId * Insert default block before the selected one on long press * Add add canReplaceBlock key to the insertionPoint state * Hide a block in list only if it can be replaced * Move insertion index logic from menu to inserter * Update selector tests for newly added key in state * Add insertionIndexAfter and isAnyBlockSelected props with selector * Update docs for newly added key in state * Add insertionType to component state and map to insertion index * Refactor insertion index logic * Show BottomSheet on long press to choose to insert before or after * Update UI strings to be title case * Hide cancel button from Bottom Sheet on Android * Add icons to Bottom Sheet options on Android * Add “Replace Current Block” option to menu on long-press * Scroll to newly added block if it doesn't trigger keyboard to open * Change “Replace Current Block” menu icon on Android * Use shorter syntax for setState * Rename getShouldReplaceBlock method to shouldReplaceBlock * Revert "Scroll to newly added block if it doesn't trigger keyboard to open" This reverts commit 9c1c71d25eb573427ca09761bd3154286d19539b. * Revert “Add canReplaceBlock key to the insertionPoint state" * Remove Block show/hide logic from BlockList * Update Inserter local state to store block insertion information * Make InserterMenu add/remove unmodified default block during replace * Handle replacing last remaining block * Fix Inserter test * Fix code style issue * Move insertion options into getInsertionOptions function * Add comment about removing last block case * Use findByProps instead of toJSON when testing Inserter * Docs: Add details for format-js to @wordpress/scripts package (#19946) * Docs: Add details for format-js to @wordpress/scripts package * Update README.md * Update packages/eslint-plugin/CHANGELOG.md Co-Authored-By: Marcus Kazmierczak <marcus@mkaz.com> Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com> * Fix: Crash when creating a hierarchical post without title (#19936) * Fix: Color Gradients component was not able to handle only gra… (#19925) * Add markdownlint script to lint docs markup (#19855) * Add markdownlint script to lint docs markup Adds a new script `lint-md-docs` that runs markdownlint to lint markdown files for proper syntax. A default `.markdownlint.json` config is included, it will require some testing to tune. Fixes #12426 * Clarify naming of lint-md scripts js and docs - Updates lint-md scripts to lint-md-js for linting source included in the document and lint-md-docs for linting the markup of the document itself. - Update scripts changelog - Update readme with commands * Apply suggestions from code review Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> * Fix URL for markdownlint CLI * Add -i check, details around ignore on CLI * Check for additional project config files * Update script commands to all for lint:* * Local changes applied to package-lock.json * Update packages/scripts/README.md Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> * Apply suggestions from code review Thanks for the review and updates 👍 Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> Co-authored-by: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> * Use require.resolve() instead of <rootDir> in @wordpress/jest-preset-default (#19957) * use require.resolve() instead of <rootDir> * formatted * added changelog entry (#19958) * Move the insert dashicon to the icons package (#19943) * Replace all occurences of the yes dashicon with the check icon from the icons package (#19926) * Build: Include block.json files in the build output (#19786) * Block Editor: LinkControl: Prevent focus loss in edit mode toggle (#19931) * Block Editor: LinkControl: Prevent focus loss in edit mode toggle * Block Library: Remove custom focus loss protection Previously used effect lifecycle to anticipate and respond to focus loss. Now, focus loss is prevented by LinkControl. See: 722a4d6dec * Block Editor: Rephrase and move forced input rendering comment * Block Editor: Ensure isEndingEditWithFocus always assigned as boolean * Move Alignment, movers and trash icons to the icons package (#19944) * Navigation Block: Move the link description panel below the SEO panel because this is likely to be used signficantly less than the SEO panel. (#19917) * Update hover and focus selectors for Move to Trash to ensure they're always red (#19974) - Updates the selectors in .editor-post-trash to use similar specificity as .components-button.is-link for the hover and focus states to ensure that they are always red. * Create block: Code quality improvements for the block scaffolding (#19867) * Create block: Code quality improvements for the block scaffolding * Improve the strucutre and handling of templates Props to @aduth for the proposal: #19773 (comment). * Ensure that package-lock.json file is refreshed with the changes from master * Docs: Add a note about version and help options * Code style: Run Prettier formatting on the package files * Create block: Align .editorconfig with Gutenberg settings * Fix: Use the description provided to fill the `description` field in `package.json` file in ESNext template * Fix: Ensure that values provided for slug and namespace get converted to lower case * Fix: Simplify the logic for transforming slug to title * Update packages/create-block/lib/templates.js Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> Co-authored-by: Andrew Duthie <andrew@andrewduthie.com> * Code quality: Enable linting for JS files starting with . * Popover: fix typo in removing event listener (#19978) * Eslint Plugin: Lint code formatting. (#19963) * Eslint Plugin: Lint code formatting. * Gutenberg: Add code formatting pre-commit hook. * Eslint Plugin: Update docs. * Gutenberg: Format code. * Storybook: Update snapshots. * [RNMobile] Show the media edit icon only if the block is selected (#19961) * Only shows the media edit icon if the block is selected Also, matches the style of the native gallery block buttons * Fix lint * Fix: Admin menu collapses for 960px width but editor doesn't (#19970) * Chore: Fix differences in package-lock.json file * RichText: try using hooks for wrapper component (#19095) * Components: Apply width-based modifier classes to Placeholder only when width is known (#19825) * Components: Apply `is-small` modifier class to Placeholder only when width known * E2E Tests: Wait for placeholder error display in embed tests * Testing: Update snapshots for Placeholder class assignment * Eslint: set line width to 80 (#19992) * Update config * npm run lint-js:fix * Move eslint comments * Update snapshots * Editor: Remove post title escaping (#19955) * Add: Global styles css variables generation mechanism (#19883) * Navigation: Change UX to move focus to navigation link label and close the LinkControl (#19686) * When adding a link via the LinkControl, selects/highlights nav link label text if it's url-like. Focuses if not. Automatically adds url-like labels as the label. * Adds @wordpress/dom to package-lock.json * Removed test for awaiting for Link Control focus after pressing Enter, as the focus should now be on the navigation link text with the Link Control closed * Lib: Limit `pre_render_block` extension. (#19989) * Lib: Limit `pre_render_block` extension. * Update lib/compat.php Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> Co-authored-by: Andrew Duthie <andrew@andrewduthie.com> * Fix, update, and sort _rc_ `hasProjectFile` filenames (#19994) * Update and fix `hasProjectFile` filenames * Sort `hasProjectFile` filenames * Update CHANGELOG.md * Docs: Include CHANGELOG entries from the relocated create-wordpress-block package * Blocks: Rename patterns to variations in the Block API (#19966) * Blocks: Rename patterns to variations in the Block API * Fix: Remove ESLint errors and warnings related to block variations * [Mobile] Fix gallery upload sync (#19941) * Invoke mediaUploadSync for gallery in React hook * Use integer type explicitly for gallery image id * Set state before attributes on upload success in gallery image * Use ref hook for concurrency in media placeholder * Extract dedup function and add comments in media placeholder * Fix lint * Use explicit radix with parseInt Co-Authored-By: Gerardo Pacheco <gerardo.pacheco@automattic.com> * Import useRef from @wordpress/element * Fix lint * Fix lint / prettier Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> * [Mobile] Fix blank image size labels on mobile (#19800) (#20045) * Fix blank image size labels on mobile * Use name instead of label in default imageSizes * [RNMobile] Enable Dismiss on PlainText in Android (#20095) * Add flag for determining if running on Android * Enable Dismiss button on PlainText. Enable show keyboard in Android on PlainText mount * Enable Dismiss button on PlainText. Enable show keyboard in Android on PlainText mount Co-authored-by: Enrique Piqueras <epiqueras@users.noreply.github.com> Co-authored-by: Andrew Duthie <andrew@andrewduthie.com> Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com> Co-authored-by: Christopher Reece <momotofu@users.noreply.github.com> Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com> Co-authored-by: Ella van Durpe <ella@automattic.com> Co-authored-by: Jorge Costa <jorge.costa@developer.pt> Co-authored-by: Bernie Reiter <ockham@raz.or.at> Co-authored-by: Jorge Bernal <jbernal@gmail.com> Co-authored-by: andrei draganescu <me@andreidraganescu.info> Co-authored-by: Omar Alshaker <omar@omaralshaker.com> Co-authored-by: Riad Benguella <benguella@gmail.com> Co-authored-by: Damián Suárez <rdsuarez@gmail.com> Co-authored-by: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com> Co-authored-by: Jon Quach <hello@jonquach.com> Co-authored-by: Edi Amin <to.ediamin@gmail.com> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com> Co-authored-by: Matthew Kevins <mkevins@users.noreply.github.com> Co-authored-by: Abdelmajid HAMDANI <abdel.hamdani213@gmail.com> Co-authored-by: Delowar Hossain <delowardev@gmail.com> Co-authored-by: Steven Dufresne <steve.dufresne@automattic.com> Co-authored-by: Adam Boro <adam@adamboro.com> Co-authored-by: Kukhyeon Heo <sainthkh@naver.com> Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> Co-authored-by: etoledom <etoledom@icloud.com> Co-authored-by: Sérgio Estêvão <sergioestevao@gmail.com> Co-authored-by: Florian TIAR <florian.tiar@theculturetrip.com> Co-authored-by: Chip <chip.snyder3@gmail.com> Co-authored-by: Haz <hazdiego@gmail.com> Co-authored-by: Rich Tabor <hello@themebeans.com> Co-authored-by: Benjamin Intal <bfintal@gmail.com> Co-authored-by: Rostislav Wolný <rwolny@gmail.com> Co-authored-by: Chris Van Patten <hello@chrisvanpatten.com> Co-authored-by: Luke Walczak <lukasz.walczak.pwr@gmail.com> Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com> Co-authored-by: jbinda <jakub.binda@gmail.com> Co-authored-by: Leandro Alonso <contato@leandroalonso.com> Co-authored-by: Jarda Snajdr <jsnajdr@gmail.com> Co-authored-by: Martin Posselt <nekomajin@gmx.de> Co-authored-by: Ceyhun Ozugur <ceyhunozugur@gmail.com> Co-authored-by: James Newell <jameslnewell@users.noreply.github.com> Co-authored-by: Andy Peatling <apeatling@users.noreply.github.com> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Stephen Edgar <stephen@netweb.com.au>

glendaviesnz added [Type] Enhancement A suggestion for improvement. [Block] Group Affects the Group Block labels Dec 16, 2019

glendaviesnz self-assigned this Dec 16, 2019

glendaviesnz requested a review from youknowriad December 16, 2019 20:28

glendaviesnz force-pushed the try/group-block-custom-text-color branch from efae31d to 92b9e6f Compare December 18, 2019 03:39

youknowriad requested a review from jasmussen December 18, 2019 09:09

youknowriad added the Needs Design Feedback Needs general design feedback. label Dec 18, 2019

shaunandrews mentioned this pull request Dec 18, 2019

Add background color support to Columns block #17813

Merged

4 tasks

glendaviesnz changed the title ~~[WIP] Try/group block custom text color~~ Try/group block custom text color Dec 19, 2019

glendaviesnz marked this pull request as ready for review December 19, 2019 03:28

glendaviesnz requested review from ajitbohra, jorgefilipecosta, Soean and talldan as code owners December 19, 2019 03:28

Glen Davies added 5 commits January 16, 2020 08:53

Add text color selector to group block if custom background color set

e880784

Allow setting of custom text color if custom background color set

5112bc5

Remove broken custom text color selection

98f48a1

Tidy up

a8b38a2

Switch to just manually selecting text colour rather than trying to a…

6ccbe20

…uto set a contrasting colour

glendaviesnz force-pushed the try/group-block-custom-text-color branch from 92b9e6f to 6ccbe20 Compare January 15, 2020 20:49

Fix color detection

55a808b

youknowriad requested review from epiqueras and getdave January 16, 2020 09:04

youknowriad approved these changes Jan 17, 2020

View reviewed changes

youknowriad reviewed Jan 17, 2020

View reviewed changes

glendaviesnz merged commit 5ba3976 into master Jan 20, 2020

glendaviesnz deleted the try/group-block-custom-text-color branch January 20, 2020 21:04

glendaviesnz mentioned this pull request Jan 22, 2020

Colour contrast checker fails on nested blocks #13862

Closed

epiqueras added this to the Gutenberg 7.4 milestone Feb 3, 2020

talldan mentioned this pull request Feb 11, 2020

Fix group block editor block class name #20164

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try/group block custom text color #19181

Try/group block custom text color #19181

glendaviesnz commented Dec 16, 2019 •

edited by talldan

Loading

glendaviesnz commented Dec 16, 2019

glendaviesnz commented Dec 17, 2019

glendaviesnz commented Dec 18, 2019

karmatosed commented Dec 18, 2019

shaunandrews commented Dec 18, 2019

richtabor commented Dec 18, 2019

ZebulanStanphill commented Dec 18, 2019

shaunandrews commented Dec 18, 2019

kwight commented Dec 18, 2019

shaunandrews commented Dec 18, 2019

mapk commented Dec 18, 2019 •

edited

Loading

ZebulanStanphill commented Dec 18, 2019

gwwar commented Dec 18, 2019

glendaviesnz commented Dec 19, 2019 •

edited

Loading

glendaviesnz commented Dec 19, 2019

glendaviesnz commented Dec 19, 2019 •

edited

Loading

glendaviesnz commented Jan 8, 2020

youknowriad commented Jan 9, 2020

jasmussen commented Jan 9, 2020

glendaviesnz commented Jan 15, 2020

talldan commented Jan 16, 2020

mapk commented Jan 17, 2020

glendaviesnz commented Jan 17, 2020 •

edited

Loading

youknowriad left a comment

youknowriad Jan 17, 2020

epiqueras Jan 17, 2020

richtabor commented Jan 17, 2020

mapk commented Jan 17, 2020 •

edited

Loading

mtias commented Jan 17, 2020

glendaviesnz commented Jan 20, 2020

ZebulanStanphill commented Jan 20, 2020

glendaviesnz commented Jan 20, 2020

Try/group block custom text color #19181

Try/group block custom text color #19181

Conversation

glendaviesnz commented Dec 16, 2019 • edited by talldan Loading

Description

How has this been tested?

Screenshots

Checklist:

glendaviesnz commented Dec 16, 2019

glendaviesnz commented Dec 17, 2019

glendaviesnz commented Dec 18, 2019

karmatosed commented Dec 18, 2019

shaunandrews commented Dec 18, 2019

richtabor commented Dec 18, 2019

ZebulanStanphill commented Dec 18, 2019

shaunandrews commented Dec 18, 2019

kwight commented Dec 18, 2019

shaunandrews commented Dec 18, 2019

mapk commented Dec 18, 2019 • edited Loading

ZebulanStanphill commented Dec 18, 2019

gwwar commented Dec 18, 2019

glendaviesnz commented Dec 19, 2019 • edited Loading

glendaviesnz commented Dec 19, 2019

glendaviesnz commented Dec 19, 2019 • edited Loading

glendaviesnz commented Jan 8, 2020

youknowriad commented Jan 9, 2020

jasmussen commented Jan 9, 2020

glendaviesnz commented Jan 15, 2020

talldan commented Jan 16, 2020

mapk commented Jan 17, 2020

glendaviesnz commented Jan 17, 2020 • edited Loading

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad Jan 17, 2020

Choose a reason for hiding this comment

epiqueras Jan 17, 2020

Choose a reason for hiding this comment

richtabor commented Jan 17, 2020

mapk commented Jan 17, 2020 • edited Loading

mtias commented Jan 17, 2020

glendaviesnz commented Jan 20, 2020

ZebulanStanphill commented Jan 20, 2020

glendaviesnz commented Jan 20, 2020

glendaviesnz commented Dec 16, 2019 •

edited by talldan

Loading

mapk commented Dec 18, 2019 •

edited

Loading

glendaviesnz commented Dec 19, 2019 •

edited

Loading

glendaviesnz commented Dec 19, 2019 •

edited

Loading

glendaviesnz commented Jan 17, 2020 •

edited

Loading

mapk commented Jan 17, 2020 •

edited

Loading