Skip to content

Instantly share code, notes, and snippets.

@Mamaduka

Mamaduka/toolbart-portal.js

Last active May 4, 2024 10:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Mamaduka/2b338e8859bee6b35af2dd6791fe6da7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Mamaduka/2b338e8859bee6b35af2dd6791fe6da7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Mamaduka revised this gist Apr 27, 2022. No changes.
  2. Mamaduka revised this gist Apr 27, 2022. 1 changed file with 27 additions and 22 deletions.
    49 changes: 27 additions & 22 deletions toolbart-portal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,29 +5,34 @@ import { createPortal, useEffect, useState } from '@wordpress/element';
    import { registerPlugin } from '@wordpress/plugins';
    import { Button } from '@wordpress/components';

    // Register Block Editor plugin
    // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/
    registerPlugin( 'toolbar-portal-example', {
    render() {
    // Lazy and one time initializations, also gives us a stable reference.
    const [ container ] = useState( () => {
    const element = document.createElement( 'div' );
    element.classList.add( 'smiley-container' );
    return element;
    } );
    function MyToolbarButton() {
    // Lazy and one time initializations, also gives us a stable reference.
    const [ container ] = useState( () => {
    const element = document.createElement('div')
    element.classList.add('smiley-container')
    return element;
    } );

    // Add the container to the toolbar on component mount.
    useEffect( () => {
    const editorToolbar = document.querySelector(
    '.edit-post-header__toolbar'
    );

    // Add the container to the toolbar on component mount.
    useEffect( () => {
    const editorToolbar = document.querySelector(
    '.edit-post-header__toolbar'
    );
    editorToolbar?.appendChild( container );
    return () => {
    editorToolbar?.removeChild( container );
    };
    }, [] );

    editorToolbar?.appendChild( container );
    return () => {
    editorToolbar?.removeChild( container );
    };
    }, [] );
    return createPortal(
    <Button icon="smiley"></Button>,
    container
    );
    }

    return createPortal( <Button icon="smiley"></Button>, container );
    },
    // Register Block Editor plugin
    // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/
    registerPlugin( 'toolbar-portal-example', {
    render: MyToolbarButton,
    } );
  3. Mamaduka revised this gist Apr 27, 2022. 1 changed file with 9 additions and 10 deletions.
    19 changes: 9 additions & 10 deletions toolbart-portal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,12 +5,14 @@ import { createPortal, useEffect, useState } from '@wordpress/element';
    import { registerPlugin } from '@wordpress/plugins';
    import { Button } from '@wordpress/components';

    // Register Block Editor plugin
    // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/
    registerPlugin( 'toolbar-portal-example', {
    render() {
    // Lazy and one time initializations, also gives us a stable reference.
    const [ container ] = useState( () => {
    const element = document.createElement('div')
    element.classList.add('smiley-container')
    const element = document.createElement( 'div' );
    element.classList.add( 'smiley-container' );
    return element;
    } );

    @@ -20,15 +22,12 @@ registerPlugin( 'toolbar-portal-example', {
    '.edit-post-header__toolbar'
    );

    editorToolbar?.appendChild( container )
    editorToolbar?.appendChild( container );
    return () => {
    editorToolbar?.removeChild( container )
    }
    editorToolbar?.removeChild( container );
    };
    }, [] );

    return createPortal(
    <Button icon="smiley"></Button>,
    container
    );
    }
    return createPortal( <Button icon="smiley"></Button>, container );
    },
    } );
  4. Mamaduka created this gist Apr 22, 2022.
    34 changes: 34 additions & 0 deletions toolbart-portal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    /**
    * WordPress dependencies
    */
    import { createPortal, useEffect, useState } from '@wordpress/element';
    import { registerPlugin } from '@wordpress/plugins';
    import { Button } from '@wordpress/components';

    registerPlugin( 'toolbar-portal-example', {
    render() {
    // Lazy and one time initializations, also gives us a stable reference.
    const [ container ] = useState( () => {
    const element = document.createElement('div')
    element.classList.add('smiley-container')
    return element;
    } );

    // Add the container to the toolbar on component mount.
    useEffect( () => {
    const editorToolbar = document.querySelector(
    '.edit-post-header__toolbar'
    );

    editorToolbar?.appendChild( container )
    return () => {
    editorToolbar?.removeChild( container )
    }
    }, [] );

    return createPortal(
    <Button icon="smiley"></Button>,
    container
    );
    }
    } );