Skip to content
This repository has been archived by the owner on Nov 6, 2022. It is now read-only.

[WIP] React refactoring of the 'Edit Block' UI #478

Closed
wants to merge 30 commits into from

Commits on Nov 24, 2019

  1. Begin the proof of concept for the refactoring

    It looks like it is possible to
    edit the post content directly from a meta box.
    Now, this meta box is rendered with React.
    There's still a lot of work left,
    including porting much of the PHP and JS into this.
    kienstra committed Nov 24, 2019
    Configuration menu
    Copy the full SHA
    4a583f2 View commit details
    Browse the repository at this point in the history
  2. At least for now, delete PHP saving of Block Properties meta box

    This can overwrite what's saved in the
    main block fields meta box.
    Also, the Block Properties meta box
    might have to be rendered by React,
    as the 'Slug' field gets its initial value from
    the post title.
    kienstra committed Nov 24, 2019
    Configuration menu
    Copy the full SHA
    dae00a8 View commit details
    Browse the repository at this point in the history
  3. Port PHP rendering to React, mainly copying

    Port some of the PHP from render_fields_meta_box()
    into the React component.
    Still, it doesn't actuall add fields,
    and doesn't save anything.
    kienstra committed Nov 24, 2019
    Configuration menu
    Copy the full SHA
    558fdf7 View commit details
    Browse the repository at this point in the history
  4. Render basic field rows from the post content

    Add a helper function to get the post content.
    Port render_fields_meta_box_row()
    into the component <FieldRow>,
    and render a row.
    kienstra committed Nov 24, 2019
    Configuration menu
    Copy the full SHA
    f85c315 View commit details
    Browse the repository at this point in the history
  5. Correct DocBlocks in FieldRow

    I copied these from BlockLabEditor,
    so update them for the new component.
    kienstra committed Nov 24, 2019
    Configuration menu
    Copy the full SHA
    8c6212a View commit details
    Browse the repository at this point in the history

Commits on Dec 17, 2019

  1. Merge in develop, resolve conflicts

    There were conflicts in:
    php/post-types/class-block-post.php
    tests/php/unit/post-types/test-class-block-post.php
    These were trivial, mainly from the [] array syntax.
    kienstra committed Dec 17, 2019
    Configuration menu
    Copy the full SHA
    52fd0b3 View commit details
    Browse the repository at this point in the history
  2. Add a basic JS unit test setup, modeled after AMP plugin

    tests/js/jest.config.js is mainly copied from the AMP
    plugin, though several values are removed.
    This should begin the work for Jest unit tests,
    and new helper functions should all have tests.
    kienstra committed Dec 17, 2019
    Configuration menu
    Copy the full SHA
    32aa1d9 View commit details
    Browse the repository at this point in the history
  3. Attempt to fix failed Travis build

    Do npm install before running
    npm run lint:js.
    kienstra committed Dec 17, 2019
    Configuration menu
    Copy the full SHA
    a0c8510 View commit details
    Browse the repository at this point in the history
  4. Move comment to the relevant file, do npm run lint:js:fix

    There's a comment for loader/index.js.
    But that probably fits better in that file.
    kienstra committed Dec 17, 2019
    Configuration menu
    Copy the full SHA
    3486c27 View commit details
    Browse the repository at this point in the history

Commits on Dec 21, 2019

  1. Restructure js files into js/src

    There are now 2 directories in that::
    block-editor/
    block-lab-editor/
    This might be changed, but I think it's a first
    step in making the directories a little easier
    to understand.
    kienstra committed Dec 21, 2019
    Configuration menu
    Copy the full SHA
    95384cf View commit details
    Browse the repository at this point in the history

Commits on Dec 22, 2019

  1. Add the build/ directory to the ignored test paths

    There's no need to look for
    Jest tests in the js/build directory.
    kienstra committed Dec 22, 2019
    Configuration menu
    Copy the full SHA
    4d667fd View commit details
    Browse the repository at this point in the history
  2. Rename function to getBlockLabAttributes, add unit test

    There's already a getBlockAttributes() function in Gutenberg,
    so give this a differernt name.
    kienstra committed Dec 22, 2019
    Configuration menu
    Copy the full SHA
    8bdaf09 View commit details
    Browse the repository at this point in the history
  3. Remove .gitkeep, as the directory isn't empty anymore

    It looks like .gitkeep is only so that
    GIT keeps the directory, even though it's empty.
    Now that jest.config.js is in the directory,
    it's not empty anymore.
    kienstra committed Dec 22, 2019
    Configuration menu
    Copy the full SHA
    a947395 View commit details
    Browse the repository at this point in the history
  4. Add a Jest unit test for getSimplifiedFields()

    @todo: consider if the compare function
    is still needed.
    kienstra committed Dec 22, 2019
    Configuration menu
    Copy the full SHA
    4e7ef28 View commit details
    Browse the repository at this point in the history

Commits on Dec 26, 2019

  1. Add a unit test for getBlockLabAttributes()

    There wasn't a test
    for this before.
    Also, add parameters for it.
    kienstra committed Dec 26, 2019
    Configuration menu
    Copy the full SHA
    84755bb View commit details
    Browse the repository at this point in the history

Commits on Dec 27, 2019

  1. Add a unit test for registerBlocks()

    Test not registering any block,
    registering 1, and registering 2.
    kienstra committed Dec 27, 2019
    Configuration menu
    Copy the full SHA
    ce9c437 View commit details
    Browse the repository at this point in the history
  2. Add more unit tests for registerBlocks()

    Test not registering any block,
    registering 1, and registering 2.
    kienstra committed Dec 27, 2019
    Configuration menu
    Copy the full SHA
    89b15e0 View commit details
    Browse the repository at this point in the history
  3. Use the singular for no block

    In this case, there is no need
    to pluralize this.
    kienstra committed Dec 27, 2019
    Configuration menu
    Copy the full SHA
    1648af2 View commit details
    Browse the repository at this point in the history
  4. Apply Rob's HTML and CSS for the new UI

    Copy Rob's markup for the fields,
    and the CSS file.
    kienstra committed Dec 27, 2019
    Configuration menu
    Copy the full SHA
    422f024 View commit details
    Browse the repository at this point in the history

Commits on Dec 30, 2019

  1. Add a function to save a new field value

    Also, add a unit test for that.
    @todo: test the 'happy path' of that function.
    kienstra committed Dec 30, 2019
    Configuration menu
    Copy the full SHA
    8350ee6 View commit details
    Browse the repository at this point in the history
  2. Fix an issue with saving fields

    When attempting to save field values,
    it looks like the block editor might have been
    overwriting the values
    kienstra committed Dec 30, 2019
    Configuration menu
    Copy the full SHA
    5b8a702 View commit details
    Browse the repository at this point in the history
  3. Address an issue where the rich text editor wasn't disabled

    It looks like the updateEditorSettings()
    call wasn't actually disabling rich text editing.
    kienstra committed Dec 30, 2019
    Configuration menu
    Copy the full SHA
    4099e6f View commit details
    Browse the repository at this point in the history
  4. Address an issue where the rich text editor wasn't disabled

    It looks like the updateEditorSettings()
    call wasn't actually disabling rich text editing.
    kienstra committed Dec 30, 2019
    Configuration menu
    Copy the full SHA
    9ef2653 View commit details
    Browse the repository at this point in the history
  5. Port the slugify function from the previous JS file

    Also, add a unit test for it.
    @TOOD: use this in the component.
    kienstra committed Dec 30, 2019
    Configuration menu
    Copy the full SHA
    ce65b45 View commit details
    Browse the repository at this point in the history

Commits on Dec 31, 2019

  1. Add a function to save the block

    This is used in 2 functions,
    so put it in a single function.
    kienstra committed Dec 31, 2019
    Configuration menu
    Copy the full SHA
    6da5177 View commit details
    Browse the repository at this point in the history
  2. Add a function to get a new field's name

    The first field will be 'new-field', the next 'new-field-1', etc..
    This mainly follows the previous implementation.
    kienstra committed Dec 31, 2019
    Configuration menu
    Copy the full SHA
    b540f7b View commit details
    Browse the repository at this point in the history
  3. Add a function to remove the slug format

    For example, 'new-field-4' will be
    'New Field 4'.
    kienstra committed Dec 31, 2019
    Configuration menu
    Copy the full SHA
    5b82bc5 View commit details
    Browse the repository at this point in the history
  4. Add helper functions to an index.js file

    To make it easier to import the helper functions,
    like with import { foo } from '../helpers';
    kienstra committed Dec 31, 2019
    Configuration menu
    Copy the full SHA
    34988cd View commit details
    Browse the repository at this point in the history
  5. Allow toggling the field editing area open and closed

    Add a method toggleEditArea()
    to enable opening and closing this.
    kienstra committed Dec 31, 2019
    Configuration menu
    Copy the full SHA
    3f12879 View commit details
    Browse the repository at this point in the history

Commits on Jan 14, 2020

  1. Merge in develop, resolve conflicts

    There were several conflicts,
    including in:
    js/blocks/components/block-lab-inspector.js
    js/blocks/components/edit.js
    kienstra committed Jan 14, 2020
    Configuration menu
    Copy the full SHA
    4f36644 View commit details
    Browse the repository at this point in the history