diff --git a/assets/src/js/_acf-field-icon-picker.js b/assets/src/js/_acf-field-icon-picker.js index b219b546..ecf52aa9 100644 --- a/assets/src/js/_acf-field-icon-picker.js +++ b/assets/src/js/_acf-field-icon-picker.js @@ -5,14 +5,14 @@ wait: 'load', events: { - showField: 'scrollToSelectedDashicon', + showField: 'scrollToSelectedIcon', 'input .acf-icon_url': 'onUrlChange', - 'click .acf-icon-picker-dashicon': 'onDashiconClick', - 'focus .acf-icon-picker-dashicon-radio': 'onDashiconRadioFocus', - 'blur .acf-icon-picker-dashicon-radio': 'onDashiconRadioBlur', - 'keydown .acf-icon-picker-dashicon-radio': 'onDashiconKeyDown', - 'input .acf-dashicons-search-input': 'onDashiconSearch', - 'keydown .acf-dashicons-search-input': 'onDashiconSearchKeyDown', + 'click .acf-icon-picker-list-icon': 'onIconClick', + 'focus .acf-icon-picker-list-icon-radio': 'onIconRadioFocus', + 'blur .acf-icon-picker-list-icon-radio': 'onIconRadioBlur', + 'keydown .acf-icon-picker-list-icon-radio': 'onIconKeyDown', + 'input .acf-icon-list-search-input': 'onIconSearch', + 'keydown .acf-icon-list-search-input': 'onIconSearchKeyDown', 'click .acf-icon-picker-media-library-button': 'onMediaLibraryButtonClick', 'click .acf-icon-picker-media-library-preview': @@ -36,15 +36,15 @@ }, $selectedIcon() { - return this.$( '.acf-icon-picker-dashicon.active' ); + return this.$( '.acf-icon-picker-list-icon.active' ); }, $selectedRadio() { - return this.$( '.acf-icon-picker-dashicon.active input' ); + return this.$( '.acf-icon-picker-list-icon.active input' ); }, - $dashiconsList() { - return this.$( '.acf-dashicons-list' ); + $iconsList() { + return this.$( '.acf-icon-list:visible' ); }, $mediaLibraryButton() { @@ -64,9 +64,9 @@ // Store the type and value object. this.set( 'typeAndValue', typeAndValue ); - // Any time any acf tab is clicked, we will re-scroll to the selected dashicon. + // Any time any acf tab is clicked, we will re-scroll to the selected icon. $( '.acf-tab-button' ).on( 'click', () => { - this.initializeDashiconsTab( this.get( 'typeAndValue' ) ); + this.initializeIconLists( this.get( 'typeAndValue' ) ); } ); // Fire the action which lets people know the state has been updated. @@ -75,7 +75,7 @@ typeAndValue ); - this.initializeDashiconsTab( typeAndValue ); + this.initializeIconLists( typeAndValue ); this.alignMediaLibraryTabToCurrentValue( typeAndValue ); }, @@ -85,7 +85,7 @@ this.get( 'name' ) + '/type_and_value_change', ( newTypeAndValue ) => { // Align the visual state of each tab to the current value. - this.alignDashiconsTabToCurrentValue( newTypeAndValue ); + this.alignIconListTabsToCurrentValue( newTypeAndValue ); this.alignMediaLibraryTabToCurrentValue( newTypeAndValue ); this.alignUrlTabToCurrentValue( newTypeAndValue ); } @@ -112,7 +112,7 @@ this.set( 'typeAndValue', typeAndValue ); }, - scrollToSelectedDashicon() { + scrollToSelectedIcon() { const innerElement = this.$selectedIcon(); // If no icon is selected, do nothing. @@ -120,7 +120,7 @@ return; } - const scrollingDiv = this.$dashiconsList(); + const scrollingDiv = innerElement.closest( '.acf-icon-list' ); scrollingDiv.scrollTop( 0 ); const distance = innerElement.position().top - 50; @@ -132,92 +132,115 @@ scrollingDiv.scrollTop( distance ); }, - initializeDashiconsTab( typeAndValue ) { - const dashicons = this.getDashiconsList() || []; - this.set( 'dashicons', dashicons ); - this.renderDashiconList(); - this.initializeSelectedDashicon( typeAndValue ); + initializeIconLists( typeAndValue ) { + const self = this; + + this.$( '.acf-icon-list' ).each( function( i ) { + const tabName = $( this ).data( 'parent-tab' ); + const icons = self.getIconsList( tabName ) || []; + self.set( tabName, icons ); + self.renderIconList( $( this ) ); + + if ( typeAndValue.type === tabName ) { + // Select the correct icon. + self.selectIcon( $( this ), typeAndValue.value, false ).then( () => { + // Scroll to the selected icon. + self.scrollToSelectedIcon(); + } ); + } + } ); }, - initializeSelectedDashicon( typeAndValue ) { - if ( typeAndValue.type !== 'dashicons' ) { - return; - } - // Select the correct dashicon. - this.selectDashicon( typeAndValue.value, false ).then( () => { - // Scroll to the selected dashicon. - this.scrollToSelectedDashicon(); + alignIconListTabsToCurrentValue( typeAndValue ) { + const icons = this.$( '.acf-icon-list' ).filter( + function () { + return ( + $( this ).data( 'parent-tab' ) !== typeAndValue.type + ); + } + ); + const self = this; + icons.each( function () { + self.unselectIcon( $( this ) ); } ); }, - alignDashiconsTabToCurrentValue( typeAndValue ) { - if ( typeAndValue.type !== 'dashicons' ) { - this.unselectDashicon(); + renderIconHTML( tabName, icon ) { + const id = `${ this.get( 'name' ) }-${ icon.key }`; + + let style = ''; + if ( 'dashicons' !== tabName ) { + style = `background: center / contain url( ${ acf.strEscape( + icon.url + ) } ) no-repeat;`; } - }, - renderDashiconHTML( dashicon ) { - const id = `${ this.get( 'name' ) }-${ dashicon.key }`; - return ``; }, - renderDashiconList() { - const dashicons = this.get( 'dashicons' ); + renderIconList( $el ) { + const tabName = $el.data( 'parent-tab' ); + const icons = this.get( tabName ); - this.$dashiconsList().empty(); - dashicons.forEach( ( dashicon ) => { - this.$dashiconsList().append( - this.renderDashiconHTML( dashicon ) - ); - } ); + $el.empty(); + if ( icons ) { + icons.forEach( ( icon ) => { + const iconHTML = this.renderIconHTML( tabName, icon ); + $el.append( iconHTML ); + } ); + } }, - getDashiconsList() { - const iconPickeri10n = acf.get( 'iconPickeri10n' ) || []; + getIconsList( tabName ) { + if ( 'dashicons' === tabName ) { + const iconPickeri10n = acf.get( 'iconPickeri10n' ) || []; - const dashicons = Object.entries( iconPickeri10n ).map( - ( [ key, value ] ) => { - return { - key, - label: value, - }; - } - ); + return Object.entries( iconPickeri10n ).map( + ( [ key, value ] ) => { + return { + key, + label: value, + }; + } + ); + } - return dashicons; + return acf.get( `iconPickerIcons_${ tabName }` ); }, - getDashiconsBySearch( searchTerm ) { + getIconsBySearch( searchTerm, tabName ) { const lowercaseSearchTerm = searchTerm.toLowerCase(); - const dashicons = this.getDashiconsList(); + const icons = this.getIconsList( tabName); - const filteredDashicons = dashicons.filter( function ( icon ) { + const filteredIcons = icons.filter( function ( icon ) { const lowercaseIconLabel = icon.label.toLowerCase(); return lowercaseIconLabel.indexOf( lowercaseSearchTerm ) > -1; } ); - return filteredDashicons; + return filteredIcons; }, - selectDashicon( dashicon, setFocus = true ) { - this.set( 'selectedDashicon', dashicon ); + selectIcon( $el, icon, setFocus = true ) { + this.set( 'selectedIcon', icon ); // Select the new one. - const $newIcon = this.$dashiconsList().find( - '.acf-icon-picker-dashicon[data-icon="' + dashicon + '"]' + const $newIcon = $el.find( + '.acf-icon-picker-list-icon[data-icon="' + icon + '"]' ); $newIcon.addClass( 'active' ); @@ -228,64 +251,75 @@ $input.trigger( 'focus' ); } - this.updateTypeAndValue( 'dashicons', dashicon ); + this.updateTypeAndValue( $el.data( 'parent-tab' ), icon ); return thePromise; }, - unselectDashicon() { + unselectIcon( $el ) { // Remove the currently active dashicon, if any. - this.$dashiconsList() - .find( '.acf-icon-picker-dashicon' ) + $el + .find( '.acf-icon-picker-list-icon' ) .removeClass( 'active' ); - this.set( 'selectedDashicon', false ); + this.set( 'selectedIcon', false ); }, - onDashiconRadioFocus( e ) { - const dashicon = e.target.value; + onIconRadioFocus( e ) { + const icon = e.target.value; + const $tabs = this.$( e.target ).closest( + '.acf-icon-picker-tabs' + ); + const $iconsList = $tabs.find( '.acf-icon-list' ); - const $newIcon = this.$dashiconsList().find( - '.acf-icon-picker-dashicon[data-icon="' + dashicon + '"]' + const $newIcon = $iconsList.find( + '.acf-icon-picker-list-icon[data-icon="' + icon + '"]' ); $newIcon.addClass( 'focus' ); // If this is a different icon than previously selected, select it. - if ( this.get( 'selectedDashicon' ) !== dashicon ) { - this.unselectDashicon(); - this.selectDashicon( dashicon ); + if ( this.get( 'selectedIcon' ) !== icon ) { + this.unselectIcon( $iconsList ); + this.selectIcon( $iconsList, icon ); } }, - onDashiconRadioBlur( e ) { + onIconRadioBlur( e ) { const icon = this.$( e.target ); const iconParent = icon.parent(); iconParent.removeClass( 'focus' ); }, - onDashiconClick( e ) { + onIconClick( e ) { e.preventDefault(); + const $iconList = this.$( e.target ).closest( + '.acf-icon-list' + ); + const $iconElement = this.$( e.target ); + const icon = $iconElement.find( 'input' ).val(); - const icon = this.$( e.target ); - const dashicon = icon.find( 'input' ).val(); - - const $newIcon = this.$dashiconsList().find( - '.acf-icon-picker-dashicon[data-icon="' + dashicon + '"]' + const $newIconElement = $iconList.find( + '.acf-icon-picker-list-icon[data-icon="' + icon + '"]' ); - // By forcing focus on the input, we fire onDashiconRadioFocus. - $newIcon.find( 'input' ).prop( 'checked', true ).trigger( 'focus' ); + // By forcing focus on the input, we fire onIconRadioFocus. + $newIconElement.find( 'input' ).prop( 'checked', true ).trigger( 'focus' ); }, - onDashiconSearch( e ) { + onIconSearch( e ) { + const $tabs = this.$( e.target ).closest( + '.acf-icon-picker-tabs' + ); + const $iconList = $tabs.find( '.acf-icon-list' ); + const tabName = $tabs.data( 'tab' ); const searchTerm = e.target.value; - const filteredDashicons = this.getDashiconsBySearch( searchTerm ); + const filteredIcons = this.getIconsBySearch( searchTerm, tabName ); - if ( filteredDashicons.length > 0 || ! searchTerm ) { - this.set( 'dashicons', filteredDashicons ); - this.$( '.acf-dashicons-list-empty' ).hide(); - this.$( '.acf-dashicons-list ' ).show(); - this.renderDashiconList(); + if ( filteredIcons.length > 0 || ! searchTerm ) { + this.set( tabName, filteredIcons ); + $tabs.find( '.acf-icon-list-empty' ).hide(); + $tabs.find( '.acf-icon-list ' ).show(); + this.renderIconList( $iconList ); // Announce change of data to screen readers. wp.a11y.speak( @@ -300,12 +334,12 @@ ? searchTerm.substring( 0, 30 ) + '…' : searchTerm; - this.$( '.acf-dashicons-list ' ).hide(); - this.$( '.acf-dashicons-list-empty' ) - .find( '.acf-invalid-dashicon-search-term' ) + $tabs.find( '.acf-icon-list ' ).hide(); + $tabs.find( '.acf-icon-list-empty' ) + .find( '.acf-invalid-icon-list-search-term' ) .text( visualSearchTerm ); - this.$( '.acf-dashicons-list-empty' ).css( 'display', 'flex' ); - this.$( '.acf-dashicons-list-empty' ).show(); + $tabs.find( '.acf-icon-list-empty' ).css( 'display', 'flex' ); + $tabs.find( '.acf-icon-list-empty' ).show(); // Announce change of data to screen readers. wp.a11y.speak( @@ -315,7 +349,7 @@ } }, - onDashiconSearchKeyDown( e ) { + onIconSearchKeyDown( e ) { // Check if the pressed key is Enter (key code 13) if ( e.which === 13 ) { // Prevent submitting the entire form if someone presses enter after searching. @@ -323,7 +357,7 @@ } }, - onDashiconKeyDown( e ) { + onIconKeyDown( e ) { if ( e.which === 13 ) { // If someone presses enter while an icon is focused, prevent the form from submitting. e.preventDefault(); diff --git a/assets/src/sass/_acf-icon-picker.scss b/assets/src/sass/_acf-icon-picker.scss index 92447d74..99d7ab99 100644 --- a/assets/src/sass/_acf-icon-picker.scss +++ b/assets/src/sass/_acf-icon-picker.scss @@ -24,7 +24,7 @@ } } - .acf-dashicons-search-wrap { + .acf-icon-list-search-wrap { position: relative; &::after { @@ -52,13 +52,13 @@ overflow: hidden; } - .acf-dashicons-search-input { + .acf-icon-list-search-input { padding-left: 32px; border-radius: 0; } } - .acf-dashicons-list { + .acf-icon-list { margin-bottom: 0; display: flex; flex-wrap: wrap; @@ -74,7 +74,7 @@ gap: 8px; padding: 8px; - .acf-icon-picker-dashicon { + .acf-icon-picker-list-icon { background-color: transparent; display: flex; justify-content: center; @@ -97,7 +97,7 @@ } } - .acf-icon-picker-dashicon:hover { + .acf-icon-picker-list-icon:hover { border: solid 2px $blue-500; border-radius: 6px; cursor: pointer; @@ -117,12 +117,12 @@ } } - .acf-dashicons-list::after { + .acf-icon-list::after { content: ""; flex: auto; } - .acf-dashicons-list-empty { + .acf-icon-list-empty { position: relative; display: none; flex-direction: column; @@ -291,7 +291,7 @@ overflow: visible; } - .acf-dashicons-search-wrap { + .acf-icon-list-search-wrap { position: relative; &::after { @@ -319,13 +319,13 @@ overflow: hidden; } - .acf-dashicons-search-input { + .acf-icon-list-search-input { padding-left: 32px; border-radius: 6px 6px 0 0; } } - .acf-dashicons-list { + .acf-icon-list { margin-bottom: -32px; display: flex; flex-wrap: wrap; @@ -341,7 +341,7 @@ gap: 8px; padding: 8px; - .acf-icon-picker-dashicon { + .acf-icon-picker-list-icon { background-color: transparent; display: flex; justify-content: center; @@ -364,7 +364,7 @@ } } - .acf-icon-picker-dashicon:hover { + .acf-icon-picker-list-icon:hover { border: solid 2px $blue-500; border-radius: 6px; cursor: pointer; @@ -384,12 +384,12 @@ } } - .acf-dashicons-list::after { + .acf-icon-list::after { content: ""; flex: auto; } - .acf-dashicons-list-empty { + .acf-icon-list-empty { position: relative; display: none; flex-direction: column; diff --git a/assets/src/sass/acf-global.scss b/assets/src/sass/acf-global.scss index 4f5930dc..fffd7e94 100644 --- a/assets/src/sass/acf-global.scss +++ b/assets/src/sass/acf-global.scss @@ -6337,10 +6337,10 @@ h3.acf-sub-field-list-title:before, background: #667085; color: #fff; } -.acf-field-icon-picker .acf-dashicons-search-wrap { +.acf-field-icon-picker .acf-icon-list-search-wrap { position: relative; } -.acf-field-icon-picker .acf-dashicons-search-wrap::after { +.acf-field-icon-picker .acf-icon-list-search-wrap::after { content: ""; display: block; position: absolute; @@ -6363,11 +6363,11 @@ h3.acf-sub-field-list-title:before, white-space: nowrap; overflow: hidden; } -.acf-field-icon-picker .acf-dashicons-search-wrap .acf-dashicons-search-input { +.acf-field-icon-picker .acf-icon-list-search-wrap .acf-icon-list-search-input { padding-left: 32px; border-radius: 0; } -.acf-field-icon-picker .acf-dashicons-list { +.acf-field-icon-picker .acf-icon-list { margin-bottom: 0; display: flex; flex-wrap: wrap; @@ -6383,7 +6383,7 @@ h3.acf-sub-field-list-title:before, gap: 8px; padding: 8px; } -.acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon { +.acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon { background-color: transparent; display: flex; justify-content: center; @@ -6393,37 +6393,37 @@ h3.acf-sub-field-list-title:before, border: solid 2px transparent; color: #3c434a; } -.acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon label { +.acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon label { display: none; } -.acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio], -.acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio]:active, -.acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio]:checked::before, -.acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio]:focus { +.acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio], +.acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio]:active, +.acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio]:checked::before, +.acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio]:focus { all: initial; appearance: none; } -.acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon:hover { +.acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon:hover { border: solid 2px #0783BE; border-radius: 6px; cursor: pointer; } -.acf-field-icon-picker .acf-dashicons-list .active { +.acf-field-icon-picker .acf-icon-list .active { border: solid 2px #0783BE; background-color: #EBF5FA; border-radius: 6px; } -.acf-field-icon-picker .acf-dashicons-list .active.focus { +.acf-field-icon-picker .acf-icon-list .active.focus { border: solid 2px #0783BE; background-color: #EBF5FA; border-radius: 6px; box-shadow: 0 0 2px #0783be; } -.acf-field-icon-picker .acf-dashicons-list::after { +.acf-field-icon-picker .acf-icon-list::after { content: ""; flex: auto; } -.acf-field-icon-picker .acf-dashicons-list-empty { +.acf-field-icon-picker .acf-icon-list-empty { position: relative; display: none; flex-direction: column; @@ -6438,7 +6438,7 @@ h3.acf-sub-field-list-title:before, border-top: none; border-radius: 0 0 6px 6px; } -.acf-field-icon-picker .acf-dashicons-list-empty img { +.acf-field-icon-picker .acf-icon-list-empty img { height: 30px; width: 30px; color: #D0D5DD; @@ -6573,10 +6573,10 @@ h3.acf-sub-field-list-title:before, border: none; overflow: visible; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-search-wrap { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list-search-wrap { position: relative; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-search-wrap::after { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list-search-wrap::after { content: ""; display: block; position: absolute; @@ -6599,11 +6599,11 @@ h3.acf-sub-field-list-title:before, white-space: nowrap; overflow: hidden; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-search-wrap .acf-dashicons-search-input { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list-search-wrap .acf-icon-list-search-input { padding-left: 32px; border-radius: 6px 6px 0 0; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list { margin-bottom: -32px; display: flex; flex-wrap: wrap; @@ -6619,7 +6619,7 @@ h3.acf-sub-field-list-title:before, gap: 8px; padding: 8px; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon { background-color: transparent; display: flex; justify-content: center; @@ -6629,37 +6629,37 @@ h3.acf-sub-field-list-title:before, border: solid 2px transparent; color: #3c434a; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon label { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon label { display: none; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio], -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio]:active, -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio]:checked::before, -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon [type=radio]:focus { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio], +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio]:active, +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio]:checked::before, +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon [type=radio]:focus { all: initial; appearance: none; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .acf-icon-picker-dashicon:hover { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .acf-icon-picker-list-icon:hover { border: solid 2px #0783BE; border-radius: 6px; cursor: pointer; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .active { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .active { border: solid 2px #0783BE; background-color: #EBF5FA; border-radius: 6px; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list .active.focus { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list .active.focus { border: solid 2px #0783BE; background-color: #EBF5FA; border-radius: 6px; box-shadow: 0 0 2px #0783be; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list::after { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list::after { content: ""; flex: auto; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list-empty { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list-empty { position: relative; display: none; flex-direction: column; @@ -6674,7 +6674,7 @@ h3.acf-sub-field-list-title:before, border-top: none; border-radius: 0 0 6px 6px; } -.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-dashicons-list-empty img { +.acf-admin-page.acf-internal-post-type .acf-field-icon-picker .acf-icon-list-empty img { height: 30px; width: 30px; color: #D0D5DD; diff --git a/includes/fields/class-acf-field-icon_picker.php b/includes/fields/class-acf-field-icon_picker.php index 570c247e..288af307 100644 --- a/includes/fields/class-acf-field-icon_picker.php +++ b/includes/fields/class-acf-field-icon_picker.php @@ -67,6 +67,43 @@ public function get_tabs() { return apply_filters( 'acf/fields/icon_picker/tabs', $tabs ); } + /** + * Renders an icon list tab (i.e. dashicons, custom icons). + * + * @since ACF 6.4 + * + * @param string $tab_name The name of the tab being rendered. + * @return void + */ + public function render_icon_list_tab( $tab_name ) { + ?> +
+ 'acf-icon-list-search-input', + 'placeholder' => esc_html__( 'Search icons...', 'secure-custom-fields' ), + 'type' => 'search', + ) + ); + ?> +
+
+
+ +

+ ' + ); + ?> +

+
+ '; + echo '
'; switch ( $name ) { case 'dashicons': - echo '
'; - acf_text_input( - array( - 'class' => 'acf-dashicons-search-input', - 'placeholder' => esc_html__( 'Search icons...', 'secure-custom-fields' ), - 'type' => 'search', - ) - ); - echo '
'; - echo '
'; - ?> -
- -

- ' - ); - ?> -

-
- - render_icon_list_tab( $name ); break; case 'media_library': ?> @@ -215,6 +228,18 @@ class="acf-icon-picker-media-library-preview" break; default: do_action( 'acf/fields/icon_picker/tab/' . $name, $field ); + + $custom_icons = apply_filters( 'acf/fields/icon_picker/' . $name . '/icons', array(), $field ); + + if ( is_array( $custom_icons ) && ! empty( $custom_icons ) ) { + $this->render_icon_list_tab( $name ); + + acf_localize_data( + array( + 'iconPickerIcons_' . $name => $custom_icons, + ) + ); + } } echo '
';