Skip to content

Commit 5788e42

Browse files
HardeepAsraniHardeepAsrani
authored
Merge pull request #1449 from Codeinwp/fix/issue-1440
Manage text color for Dark Backgrounds
2 parents cb0854c + e598442 commit 5788e42

File tree

34 files changed

+211
-566
lines changed

34 files changed

+211
-566
lines changed

‎src/blocks/blocks/accordion/group/edit.js

+8
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,20 @@ import { useSelect } from '@wordpress/data';
2424
*/
2525
import metadata from './block.json';
2626
import Inspector from './inspector.js';
27+
2728
import {
2829
blockInit,
2930
getDefaultValueByField,
3031
useCSSNode
3132
} from '../../../helpers/block-utility.js';
33+
3234
import {
3335
boxValues,
3436
hex2rgba
3537
} from '../../../helpers/helper-functions';
3638

39+
import { useDarkBackground } from '../../../helpers/utility-hooks.js';
40+
3741
// @ts-ignore
3842
import faIcons from '../../../../../assets/fontawesome/fa-icons.json';
3943

@@ -147,6 +151,10 @@ const Edit = ({
147151
}
148152
}, [ attributes.fontFamily ]);
149153

154+
useDarkBackground( getValue( 'titleBackground' ), attributes, setAttributes, 'has-dark-title-bg' );
155+
useDarkBackground( getValue( 'activeTitleBackground' ), attributes, setAttributes, 'has-dark-active-title-bg' );
156+
useDarkBackground( getValue( 'contentBackground' ), attributes, setAttributes, 'has-dark-content-bg' );
157+
150158
const blockProps = useBlockProps({
151159
id: attributes.id,
152160
className: classnames({

‎src/blocks/blocks/accordion/style.scss

+14-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,20 @@
1212
--box-shadow: none;
1313

1414
--padding: 18px 24px 18px 24px;
15-
--padding-tablet: var(--padding);
16-
--padding-mobile: var(--padding-tablet);
15+
--padding-tablet: var( --padding );
16+
--padding-mobile: var( --padding-tablet );
17+
18+
&.has-dark-title-bg {
19+
--title-color: #FFF;
20+
}
21+
22+
&.has-dark-active-title-bg {
23+
--title-color: #FFF;
24+
}
25+
26+
&.has-dark-content-bg {
27+
color: #FFF;
28+
}
1729

1830
&-item {
1931
box-shadow: var(--box-shadow);

‎src/blocks/blocks/advanced-heading/edit.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@ import Inspector from './inspector.js';
3535
import googleFontsLoader from '../../helpers/google-fonts.js';
3636
import { boxValues, _cssBlock, _px } from '../../helpers/helper-functions';
3737
import { makeBox } from '../../plugins/copy-paste/utils';
38-
import { useResponsiveAttributes } from '../../helpers/utility-hooks';
38+
import {
39+
useDarkBackground,
40+
useResponsiveAttributes
41+
} from '../../helpers/utility-hooks.js';
3942

4043
const { attributes: defaultAttributes } = metadata;
4144

@@ -58,14 +61,14 @@ const Edit = ({
5861
return () => unsubscribe( attributes.id );
5962
}, [ attributes.id ]);
6063

64+
useDarkBackground( attributes.backgroundColor, attributes, setAttributes );
6165

6266
const changeContent = value => {
6367
setAttributes({ content: value });
6468
};
6569

6670
const { responsiveGetAttributes } = useResponsiveAttributes( setAttributes );
6771

68-
6972
const oldPaddingDesktop = 'unlinked' === attributes.paddingType ? ({
7073
top: _px( attributes.paddingTop ) ?? '0px',
7174
bottom: _px( attributes.paddingBottom ) ?? '0px',

‎src/blocks/blocks/advanced-heading/style.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ span.wp-block-themeisle-blocks-advanced-heading {
33
}
44

55
.wp-block-themeisle-blocks-advanced-heading {
6-
76
--padding: 0px;
87
--padding-tablet: var(--padding);
98
--padding-mobile: var(--padding-tablet);
@@ -20,6 +19,9 @@ span.wp-block-themeisle-blocks-advanced-heading {
2019
margin: var(--margin);
2120
text-align: var(--text-align);
2221

22+
&.has-dark-bg {
23+
color: #fff;
24+
}
2325

2426
@media ( min-width: 600px ) and ( max-width: 960px ) {
2527
padding: var(--padding-tablet);

‎src/blocks/blocks/flip/edit.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,10 @@ import {
3737
import { boxToCSS, getChoice, mergeBoxDefaultValues, stringToBox, _px } from '../../helpers/helper-functions.js';
3838
import { isNumber } from 'lodash';
3939
import { type FlipProps } from './types';
40-
import { type BoxType } from '../../helpers/blocks';
41-
import { useResponsiveAttributes } from '../../helpers/utility-hooks';
40+
import {
41+
useDarkBackground,
42+
useResponsiveAttributes
43+
} from '../../helpers/utility-hooks.js';
4244

4345
const { attributes: defaultAttributes } = metadata;
4446

@@ -58,11 +60,12 @@ const Edit = ({
5860
return () => unsubscribe( attributes.id );
5961
}, [ attributes.id ]);
6062

63+
useDarkBackground( 'color' === attributes.frontBackgroundType && attributes.frontBackgroundColor, attributes, setAttributes, 'has-dark-front-bg' );
64+
useDarkBackground( 'color' === attributes.backBackgroundType && attributes.backBackgroundColor, attributes, setAttributes, 'has-dark-back-bg' );
65+
6166
const [ currentSide, setSide ] = useState( 'front' );
6267

63-
const {
64-
responsiveGetAttributes
65-
} = useResponsiveAttributes( setAttributes );
68+
const { responsiveGetAttributes } = useResponsiveAttributes( setAttributes );
6669

6770
const getShadowColor = () => {
6871
if ( attributes.boxShadowColor ) {

‎src/blocks/blocks/flip/style.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,16 @@
2323
margin-left: auto;
2424
margin-right: auto;
2525
height: var( --height );
26-
2726
perspective: 1000px; /* Remove this if you don't want the 3D effect */
2827

28+
&.has-dark-front-bg {
29+
color: #fff;
30+
}
31+
32+
&.has-dark-back-bg {
33+
color: #fff;
34+
}
35+
2936
// &[class^="block-editor"] {
3037
// width: auto;
3138
// }

‎src/blocks/blocks/icon-list/inspector.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -197,20 +197,20 @@ const Inspector = ({
197197
value: attributes.defaultIconColor,
198198
onChange: defaultIconColor => setAttributes({ defaultIconColor }),
199199
label: __( 'Icon', 'otter-blocks' ),
200-
isShownByDefault: false
200+
isShownByDefault: true
201201
},
202202
{
203203
value: attributes.defaultContentColor,
204204
onChange: defaultContentColor => setAttributes({ defaultContentColor }),
205205
label: __( 'Text', 'otter-blocks' ),
206-
isShownByDefault: false
206+
isShownByDefault: true
207207
},
208208
...( attributes.hasDivider ? [
209209
{
210210
value: attributes.dividerColor,
211211
onChange: dividerColor => setAttributes({ dividerColor }),
212212
label: __( 'Divider', 'otter-blocks' ),
213-
isShownByDefault: false
213+
isShownByDefault: true
214214
}
215215
] : [])
216216
] }

‎src/blocks/blocks/icon-list/item/inspector.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,14 @@ const Inspector = ({
7272
value: attributes.contentColor,
7373
onChange: contentColor => setAttributes({ contentColor }),
7474
label: __( 'Content Color', 'otter-blocks' ),
75-
isShownByDefault: false
75+
isShownByDefault: true
7676
},
7777
...( 'image' !== attributes.library ? [
7878
{
7979
value: attributes.iconColor,
8080
onChange: iconColor => setAttributes({ iconColor }),
8181
label: __( 'Icon Color', 'otter-blocks' ),
82-
isShownByDefault: false
82+
isShownByDefault: true
8383
}
8484
] : [])
8585
] }

‎src/blocks/blocks/popup/edit.js

+3
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import metadata from './block.json';
3535
import Inspector from './inspector.js';
3636
import { blockInit, useCSSNode } from '../../helpers/block-utility';
3737
import { boxValues, _cssBlock } from '../../helpers/helper-functions';
38+
import { useDarkBackground } from '../../helpers/utility-hooks.js';
3839

3940
const { attributes: defaultAttributes } = metadata;
4041
const makeBox = x => ({ top: x, bottom: x, left: x, right: x });
@@ -127,6 +128,8 @@ const Edit = ({
127128
attributes.verticalPositionMobile
128129
]);
129130

131+
useDarkBackground( attributes.backgroundColor, attributes, setAttributes );
132+
130133
const blockProps = useBlockProps({
131134
id: attributes.id,
132135
style: inlineStyles,

‎src/blocks/blocks/popup/style.scss

+4
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ $base-index: 99999 !default;
2424
--padding-mobile: var(--padding-tablet);
2525
--box-shadow: unset;
2626

27+
&.has-dark-bg {
28+
color: #fff;
29+
--close-color: #fff;
30+
}
2731

2832
&.is-front {
2933
display: none;

‎src/blocks/blocks/posts/edit.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@ import {
4646
getCustomPostTypeSlugs,
4747
hex2rgba
4848
} from '../../helpers/helper-functions.js';
49-
import { useResponsiveAttributes } from '../../helpers/utility-hooks.js';
49+
import {
50+
useDarkBackground,
51+
useResponsiveAttributes
52+
} from '../../helpers/utility-hooks.js';
5053
import '../../components/store/index.js';
5154
import FeaturedPost from './components/layout/featured.js';
5255

@@ -130,6 +133,8 @@ const Edit = ({
130133
dispatch( 'otter-store' ).setPostsSlugs( slugs );
131134
}, [ slugs ]);
132135

136+
useDarkBackground( attributes.backgroundColor, attributes, setAttributes );
137+
133138
const getValue = field => getDefaultValueByField({ name, field, defaultAttributes, attributes });
134139

135140
const imageBoxShadow = getValue( 'imageBoxShadow' );

‎src/blocks/blocks/posts/style.scss

+4
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141

4242
border: none;
4343

44+
&.has-dark-bg {
45+
--text-color: #fff;
46+
}
47+
4448
&.is-style-boxed {
4549
--border-width: 3px;
4650

‎src/blocks/blocks/review/edit.js

+6
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,20 @@ import {
3535
*/
3636
import metadata from './block.json';
3737
import Inspector from './inspector.js';
38+
3839
import {
3940
check,
4041
close,
4142
StarFilled
4243
} from '../../helpers/icons.js';
44+
4345
import {
4446
blockInit,
4547
getDefaultValueByField
4648
} from '../../helpers/block-utility.js';
4749

50+
import { useDarkBackground } from '../../helpers/utility-hooks.js';
51+
4852
const { attributes: defaultAttributes } = metadata;
4953

5054
const px = value => value ? `${ value }px` : value;
@@ -113,6 +117,8 @@ const Edit = ({
113117

114118
const getValue = field => getDefaultValueByField({ name, field, defaultAttributes, attributes });
115119

120+
useDarkBackground( getValue( 'backgroundColor' ), attributes, setAttributes );
121+
116122
const overallRatings = ( attributes.features.reduce( ( accumulator, feature ) => accumulator + feature.rating, 0 ) / attributes.features.length ).toFixed( 1 );
117123

118124
const changeFeature = ( index, value ) => {

‎src/blocks/blocks/review/style.scss

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484
}
8585
}
8686

87+
&.has-dark-bg {
88+
--text-color: #FFF;
89+
}
90+
8791
.o-review {
8892
&__header {
8993
background: var( --background-color );

‎src/blocks/blocks/section/column/edit.js

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
getDefaultValueByField
3939
} from '../../../helpers/block-utility.js';
4040
import { _cssBlock } from '../../../helpers/helper-functions';
41+
import { useDarkBackground } from '../../../helpers/utility-hooks.js';
4142

4243
const { attributes: defaultAttributes } = metadata;
4344

@@ -130,6 +131,8 @@ const Edit = ({
130131
}
131132
}, [ isSelected, attributes.columnWidth, parentBlock.innerBlocks.length ]);
132133

134+
useDarkBackground( 'color' === attributes.backgroundType && attributes.backgroundColor, attributes, setAttributes );
135+
133136
const currentBlockWidth = useRef( attributes.columnWidth );
134137
const nextBlock = useRef( adjacentBlockClientId && adjacentBlockClientId );
135138
const nextBlockWidth = useRef( adjacentBlock && adjacentBlock.attributes.columnWidth );

‎src/blocks/blocks/section/columns/edit.js

+3
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import {
5555
} from '../../../helpers/block-utility.js';
5656
import { columnsIcon as icon } from '../../../helpers/icons.js';
5757
import { _cssBlock } from '../../../helpers/helper-functions';
58+
import { useDarkBackground } from '../../../helpers/utility-hooks.js';
5859

5960
const { attributes: defaultAttributes } = metadata;
6061

@@ -166,6 +167,8 @@ const Edit = ({
166167
}
167168
}, [ attributes.columns ]);
168169

170+
useDarkBackground( 'color' === attributes.backgroundType && attributes.backgroundColor, attributes, setAttributes );
171+
169172
const getValue = field => getDefaultValueByField({ name, field, defaultAttributes, attributes });
170173

171174
// +-------------------------------- SCREEN SIZE --------------------------------+

‎src/blocks/blocks/section/editor.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[la
1313
display: flex;
1414
transition: 0.3s;
1515

16+
&.has-dark-bg {
17+
color: #fff;
18+
}
19+
1620
> .innerblocks-wrap {
1721
flex-basis: 100%;
1822
width: 100%;
@@ -36,6 +40,10 @@ html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[la
3640
.wp-block-themeisle-blocks-advanced-columns {
3741
max-width: unset;
3842
}
43+
44+
&.has-dark-bg {
45+
color: #fff;
46+
}
3947
}
4048
}
4149
}
@@ -64,7 +72,7 @@ html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[la
6472
position: relative;
6573
}
6674

67-
a:not( .wp-block-button__link ) {
75+
a:not( .wp-block-button__link ):not( .social-icon ) {
6876
color: var( --link-color );
6977
}
7078

‎src/blocks/blocks/section/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useEffect } from '@wordpress/element';
5+
16
/**
27
* Advanced Columns Block
38
*/

‎src/blocks/blocks/section/style.scss

+8
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@ html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[la
8282
margin-left: auto;
8383
margin-right: auto;
8484
}
85+
86+
&.has-dark-bg {
87+
color: #fff;
88+
}
8589
}
8690

8791
&.has-default-gap {
@@ -125,6 +129,10 @@ html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[la
125129
margin-right: 30px;
126130
}
127131
}
132+
133+
&.has-dark-bg {
134+
color: #fff;
135+
}
128136
}
129137

130138
@media ( min-width: 960px ) {

0 commit comments

Comments
 (0)