Skip to content

Commit 13ab187

Browse files
Soare-Robert-DanielSoare-Robert-Daniel
authored
Merge pull request #4354 from Codeinwp/feat/new-social-icons
feat: add new icons for Social Icon widget and custom icon
2 parents 3207030 + bd919d8 commit 13ab187

File tree

2 files changed

+165
-3
lines changed

2 files changed

+165
-3
lines changed

‎assets/apps/components/src/Common/icons.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -956,6 +956,82 @@ const getIcons = (size) => {
956956
/>
957957
</svg>
958958
),
959+
medium: (
960+
<svg
961+
width={size}
962+
height={size}
963+
xmlns="http://www.w3.org/2000/svg"
964+
viewBox="0 0 640 512"
965+
>
966+
<path d="M180.5 74.3C80.8 74.3 0 155.6 0 256S80.8 437.7 180.5 437.7 361 356.4 361 256 280.2 74.3 180.5 74.3zm288.3 10.6c-49.8 0-90.2 76.6-90.2 171.1s40.4 171.1 90.3 171.1 90.3-76.6 90.3-171.1H559C559 161.5 518.6 84.9 468.8 84.9zm139.5 17.8c-17.5 0-31.7 68.6-31.7 153.3s14.2 153.3 31.7 153.3S640 340.6 640 256C640 171.4 625.8 102.7 608.3 102.7z" />
967+
</svg>
968+
),
969+
bluesky: (
970+
<svg
971+
width={size}
972+
height={size}
973+
xmlns="http://www.w3.org/2000/svg"
974+
viewBox="0 0 512 512"
975+
>
976+
<path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z" />
977+
</svg>
978+
),
979+
'square-bluesky': (
980+
<svg
981+
width={size}
982+
height={size}
983+
xmlns="http://www.w3.org/2000/svg"
984+
viewBox="0 0 448 512"
985+
>
986+
<path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM224 247.4c14.5-30 54-85.8 90.7-113.3c26.5-19.9 69.3-35.2 69.3 13.7c0 9.8-5.6 82.1-8.9 93.8c-11.4 40.8-53 51.2-90 44.9c64.7 11 81.2 47.5 45.6 84c-67.5 69.3-97-17.4-104.6-39.6c0 0 0 0 0 0l-.3-.9c-.9-2.6-1.4-4.1-1.8-4.1s-.9 1.5-1.8 4.1c-.1 .3-.2 .6-.3 .9c0 0 0 0 0 0c-7.6 22.2-37.1 108.8-104.6 39.6c-35.5-36.5-19.1-73 45.6-84c-37 6.3-78.6-4.1-90-44.9c-3.3-11.7-8.9-84-8.9-93.8c0-48.9 42.9-33.5 69.3-13.7c36.7 27.5 76.2 83.4 90.7 113.3z" />
987+
</svg>
988+
),
989+
threads: (
990+
<svg
991+
width={size}
992+
height={size}
993+
xmlns="http://www.w3.org/2000/svg"
994+
viewBox="0 0 448 512"
995+
>
996+
<path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z" />
997+
</svg>
998+
),
999+
'square-threads': (
1000+
<svg
1001+
width={size}
1002+
height={size}
1003+
xmlns="http://www.w3.org/2000/svg"
1004+
viewBox="0 0 448 512"
1005+
>
1006+
<path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM294.2 244.3c19.5 9.3 33.7 23.5 41.2 40.9c10.4 24.3 11.4 63.9-20.2 95.4c-24.2 24.1-53.5 35-95.1 35.3h-.2c-46.8-.3-82.8-16.1-106.9-46.8C91.5 341.8 80.4 303.7 80 256v-.1-.1c.4-47.7 11.5-85.7 33-113.1c24.2-30.7 60.2-46.5 106.9-46.8h.2c46.9 .3 83.3 16 108.2 46.6c12.3 15.1 21.3 33.3 27 54.4l-26.9 7.2c-4.7-17.2-11.9-31.9-21.4-43.6c-19.4-23.9-48.7-36.1-87-36.4c-38 .3-66.8 12.5-85.5 36.2c-17.5 22.3-26.6 54.4-26.9 95.5c.3 41.1 9.4 73.3 26.9 95.5c18.7 23.8 47.4 36 85.5 36.2c34.3-.3 56.9-8.4 75.8-27.3c21.5-21.5 21.1-47.9 14.2-64c-4-9.4-11.4-17.3-21.3-23.3c-2.4 18-7.9 32.2-16.5 43.2c-11.4 14.5-27.7 22.4-48.4 23.5c-15.7 .9-30.8-2.9-42.6-10.7c-13.9-9.2-22-23.2-22.9-39.5c-1.7-32.2 23.8-55.3 63.5-57.6c14.1-.8 27.3-.2 39.5 1.9c-1.6-9.9-4.9-17.7-9.8-23.4c-6.7-7.8-17.1-11.8-30.8-11.9h-.4c-11 0-26 3.1-35.6 17.6l-23-15.8c12.8-19.4 33.6-30.1 58.5-30.1h.6c41.8 .3 66.6 26.3 69.1 71.8c1.4 .6 2.8 1.2 4.2 1.9l.1 .5zm-71.8 67.5c17-.9 36.4-7.6 39.7-48.8c-8.8-1.9-18.6-2.9-29-2.9c-3.2 0-6.4 .1-9.6 .3c-28.6 1.6-38.1 15.5-37.4 27.9c.9 16.7 19 24.5 36.4 23.6l-.1-.1z" />
1007+
</svg>
1008+
),
1009+
substack: (
1010+
<svg
1011+
width={size}
1012+
height={size}
1013+
xmlns="http://www.w3.org/2000/svg"
1014+
viewBox="0 0 16 16"
1015+
>
1016+
<path d="M15 3.604H1v1.891h14v-1.89ZM1 7.208V16l7-3.926L15 16V7.208zM15 0H1v1.89h14z" />
1017+
</svg>
1018+
),
1019+
linktree: (
1020+
<svg
1021+
width={size}
1022+
height={size}
1023+
xmlns="http://www.w3.org/2000/svg"
1024+
x="0px"
1025+
y="0px"
1026+
viewBox="0 0 80 97.7"
1027+
xmlSpace="preserve"
1028+
>
1029+
<path
1030+
d="M0.2,33.1h24.2L7.1,16.7l9.5-9.6L33,23.8V0h14.2v23.8L63.6,7.1l9.5,9.6L55.8,33H80v13.5H55.7l17.3,16.7l-9.5,9.4L40,49.1
1031+
L16.5,72.7L7,63.2l17.3-16.7H0V33.1H0.2z M33.1,65.8h14.2v32H33.1V65.8z"
1032+
></path>
1033+
</svg>
1034+
),
9591035
};
9601036
};
9611037

‎assets/apps/customizer-controls/src/repeater/RepeaterItemContent.js‎

Lines changed: 89 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@ import {
55
ToggleControl,
66
TextareaControl,
77
ExternalLink,
8+
ButtonGroup,
9+
Placeholder,
810
} from '@wordpress/components';
911
import IconSelector from './IconSelector';
1012
import { getIcons, ColorControl } from '@neve-wp/components';
1113
import PropTypes from 'prop-types';
1214
import { __ } from '@wordpress/i18n';
1315
import Range from '../range/Range';
16+
import { MediaUpload } from '@wordpress/media-utils';
1417

1518
const RepeaterItemContent = ({
1619
fields,
@@ -163,14 +166,97 @@ const RepeaterItemContent = ({
163166
{...fields[key]}
164167
/>
165168
);
169+
case 'switcher':
170+
return <Switcher fieldId={key} currentField={currentField} />;
171+
case 'media':
172+
return (
173+
<Placeholder
174+
icon="format-image"
175+
label={__('Custom Icon', 'neve')}
176+
>
177+
{!value[index][key] ? (
178+
<>
179+
<p>
180+
{__(
181+
'Select from the Media Library or upload a new image',
182+
'neve'
183+
)}
184+
</p>
185+
<MediaUpload
186+
onSelect={(imageData) => {
187+
changeContent(key, imageData.url);
188+
}}
189+
allowedTypes={['image']}
190+
render={({ open }) => (
191+
<Button isSecondary onClick={open}>
192+
{__('Add Image', 'neve')}
193+
</Button>
194+
)}
195+
/>
196+
</>
197+
) : (
198+
<>
199+
<img src={value[index][key]} alt="icon" />
200+
<Button
201+
disabled={!wp.media}
202+
className="remove-image"
203+
isDestructive
204+
isSecondary
205+
onClick={() => {
206+
changeContent(key, '');
207+
}}
208+
>
209+
{__('Remove Image', 'neve')}
210+
</Button>
211+
</>
212+
)}
213+
</Placeholder>
214+
);
166215
}
167216
};
168217

218+
const Switcher = ({ fieldId, currentField }) => {
219+
const selectedOption =
220+
value[index][fieldId] || Object.keys(currentField.options)[0];
221+
222+
return (
223+
<>
224+
<ButtonGroup className="neve-background-type-control">
225+
{Object.entries(currentField.options).map(
226+
([optionKey, option]) => {
227+
return (
228+
<Button
229+
key={optionKey}
230+
isPrimary={optionKey === selectedOption}
231+
isSecondary={optionKey !== selectedOption}
232+
onClick={() => {
233+
changeContent(fieldId, optionKey);
234+
}}
235+
>
236+
{option.label}
237+
</Button>
238+
);
239+
}
240+
)}
241+
</ButtonGroup>
242+
{currentField.options?.[selectedOption]?.fields.map(
243+
(componentId) => {
244+
return toComponent(componentId, value[index]);
245+
}
246+
)}
247+
</>
248+
);
249+
};
250+
169251
return (
170252
<div className="nv-repeater-content">
171-
{Object.entries(currentFields).map(([key]) => {
172-
return toComponent(key, value[index]);
173-
})}
253+
{Object.entries(currentFields)
254+
.filter(([, options]) => {
255+
return !options?.parent;
256+
})
257+
.map(([key]) => {
258+
return toComponent(key, value[index]);
259+
})}
174260
{value.length > 1 && !isBlocked && (
175261
<Button
176262
className="nv-repeater-remove-button"

0 commit comments

Comments
 (0)