Latest Posts Block: Make author's byline dynamic and add spacing control to layout

[shadigaafar]

Description

• change CSS flex to grid when choosing grid view
• make author byline dynamic
• add spacing control to layout

How has this been tested?

Screenshots

Types of changes

New feature (non-breaking change which adds functionality

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @shadigaafar! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[shadigaafar]

is this PR going to be reviewed? anyone?

[priethor]

Thanks for submitting your first PR, @shadigaafar ! 🎉

Contributors are currently focused on addressing the pending issues for WordPress 5.9, so please stay tuned as it might take a bit more time to review this PR.

[ryanwelcher]

Hello @shadigaafar! It looks like there are some Unit Tests failing, can you take a look to see if they are related to this PR?

[shadigaafar]

Hello @shadigaafar! It looks like there are some Unit Tests failing, can you take a look to see if they are related to this PR?

No, I don't think so.

[ZebulanStanphill]

Firstly, the unit tests failures are related to the changes in this PR.

FAIL test/integration/full-content/full-content.test.js (7.043 s)
  ● full post content fixture › core__latest-posts

    File 'core__latest-posts.json' does not match expected value:

    expect(received).toEqual(expected) // deep equality

    - Expected  - 0
    + Received  + 1

    @@ -14,10 +14,11 @@
            "featuredImageSizeWidth": null,
            "order": "desc",
            "orderBy": "date",
            "postLayout": "list",
            "postsToShow": 5,
    +       "spacing": "20px",
          },
          "clientId": "_clientId_0",
          "innerBlocks": Array [],
          "isValid": true,
          "name": "core/latest-posts",

      177 | 				expect( blocksActualNormalized ).toEqual( blocksExpected );
      178 | 			} catch ( err ) {
    > 179 | 				throw new Error(
          | 				      ^
      180 | 					format(
      181 | 						"File '%s' does not match expected value:\n\n%s",
      182 | 						jsonFixtureFileName,

      at Object.<anonymous> (test/integration/full-content/full-content.test.js:179:11)

  ● full post content fixture › core__latest-posts__displayPostDate

    File 'core__latest-posts__displayPostDate.json' does not match expected value:

    expect(received).toEqual(expected) // deep equality

    - Expected  - 0
    + Received  + 1

    @@ -14,10 +14,11 @@
            "featuredImageSizeWidth": null,
            "order": "desc",
            "orderBy": "date",
            "postLayout": "list",
            "postsToShow": 5,
    +       "spacing": "20px",
          },
          "clientId": "_clientId_0",
          "innerBlocks": Array [],
          "isValid": true,
          "name": "core/latest-posts",

      177 | 				expect( blocksActualNormalized ).toEqual( blocksExpected );
      178 | 			} catch ( err ) {
    > 179 | 				throw new Error(
          | 				      ^
      180 | 					format(
      181 | 						"File '%s' does not match expected value:\n\n%s",
      182 | 						jsonFixtureFileName,

      at Object.<anonymous> (test/integration/full-content/full-content.test.js:179:11)

Second, I think it would be best to split this into 2 separate PRs. The dynamic byline and spacing control are not related additions and should probably be reviewed separately.

Third, I was under the impression that the Latest Posts block was being phased out in favor of the Query Loop and related FSE dynamic blocks, which can accomplish the same thing but with far more flexibility. I could be mistaken, but I see no reason to continue updating the Latest Posts block when the new full site editing blocks can do all the same stuff and more.

[shadigaafar]

@ZebulanStanphill maybe you are right. there is no need for this block, cos query block can do the same and more. but i have seen it... there is the same problem there with grid view. uses flex, and should use CSS grid for better results. there are things hard to explain here. maybe in video you would understand why using CSS grid is much better than using flex in this situation for better responsive layout. currently i don't think these two blocks are usable without adding custom CSS to fix.

[ZebulanStanphill]

@shadigaafar A grid display option for the Query Loop block would be useful. I expect it won't happen until a generic grid layout option is introduced (so other blocks can use it as well), though.

There's some existing discussion about adding a proper grid layout option to Query Loop here.

[shadigaafar]

@ZebulanStanphill, I have read the issue you linked to, and I see the discussion is about reducing the CSS code, like this is the only problem. but I see in my view, that the layout is not responsive enough. elements are not wrapping gradually. and if you made theme wrap with flexbox, you will face a problem of margin between the elements. above all that. there is currently RTL related issues. I could make a PR and fix this problem myself. but it will take long time to review, though it will be a small change. we can't just wait for the generic solution. there should be a temporary fix until there is some generic solution. and the solution he proposed is not going to fix all the problems. but it will fix RTL. but everything will stay the same. it will not wrap with solution he proposes.

[shadigaafar]

@ZebulanStanphill, I have read the issue you linked to, and I see the discussion is about reducing the CSS code, like this is the only problem. but I see in my view, that the layout is not responsive enough. elements are not wrapping gradually. and if you made theme wrap with flexbox, you will face a problem of margin between the elements. above all that. there is currently RTL related issues. I could make a PR and fix this problem myself. but it will take long time to review, though it will be a small change. we can't just wait for the generic solution. there should be a temporary fix until there is some generic solution. and the solution he proposed is not going to fix all the problems. but it will fix RTL. but everything will stay the same. it will not wrap with solution he proposes.

Now that i think about it, there is fix for that using flex only. but i think moving forward by using grid, will allow for more complex grid layout in future.