Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Width AND height are required for (nested) Block Type #224

Open
valentindiehl opened this issue Sep 19, 2022 · 2 comments
Open

Width AND height are required for (nested) Block Type #224

valentindiehl opened this issue Sep 19, 2022 · 2 comments

Comments

@valentindiehl
Copy link

When creating a Block in a typescript setting, it seems the typings are created in a way that require both width and height to be set at creation time.

While looking through the documentation, examples and issues, it seems that is not the way it shuold be, as nested blocks should be able to compute their own measurements if given one dimension. (This is especially needed for e. g. headlines with text below (two fonts needed) inside a card, where height is limited.

This codeblock does not work in my IDE setting:

textContainer.add(
        new Block({
          fontFamily: XXX,
          fontTexture: XXX,
          width: 1
        })
      )

ESLint throws the following error:

Argument of type '{ fontFamily: string; fontTexture: string; width: number; }' is not assignable to parameter of type 'BlockOptions'.
Property 'height' is missing in type '{ fontFamily: string; fontTexture: string; width: number; }' but required in type 'BlockOptions'.

Have I just completely misunderstood the references I was looking at or is this an error in the typings?

@michal-repo
Copy link

michal-repo commented Oct 3, 2022

@valentindiehl As you said Block can calculate it's dimension but it will be based on child Objects.
So you need to add height to child Block or set it in top most Block (textContainer in your example).

Edit:
Actually :) just tested this and if you set fontSize: 0.15 it works without height.

textContainer.add(
	new Block({
		fontFamily: XXX,
		fontTexture: XXX,
		width: 1,
		fontSize: 0.15
	}).add(
		new Text({ content: 'Test' })
	)
);

@swingingtom
Copy link
Collaborator

I use this occasion to promote 7.x.x update.

  • Blocks have their height and width default values set to 'auto'. Which means they will fit their children.
  • Texts have their height default value set to 'auto'. Its text content define its height.
  • Texts have their width default value set to '100%'. Percent means relative to parent. By defaults, texts will try to take all the width of the its parent container, such as h1,p, in html.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants