| |
| <?php
|
|
|
|
|
|
|
|
|
| if ( ! defined( 'ABSPATH' ) ) exit;
|
|
|
|
|
| function afs_logo_sizes_defaults() {
|
| return array(
|
| 'small' => 50,
|
| 'medium' => 80,
|
| 'large' => 120,
|
| );
|
| }
|
|
|
| function afs_logo_sizes() {
|
| return apply_filters( 'afs_site_logo_sizes', afs_logo_sizes_defaults() );
|
| }
|
|
|
|
|
| add_filter( 'register_block_type_args', function( $args, $name ) {
|
| if ( $name === 'core/site-logo' ) {
|
| $args['attributes']['logoSize'] = array(
|
| 'type' => 'string',
|
| 'default' => 'medium',
|
| );
|
|
|
| $original_callback = isset( $args['render_callback'] ) ? $args['render_callback'] : null;
|
|
|
| $args['render_callback'] = function( $attributes, $content ) use ( $original_callback ) {
|
| $sizes = afs_logo_sizes();
|
| $size_class = 'logo-size-' . ( isset($attributes['logoSize']) ? esc_attr($attributes['logoSize']) : 'medium' );
|
|
|
| if ( empty($content) && function_exists('get_custom_logo') ) {
|
| $content = get_custom_logo() ?: '<img src="'. esc_url( includes_url('images/wordpress-logo.svg') ) .'" alt="Logo">';
|
| }
|
|
|
| $content = str_replace('<img', '<img class="'.$size_class.'"', $content);
|
|
|
| if ( $original_callback ) {
|
| return call_user_func( $original_callback, $attributes, $content );
|
| }
|
|
|
| return $content;
|
| };
|
| }
|
| return $args;
|
| }, 10, 2 );
|
|
|
|
|
| add_action( 'enqueue_block_editor_assets', function() {
|
| wp_add_inline_script(
|
| 'wp-blocks',
|
| "
|
| (function(wp){
|
| const { InspectorAdvancedControls, BlockEdit } = wp.blockEditor || wp.editor;
|
| const { PanelBody, SelectControl } = wp.components;
|
| const { createHigherOrderComponent } = wp.compose;
|
| const { addFilter } = wp.hooks;
|
|
|
| const sizes = { small: 'logo-size-small', medium: 'logo-size-medium', large: 'logo-size-large' };
|
|
|
| const customizeSiteLogo = createHigherOrderComponent( ( BlockEditComponent ) => {
|
| return ( props ) => {
|
| if ( props.name !== 'core/site-logo' ) return <BlockEditComponent {...props} />;
|
|
|
| const { attributes, setAttributes, clientId } = props;
|
| const { logoSize } = attributes;
|
|
|
| // Live preview: apply class to the img element in the editor
|
| wp.data.dispatch('core/block-editor').updateBlockAttributes(clientId, { logoSize: logoSize });
|
|
|
| return (
|
| <>
|
| <BlockEditComponent {...props} />
|
| <InspectorAdvancedControls>
|
| <PanelBody title='Logo Height' initialOpen={ true }>
|
| <SelectControl
|
| label='Height (Small / Medium / Large)'
|
| value={ attributes.logoSize || 'medium' }
|
| options={[
|
| { label: 'Small', value: 'small' },
|
| { label: 'Medium', value: 'medium' },
|
| { label: 'Large', value: 'large' },
|
| ]}
|
| onChange={ ( value ) => setAttributes({ logoSize: value }) }
|
| />
|
| </PanelBody>
|
| </InspectorAdvancedControls>
|
| </>
|
| );
|
| };
|
| }, 'customizeSiteLogo' );
|
|
|
| addFilter(
|
| 'editor.BlockEdit',
|
| 'afs/site-logo-live-height-dropdown',
|
| customizeSiteLogo
|
| );
|
|
|
| // Hide width slider
|
| wp.hooks.addFilter('blocks.registerBlockType', 'afs/hide-width-slider', ( settings, name ) => {
|
| if (name === 'core/site-logo') {
|
| if (settings.supports) {
|
| settings.supports.__experimentalWidthControl = false;
|
| }
|
| }
|
| return settings;
|
| });
|
|
|
| })(window.wp);
|
| "
|
| );
|
|
|
|
|
| $sizes = afs_logo_sizes();
|
| wp_add_inline_style( 'wp-block-editor', "
|
| .editor-styles-wrapper .logo-size-small { max-height: {$sizes['small']}px; height:auto; width:auto; max-width:100%; }
|
| .editor-styles-wrapper .logo-size-medium { max-height: {$sizes['medium']}px; height:auto; width:auto; max-width:100%; }
|
| .editor-styles-wrapper .logo-size-large { max-height: {$sizes['large']}px; height:auto; width:auto; max-width:100%; }
|
|
|
| @media (max-width:768px){
|
| .editor-styles-wrapper .logo-size-small { max-height: ".floor($sizes['small']*0.8)."px; }
|
| .editor-styles-wrapper .logo-size-medium { max-height: ".floor($sizes['medium']*0.75)."px; }
|
| .editor-styles-wrapper .logo-size-large { max-height: ".floor($sizes['large']*0.83)."px; }
|
| }
|
| " );
|
| });
|
|
|
|
|
| add_action( 'wp_enqueue_scripts', function() {
|
| $sizes = afs_logo_sizes();
|
| wp_add_inline_style( 'wp-block-library', "
|
| .logo-size-small { max-height: {$sizes['small']}px; height:auto; width:auto; max-width:100%; }
|
| .logo-size-medium { max-height: {$sizes['medium']}px; height:auto; width:auto; max-width:100%; }
|
| .logo-size-large { max-height: {$sizes['large']}px; height:auto; width:auto; max-width:100%; }
|
|
|
| @media (max-width:768px){
|
| .logo-size-small { max-height: ".floor($sizes['small']*0.8)."px; }
|
| .logo-size-medium { max-height: ".floor($sizes['medium']*0.75)."px; }
|
| .logo-size-large { max-height: ".floor($sizes['large']*0.83)."px; }
|
| }
|
| " );
|
| });
|
| |
| |
Comments