Skip to content

Commit 70e9454

Browse files
arunshenoy99arunshenoy99
authored
Merge pull request #230 from newfold-labs/enhance/cloudflare-images-features
Fallback to old functionality if capabilities do not exist
2 parents 30f5dcc + f371c15 commit 70e9454

File tree

11 files changed

+247
-165
lines changed

11 files changed

+247
-165
lines changed

‎includes/Cloudflare/CloudflareFeaturesManager.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ private function update_htaccess_header( $image_settings, $fonts_enabled ) {
7777
$polish_hash = $polish_enabled ? substr( sha1( 'polish' ), 0, 8 ) : '';
7878
$fonts_hash = $fonts_enabled_flag ? substr( sha1( 'fonts' ), 0, 8 ) : '';
7979

80-
$header_value = "{$mirage_hash}-{$polish_hash}-{$fonts_hash}";
80+
$header_value = "{$mirage_hash}{$polish_hash}{$fonts_hash}";
8181
$rules = array();
8282

8383
if ( $mirage_enabled || $polish_enabled || $fonts_enabled_flag ) {

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"description": "Module to manage performance settings in newfold plugins",
44
"license": "GPL-2.0-or-later",
55
"private": true,
6-
"version": "3.2.0",
6+
"version": "3.2.1",
77
"contributors": [
88
"Abdulrahman Al Ani (https://alani.dev/)",
99
"Evan Mullins (https://evanmullins.com)",

‎src/components/App/index.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,17 @@ const App = () => {
3636
}
3737
}, [] );
3838

39+
function capabilityKeyExists( key ) {
40+
return (
41+
typeof window.NewfoldRuntime !== 'undefined' &&
42+
window.NewfoldRuntime.capabilities &&
43+
Object.prototype.hasOwnProperty.call(
44+
window.NewfoldRuntime.capabilities,
45+
key
46+
)
47+
);
48+
}
49+
3950
return (
4051
<Root context={ { isRTL: false } }>
4152
<NotificationFeed />
@@ -87,9 +98,11 @@ const App = () => {
8798
>
8899
<ImageOptimization />
89100
</Container.Block>
90-
<Container.Block className="newfold-font-optimization">
91-
<FontOptimization />
92-
</Container.Block>
101+
{ capabilityKeyExists( 'hasCloudflareFonts' ) && (
102+
<Container.Block className="newfold-font-optimization">
103+
<FontOptimization />
104+
</Container.Block>
105+
) }
93106
</Container>
94107
</Page>
95108
</Root>

‎src/sections/FontOptimization/getFontOptimizationText.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const getFontOptimizationText = () => ( {
1919
'wp-module-performance'
2020
),
2121
fontOptimizationUpsellLink: __(
22-
'https://www.bluehost.com',
22+
'https://www.bluehost.com/hosting/shared',
2323
'wp-module-performance'
2424
),
2525
fontOptimizationLoading: __(

‎src/sections/FontOptimization/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ const FontOptimization = () => {
118118
/>
119119
) : (
120120
<FeatureUpsell
121+
className={ 'nfd-font-optimization-upsell' }
121122
cardText={ fontOptimizationUpsellText }
122123
cardLink={ fontOptimizationUpsellLink }
123124
>

‎src/sections/FontOptimization/stylesheet.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.newfold-font-optimization .nfd-button--upsell {
2+
position: absolute;
3+
top: 0;
4+
}

‎src/sections/ImageOptimization/getImageOptimizationText.js

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -108,30 +108,29 @@ const getImageOptimizationText = () => ( {
108108
'wp-module-performance'
109109
),
110110
imageOptimizationPolishLabel: __(
111-
'Optimize Images via Cloudflare',
112-
'wp-module-performance'
113-
),
114-
imageOptimizationPolishDescription: __(
115-
"Enables Cloudflare's image compression to reduce load times and bandwidth usage.",
116-
'wp-module-performance'
117-
),
118-
imageOptimizationMirageLabel: __(
119-
'Improve Image Loading on Slow Connections',
120-
'wp-module-performance'
121-
),
122-
imageOptimizationMirageDescription: __(
123-
"Cloudflare Mirage accelerates image loading for mobile and slow networks.",
124-
'wp-module-performance'
125-
),
126-
imageOptimizationUpsellText: __(
127-
'Get advanced image optimization features with Cloudflare Polish & Mirage.',
128-
'wp-module-performance'
129-
),
130-
imageOptimizationUpsellLink: __(
131-
'https://www.bluehost.com',
132-
'wp-module-performance'
133-
),
134-
111+
'Optimize Images via Cloudflare',
112+
'wp-module-performance'
113+
),
114+
imageOptimizationPolishDescription: __(
115+
"Enables Cloudflare's image compression to reduce load times and bandwidth usage.",
116+
'wp-module-performance'
117+
),
118+
imageOptimizationMirageLabel: __(
119+
'Improve Image Loading on Slow Connections',
120+
'wp-module-performance'
121+
),
122+
imageOptimizationMirageDescription: __(
123+
'Cloudflare Mirage accelerates image loading for mobile and slow networks.',
124+
'wp-module-performance'
125+
),
126+
imageOptimizationUpsellText: __(
127+
'Get advanced image optimization features with Cloudflare Polish & Mirage.',
128+
'wp-module-performance'
129+
),
130+
imageOptimizationUpsellLink: __(
131+
'https://www.bluehost.com/hosting/shared',
132+
'wp-module-performance'
133+
),
135134
} );
136135

137136
export default getImageOptimizationText;

‎src/sections/ImageOptimization/index.js

Lines changed: 92 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,27 @@ const ImageOptimization = () => {
178178
fetchSettings();
179179
}, [] );
180180

181+
function capabilityKeyExists( key ) {
182+
if (
183+
typeof window.NewfoldRuntime !== 'undefined' &&
184+
window.NewfoldRuntime.capabilities &&
185+
Object.prototype.hasOwnProperty.call(
186+
window.NewfoldRuntime.capabilities,
187+
key
188+
)
189+
) {
190+
return true;
191+
}
192+
return false;
193+
}
194+
195+
function isCapabilityEnabled( key ) {
196+
return (
197+
capabilityKeyExists( key ) &&
198+
window.NewfoldRuntime.capabilities[ key ] === true
199+
);
200+
}
201+
181202
if ( isLoading ) return <p>{ imageOptimizationLoadingMessage }</p>;
182203

183204
if ( isError )
@@ -216,6 +237,15 @@ const ImageOptimization = () => {
216237
return `${ window.location.origin }${ basePath }/wp-admin/upload.php?autoSelectBulk`;
217238
};
218239

240+
const hasPolish = capabilityKeyExists( 'hasCloudflarePolish' );
241+
const hasMirage = capabilityKeyExists( 'hasCloudflareMirage' );
242+
const polishEnabled = isCapabilityEnabled( 'hasCloudflarePolish' );
243+
const mirageEnabled = isCapabilityEnabled( 'hasCloudflareMirage' );
244+
const showNothing = ! hasPolish && ! hasMirage;
245+
const showUpsell =
246+
( hasPolish || hasMirage ) && ! polishEnabled && ! mirageEnabled;
247+
const showToggles = polishEnabled || mirageEnabled;
248+
219249
return (
220250
<Container.SettingsField
221251
title={ imageOptimizationSettingsTitle }
@@ -347,71 +377,69 @@ const ImageOptimization = () => {
347377
}
348378
disabled={ isBanned }
349379
/>
350-
{ ! NewfoldRuntime.hasCapability(
351-
'hasCloudflarePolish'
352-
) &&
353-
! NewfoldRuntime.hasCapability(
354-
'hasCloudflareMirage'
355-
) && (
356-
<div>
357-
<FeatureUpsell
358-
cardText={ imageOptimizationUpsellText }
359-
cardLink={ imageOptimizationUpsellLink }
360-
>
361-
<ToggleField
362-
id="cloudflare-polish"
363-
label={
364-
imageOptimizationPolishLabel
365-
}
366-
description={
367-
imageOptimizationPolishDescription
368-
}
369-
checked={ false }
370-
disabled
371-
/>{ ' ' }
372-
<ToggleField
373-
id="cloudflare-mirage"
374-
label={
375-
imageOptimizationMirageLabel
376-
}
377-
description={
378-
imageOptimizationMirageDescription
379-
}
380-
checked={ false }
381-
disabled
382-
/>{ ' ' }
383-
</FeatureUpsell>
384-
</div>
385-
) }
386-
{ NewfoldRuntime.hasCapability(
387-
'hasCloudflarePolish'
388-
) && (
389-
<ToggleField
390-
id="cloudflare-polish"
391-
label={ imageOptimizationPolishLabel }
392-
description={
393-
imageOptimizationPolishDescription
394-
}
395-
checked={ polish }
396-
onChange={ () =>
397-
handleToggle( 'cloudflarePolish', ! polish )
398-
}
399-
/>
380+
{ ! showNothing && showUpsell && (
381+
<div>
382+
<FeatureUpsell
383+
cardText={ imageOptimizationUpsellText }
384+
cardLink={ imageOptimizationUpsellLink }
385+
>
386+
<ToggleField
387+
id="cloudflare-polish"
388+
label={ imageOptimizationPolishLabel }
389+
description={
390+
imageOptimizationPolishDescription
391+
}
392+
checked={ false }
393+
disabled
394+
/>{ ' ' }
395+
<ToggleField
396+
id="cloudflare-mirage"
397+
label={ imageOptimizationMirageLabel }
398+
description={
399+
imageOptimizationMirageDescription
400+
}
401+
checked={ false }
402+
disabled
403+
/>{ ' ' }
404+
</FeatureUpsell>
405+
</div>
400406
) }
401-
{ NewfoldRuntime.hasCapability(
402-
'hasCloudflareMirage'
403-
) && (
404-
<ToggleField
405-
id="cloudflare-mirage"
406-
label={ imageOptimizationMirageLabel }
407-
description={
408-
imageOptimizationMirageDescription
409-
}
410-
checked={ mirage }
411-
onChange={ () =>
412-
handleToggle( 'cloudflareMirage', ! mirage )
413-
}
414-
/>
407+
408+
{ ! showNothing && showToggles && (
409+
<>
410+
{ polishEnabled && (
411+
<ToggleField
412+
id="cloudflare-polish"
413+
label={ imageOptimizationPolishLabel }
414+
description={
415+
imageOptimizationPolishDescription
416+
}
417+
checked={ polish }
418+
onChange={ () =>
419+
handleToggle(
420+
'cloudflarePolish',
421+
! polish
422+
)
423+
}
424+
/>
425+
) }
426+
{ mirageEnabled && (
427+
<ToggleField
428+
id="cloudflare-mirage"
429+
label={ imageOptimizationMirageLabel }
430+
description={
431+
imageOptimizationMirageDescription
432+
}
433+
checked={ mirage }
434+
onChange={ () =>
435+
handleToggle(
436+
'cloudflareMirage',
437+
! mirage
438+
)
439+
}
440+
/>
441+
) }
442+
</>
415443
) }
416444
</>
417445
) }

‎src/sections/JetpackBoost/stylesheet.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@
3939
right: 0;
4040
position: absolute;
4141
display: flex;
42-
flex-direction: row;
43-
justify-content: center;
44-
padding: 10px;
42+
flex-direction: row;
43+
justify-content: center;
44+
padding: 10px;
4545
z-index: 11;
4646
}
4747

@@ -137,9 +137,9 @@
137137
}
138138

139139
.nfd-performance-jetpack-boost-single-option-container {
140-
margin-bottom: 20px;
140+
margin-bottom: 20px;
141141
}
142142

143143
.margin20 {
144144
margin: 20px 0;
145-
}
145+
}

0 commit comments

Comments
 (0)