Skip to content

Instantly share code, notes, and snippets.

@tiamcquaid

tiamcquaid/index.js

Forked from florianbrinkmann/index.js
Created November 15, 2022 23:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tiamcquaid/9835ea6ae6ca299c264c05d176932ad1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tiamcquaid/9835ea6ae6ca299c264c05d176932ad1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @florianbrinkmann florianbrinkmann revised this gist Dec 9, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -92,6 +92,7 @@ registerBlockType( 'slug/postsSelect', {
    attributes: {
    selectedPosts: {
    type: 'array',
    default: [],
    }
    },
    edit: withSelect( ( select ) => {
  2. @florianbrinkmann florianbrinkmann created this gist Feb 24, 2020.
    109 changes: 109 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    /**
    * External dependencies
    */
    const { isUndefined, pickBy } = lodash;

    /**
    * WordPress dependencies
    */
    const {
    registerBlockType,
    } = wp.blocks;
    const {
    Component,
    } = wp.element;
    const {
    FormTokenField,
    } = wp.components;
    const {
    withSelect,
    } = wp.data;

    class PostEditComponent extends Component {
    constructor() {
    super( ...arguments );
    }

    componentDidMount() {
    this.isStillMounted = true;
    }

    componentWillUnmount() {
    this.isStillMounted = false;
    }

    render() {
    const { attributes, setAttributes, posts } = this.props;

    const {
    selectedPosts,
    } = attributes;

    let postNames = [];
    let postsFieldValue = [];
    if ( posts !== null ) {
    postNames = posts.map( ( post ) => post.title.raw );

    postsFieldValue = selectedPosts.map( ( postId ) => {
    let wantedPost = posts.find( ( post ) => {
    return post.id === postId;
    } );
    if ( wantedPost === undefined || ! wantedPost ) {
    return false;
    }
    return wantedPost.title.raw;
    } );
    }


    return(
    <div>
    <FormTokenField
    label='Posts'
    value={ postsFieldValue }
    suggestions={ postNames }
    maxSuggestions={ 20 }
    onChange={ ( selectedPosts ) => {
    // Build array of selected posts.
    let selectedPostsArray = [];
    selectedPosts.map(
    ( postName ) => {
    const matchingPost = posts.find( ( post ) => {
    return post.title.raw === postName;

    } );
    if ( matchingPost !== undefined ) {
    selectedPostsArray.push( matchingPost.id );
    }
    }
    )

    setAttributes( { selectedPosts: selectedPostsArray } );
    } }
    />
    </div>
    )
    }
    }

    registerBlockType( 'slug/postsSelect', {
    title: 'Posts',
    category: 'layout',
    attributes: {
    selectedPosts: {
    type: 'array',
    }
    },
    edit: withSelect( ( select ) => {
    const { getEntityRecords } = select( 'core' );
    const postsQuery = pickBy( {
    per_page: -1,
    }, ( value ) => ! isUndefined( value ) );
    return {
    posts: getEntityRecords( 'postType', 'post', postsQuery ),
    };
    } )( PostEditComponent ),
    save: () => {
    return null;
    }
    } )