Skip to content

Commit

Permalink
Site Logo Block: update Site Logo block UI and option syncing (#33179)
Browse files Browse the repository at this point in the history
  • Loading branch information
@creativecoder @sarayourfriend
creativecoder authored and sarayourfriend committed Jul 15, 2021
1 parent 500d8c0 commit 50db2b5
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 95 deletions.
90 changes: 53 additions & 37 deletions packages/block-library/src/site-logo/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
ResizableBox,
Spinner,
ToggleControl,
Icon,
Placeholder,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import {
Expand Down Expand Up @@ -257,37 +257,46 @@ export default function LogoEdit( {
const [ error, setError ] = useState();
const ref = useRef();

const { siteLogoId, canUserEdit, url, mediaItemData } = useSelect(
( select ) => {
const { canUser, getEntityRecord, getEditedEntityRecord } = select(
coreStore
);
const siteSettings = getEditedEntityRecord( 'root', 'site' );
const siteData = getEntityRecord( 'root', '__unstableBase' );
const _siteLogo = siteSettings?.site_logo;
const _readOnlyLogo = siteData?.site_logo;
const _canUserEdit = canUser( 'update', 'settings' );
const _siteLogoId = _siteLogo || _readOnlyLogo;
const mediaItem =
_siteLogoId &&
select( coreStore ).getEntityRecord(
'root',
'media',
_siteLogoId,
{ context: 'view' }
);
return {
siteLogoId: _siteLogoId,
canUserEdit: _canUserEdit,
url: siteData?.url,
mediaItemData: mediaItem && {
url: mediaItem.source_url,
alt: mediaItem.alt_text,
},
};
},
[]
);
const {
siteLogoId,
canUserEdit,
url,
mediaItemData,
isRequestingMediaItem,
} = useSelect( ( select ) => {
const { canUser, getEntityRecord, getEditedEntityRecord } = select(
coreStore
);
const siteSettings = getEditedEntityRecord( 'root', 'site' );
const siteData = getEntityRecord( 'root', '__unstableBase' );
const _siteLogo = siteSettings?.site_logo;
const _readOnlyLogo = siteData?.site_logo;
const _canUserEdit = canUser( 'update', 'settings' );
const _siteLogoId = _siteLogo || _readOnlyLogo;
const mediaItem =
_siteLogoId &&
select( coreStore ).getEntityRecord( 'root', 'media', _siteLogoId, {
context: 'view',
} );
const _isRequestingMediaItem =
_siteLogoId &&
! select( coreStore ).hasFinishedResolution( 'getEntityRecord', [
'root',
'media',
_siteLogoId,
{ context: 'view' },
] );
return {
siteLogoId: _siteLogoId,
canUserEdit: _canUserEdit,
url: siteData?.url,
mediaItemData: mediaItem && {
url: mediaItem.source_url,
alt: mediaItem.alt_text,
},
isRequestingMediaItem: _isRequestingMediaItem,
};
}, [] );

const { editEntityRecord } = useDispatch( coreStore );
const setLogo = ( newValue ) =>
Expand Down Expand Up @@ -336,7 +345,7 @@ export default function LogoEdit( {

const label = __( 'Site Logo' );
let logoImage;
const isLoading = siteLogoId === undefined || ( siteLogoId && ! logoUrl );
const isLoading = siteLogoId === undefined || isRequestingMediaItem;
if ( isLoading ) {
logoImage = <Spinner />;
}
Expand Down Expand Up @@ -366,10 +375,17 @@ export default function LogoEdit( {
{ controls }
{ !! logoUrl && logoImage }
{ ! logoUrl && ! canUserEdit && (
<div className="site-logo_placeholder">
<Icon icon={ icon } />
<p> { __( 'Site Logo' ) }</p>
</div>
<Placeholder
className="site-logo_placeholder"
icon={ icon }
label={ label }
>
{ isLoading && (
<span className="components-placeholder__preview">
<Spinner />
</span>
) }
</Placeholder>
) }
{ ! logoUrl && canUserEdit && (
<MediaPlaceholder
Expand Down
27 changes: 5 additions & 22 deletions packages/block-library/src/site-logo/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,19 @@

// Placeholder improvements.
.components-placeholder {
justify-content: flex-start;
min-height: auto;
height: 120px;
padding: $grid-unit-10;
padding: $grid-unit-15;

// Massage the label.
.components-placeholder__label {
margin-top: $grid-unit-15;
white-space: nowrap;
}

.components-placeholder__label .block-editor-block-icon {
.components-placeholder__label .block-editor-block-icon,
.components-placeholder__label > svg {
margin-right: $grid-unit-05;
}

Expand Down Expand Up @@ -80,23 +83,3 @@
}
}
}
.editor-styles-wrapper {
.site-logo_placeholder {
display: flex;
flex-direction: row;
align-items: flex-start;
border-radius: $radius-block-ui;
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
padding: $grid-unit-15;
svg {
margin-right: $grid-unit-15;
}
p {
font-family: $default-font;
font-size: $default-font-size;
margin: 0;
line-height: initial;
}
}
}
70 changes: 34 additions & 36 deletions packages/block-library/src/site-logo/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
*/
function render_block_core_site_logo( $attributes ) {
$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
if ( empty( $attributes['width'] ) ) {
if ( empty( $attributes['width'] ) || empty( $image ) ) {
return $image;
}
$height = (float) $attributes['width'] / ( (float) $image[1] / (float) $image[2] );
Expand Down Expand Up @@ -111,54 +111,52 @@ function _override_custom_logo_theme_mod( $custom_logo ) {
/**
* Updates the site_logo option when the custom_logo theme-mod gets updated.
*
* This function is hooked on "update_option_theme_mods_$theme" and not
* "pre_set_theme_mod_custom_logo" because by hooking in `update_option`
* the function accounts for remove_theme_mod() as well.
*
* @param mixed $old_value The old option value.
* @param mixed $value The new option value.
* @param mixed $value Attachment ID of the custom logo or an empty value.
* @return mixed
*/
function _sync_custom_logo_to_site_logo( $old_value, $value ) {
// Delete the option when the custom logo does not exist or was removed.
// This step ensures the option stays in sync.
if ( empty( $value['custom_logo'] ) ) {
function _sync_custom_logo_to_site_logo( $value ) {
if ( empty( $value ) ) {
delete_option( 'site_logo' );
} else {
remove_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo' );
update_option( 'site_logo', $value['custom_logo'] );
add_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo', 10, 2 );
update_option( 'site_logo', $value );
}

return $value;
}

add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );

/**
* Hooks `_sync_custom_logo_to_site_logo` in `update_option_theme_mods_$theme`.
* Deletes the site_logo when the custom_logo theme mod is removed.
*
* Runs on `setup_theme` to account for dynamically-switched themes in the Customizer.
* @param array $old_value Previous theme mod settings.
* @param array $value Updated theme mod settings.
*/
function _sync_custom_logo_to_site_logo_on_setup_theme() {
$theme = get_option( 'stylesheet' );
add_action( "update_option_theme_mods_$theme", '_sync_custom_logo_to_site_logo', 10, 2 );
function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
// If the custom_logo is being unset, it's being removed from theme mods.
if ( isset( $old_value['custom_logo'] ) && ! isset( $value['custom_logo'] ) ) {
delete_option( 'site_logo' );
}
}
add_action( 'setup_theme', '_sync_custom_logo_to_site_logo_on_setup_theme', 11 );

/**
* Updates the custom_logo theme-mod when the site_logo option gets updated.
*
* @param mixed $old_value The old option value.
* @param mixed $value The new option value.
*
* @return void
* Deletes the site logo when all theme mods are being removed.
*/
function _sync_site_logo_to_custom_logo( $old_value, $value ) {
// Delete the option when the custom logo does not exist or was removed.
// This step ensures the option stays in sync.
if ( empty( $value ) ) {
remove_theme_mod( 'custom_logo' );
} else {
remove_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );
set_theme_mod( 'custom_logo', $value );
add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );
function _delete_site_logo_on_remove_theme_mods() {
if ( false !== get_theme_support( 'custom-logo' ) ) {
delete_option( 'site_logo' );
}
}

add_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo', 10, 2 );
/**
* Hooks `_delete_site_logo_on_remove_custom_logo` in `update_option_theme_mods_$theme`.
* Hooks `_delete_site_logo_on_remove_theme_mods` in `delete_option_theme_mods_$theme`.
*
* Runs on `setup_theme` to account for dynamically-switched themes in the Customizer.
*/
function _delete_site_logo_on_remove_custom_logo_on_setup_theme() {
$theme = get_option( 'stylesheet' );
add_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10, 2 );
add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
}
add_action( 'setup_theme', '_delete_site_logo_on_remove_custom_logo_on_setup_theme', 11 );

0 comments on commit 50db2b5

Please sign in to comment.