Visual Enhancements Needed for Image Block on Posts/Pages

[alexdeborba]

Description:

The Image Block has areas that could benefit from visual enhancements to improve content clarity and aesthetics:

1. Padding on Top of Image Block:

• The Image Block currently lacks adequate padding on the top. Adding some padding would provide better separation from preceding content, improving readability and visual flow.

2. Darker Background Color for Image Caption:

• The background color for the Image Caption is currently too light, causing it to blend in with the content. Giving it a slightly darker background color would make the caption stand out and be more distinguishable from the surrounding content.

Step-by-step Reproduction Instructions:

1. Navigate to a post that contains an Image Block.
2. Observe the spacing above the Image Block, noting the lack of padding.
3. Inspect the Image Caption and its background color.

Expected Behavior:

For a more visually appealing and user-friendly design, the Image Block should have adequate padding on top, and the Image Caption should stand out with a slightly darker background color.

Screenshot:

[alexdeborba]

Description:

The Image Block in the theme presents areas that require visual enhancements to ensure clarity and aesthetics. While efforts have been made to address these via the theme.json, they have not reflected in the theme as expected. Currently, temporary fixes have been applied directly to the style.css file.

1. Padding on Top of Image Block:

• The Image Block lacked adequate padding at the top. Introducing this padding ensured better separation from previous paragraph, enhancing both readability and the visual flow.

2. Darker Background Color for Image Caption:

• The existing background color for the Image Caption blended too easily with the main content. A slightly darker shade allows the caption to pop out, ensuring better content distinction.

Current Workaround:

While the intent was to reflect these styles via the theme.json, the theme did not adopt these changes. As a temporary measure, the necessary styles have been incorporated into the style.css file. This is a provisional solution, and the goal is to determine a proper method to integrate these styles within theme.json and subsequently remove them from style.css.

Screenshots:

Backend Preview.

Frontend Preview.

Suggested Next Steps:

Investigate why the theme.json is not effectively translating the styles to the theme. Once a solution is found, transition the styles from style.css to theme.json to maintain best practices and theme consistency.