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

Fix Custom Palette colors and support multiple origins and theme cache issues. #38417

Merged
merged 26 commits into from
Feb 16, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
cb5688b
Mobile - Rich Text - Validate link colors before passing an invalid o…
Feb 1, 2022
dfae6b5
Remove unneeded check
Feb 1, 2022
fc0acd8
Mobile - Global styles - Parse custom palette colors e.g var:preset|c…
Feb 2, 2022
f1cd335
Mobile - Global styles - Update tests to take into account custom colors
Feb 2, 2022
70a915f
Mobile - Adds useMobileGlobalStylesColors hook to get global styles p…
Feb 2, 2022
345c1bb
Mobile - Update Cover and Global styles test
Feb 2, 2022
8752124
Mobile - Cover - Use memo for the inline color palette
Feb 2, 2022
b542e4e
Mobile - Cover - Revert test change due to colors update
Feb 2, 2022
d1c367e
Merge branch 'trunk' into rnmobile/fix/invalid-link-colors
Feb 7, 2022
520a9fd
Mobile - Add support for multiple color palettes and gradients includ…
Feb 8, 2022
4c57595
Mobile - Rich Text - Simply color palettes merge
Feb 8, 2022
a9cae49
Mobile - Global styles - Enable default palette and default gradients…
Feb 8, 2022
069787a
Mobile - Update CHANGELOG
Feb 8, 2022
71b728a
Mobile - Global styles utils - Update test with default values
Feb 8, 2022
89db02a
Merge branch 'trunk' into rnmobile/fix/invalid-link-colors
Feb 8, 2022
6612e73
Mobile - Provider - Fix replacing previous colors on settings update
Feb 8, 2022
982646a
Mobile - Enable text and color settings since we are providing defaul…
Feb 8, 2022
db59028
Mobile - Android - Fix issue where a restart was needed to load the t…
Feb 8, 2022
4dec4ac
Mobile - Reset Global styles base styles for standard themes. Fixes s…
Feb 8, 2022
586f06f
Mobile - Palette screen - Add top and bottom padding for the containe…
Feb 10, 2022
15598a0
Mobile - Bottom sheet navigation screen - Add missing dependencies in…
Feb 11, 2022
5de5d67
Mobile - Global styles - useMobileGlobalStylesColors: use the type to…
Feb 11, 2022
9eb0f97
Mobile - Provider - Always return getColorsAndGradients if it's not a…
Feb 11, 2022
94ab4c3
Mobile - Global styles - Enable default color/gradient palette if its…
Feb 14, 2022
b0dcea0
Merge branch 'trunk' into rnmobile/fix/invalid-link-colors
Feb 14, 2022
01a8ad9
Mobile - Global styles - Set default values for defaultEditor colors …
Feb 15, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 0 additions & 24 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -737,30 +737,6 @@ _Returns_

- `any`: Returns the value defined for the setting.

### validateThemeColors

Given an array of theme colors checks colors for validity

_Parameters_

- _colors_ `Array`: The array of theme colors

_Returns_

- `Array`: The array of valid theme colors or the default colors

### validateThemeGradients

Given an array of theme gradients checks gradients for validity

_Parameters_

- _gradients_ `Array`: The array of theme gradients

_Returns_

- `Array`: The array of valid theme gradients or the default gradients

### Warning

_Related_
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Component, createRef, useMemo } from '@wordpress/element';
import {
GlobalStylesContext,
getMergedGlobalStyles,
useMobileGlobalStylesColors,
alignmentHelpers,
useGlobalStyles,
} from '@wordpress/components';
Expand Down Expand Up @@ -50,7 +51,7 @@ function BlockForType( {
blockWidth,
baseGlobalStyles,
} ) {
const defaultColors = useSetting( 'color.palette' ) || emptyArray;
const defaultColors = useMobileGlobalStylesColors();
const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
const globalStyle = useGlobalStyles();
const mergedStyle = useMemo( () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
/**
* WordPress dependencies
*/
import { InspectorControls, useSetting } from '@wordpress/block-editor';
import {
InspectorControls,
useMultipleOriginColorsAndGradients,
} from '@wordpress/block-editor';
import {
BottomSheet,
ColorSettings,
Expand All @@ -28,13 +31,9 @@ export const blockSettingsScreens = {
function BottomSheetSettings( {
editorSidebarOpened,
closeGeneralSidebar,
settings,
...props
} ) {
const colorSettings = {
colors: useSetting( 'color.palette' ) || settings.colors,
gradients: useSetting( 'color.gradients' ) || settings.gradients,
};
const colorSettings = useMultipleOriginColorsAndGradients();

return (
<BottomSheet
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export { default as useSetting } from './use-setting';
export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
export { default as Warning } from './warning';
export { default as ContrastChecker } from './contrast-checker';
export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';

export {
BottomSheetSettings,
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/utils/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export { default as transformStyles } from './transform-styles';
export * from './theme';
export * from './block-variation-transforms';
export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
48 changes: 0 additions & 48 deletions packages/block-editor/src/utils/theme.js

This file was deleted.

6 changes: 3 additions & 3 deletions packages/block-library/src/button/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
getColorObjectByAttributeValues,
getGradientValueBySlug,
__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
useSetting,
} from '@wordpress/block-editor';
import {
PanelBody,
Expand All @@ -29,6 +28,7 @@ import {
BottomSheetSelectControl,
CSS_UNITS,
filterUnitsWithSettings,
useMobileGlobalStylesColors,
} from '@wordpress/components';
import { link } from '@wordpress/icons';
import { store as editPostStore } from '@wordpress/edit-post';
Expand Down Expand Up @@ -118,8 +118,8 @@ function ButtonEdit( props ) {
const [ borderRadiusUnit, setBorderRadiusUnit ] = useState( valueUnit );

const richTextRef = useRef();
const colors = useSetting( 'color.palette' ) || [];
const gradients = useSetting( 'color.gradients' ) || [];
const colors = useMobileGlobalStylesColors();
const gradients = useMobileGlobalStylesColors( 'gradients' );

useEffect( () => {
if ( isSelected ) {
Expand Down
22 changes: 15 additions & 7 deletions packages/block-library/src/cover/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
ColorPicker,
BottomSheetConsumer,
useConvertUnitToMobile,
useMobileGlobalStylesColors,
} from '@wordpress/components';
import {
BlockControls,
Expand All @@ -43,12 +44,17 @@ import {
getColorObjectByColorValue,
getColorObjectByAttributeValues,
getGradientValueBySlug,
useSetting,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { useEffect, useState, useRef, useCallback } from '@wordpress/element';
import {
useEffect,
useState,
useRef,
useCallback,
useMemo,
} from '@wordpress/element';
import { cover as icon, replace, image, warning } from '@wordpress/icons';
import { getProtocol } from '@wordpress/url';
import { store as editPostStore } from '@wordpress/edit-post';
Expand Down Expand Up @@ -142,11 +148,13 @@ const Cover = ( {
const isImage = backgroundType === MEDIA_TYPE_IMAGE;

const THEME_COLORS_COUNT = 4;
const colorsDefault = useSetting( 'color.palette' ) || [];
const coverDefaultPalette = {
colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
};
const gradients = useSetting( 'color.gradients' ) || [];
const colorsDefault = useMobileGlobalStylesColors();
const coverDefaultPalette = useMemo( () => {
return {
colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
};
}, [ colorsDefault ] );
const gradients = useMobileGlobalStylesColors( 'gradients' );
const gradientValue =
customGradient || getGradientValueBySlug( gradients, gradient );
const overlayColorValue = getColorObjectByAttributeValues(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import {
getGradientValueBySlug,
getGradientSlugByValue,
__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
useSetting,
} from '@wordpress/block-editor';
import { useMemo } from '@wordpress/element';
import { useMobileGlobalStylesColors } from '@wordpress/components';

function OverlayColorSettings( {
overlayColor,
Expand All @@ -23,9 +23,8 @@ function OverlayColorSettings( {
customGradient,
setAttributes,
} ) {
const EMPTY_ARRAY = [];
const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
const colors = useMobileGlobalStylesColors();
const gradients = useMobileGlobalStylesColors( 'gradients' );

const gradientValue =
customGradient || getGradientValueBySlug( gradients, gradient );
Expand Down
Loading